1、ECMAScript中的继承（inheritance）
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript">
function clickMe() {
/* 实例化基类*/
var superPerson = new SuperPerson();
superPerson.getFriends();//111,222
/* 实例化子类 */
var sonPerson1 = new SonPerson();
sonPerson1.getFriends(); //333,444
//sonPerson1.sayName(); //正确写法 Tom
// sonPerson1.sayAge();//错误写法
sonPerson1.friends.push("999");
sonPerson1.getFriends();//333,444,999
var sonPerson2 = new SonPerson();
sonPerson2.getFriends(); //333,444
/* PS: 本处而非书上说的 sonPerson2.getFriends();输出结果是333,444,999
* 未实现共享属性friends，实例中更改原型属性，并不能被另一实例所共享（书中解释存在异议）
*/
}
/* 基类*/
function SuperPerson() { //基类构造函数，存放属性
this.name = "Tom";
this.sex = "F";
this.age = 12;
this.friends = ["111", "222"];
}
SuperPerson.prototype = { //基类原型模式，存放方法
constructor: SuperPerson,
getFriends: function () {
alert(this.friends);
}
}
/* 子类 */
function SonPerson() { //子类构造函数，存放属性
this.tel = 1389909;
this.friends = ["333", "444"];
this.sayName = function () { //子类中调用基类属性的方法必须存在构造函数模式中创建，不能使用原型模式创建【重点：正确写法】
alert(this.name);
}
}
SonPerson.prototype = new SuperPerson(); //SonPerson类继承SuperPerson类
/* 【重点：错误写法】
* 以上刚刚把SuperPerson的实例赋值给原型，又接着将原型替换成一个对象字面量而导致的问题
* 由于现在的本原型包含的是一个Object的实例，而非SuperPerson实例
* 因此我们设想中的原型链已近被切断--SubPerson和SuperPerson之间已经没有关系了
*
*/
//SonPerson.prototype = {
// sayAge: function () {
// alert(this.age);
// }
//}
</script>
</head>
<body>
<form id="form1" runat="server">
<input type="button" name="点我 " value="点我 " onclick="clickMe()" />
</form>
</body>
</html>
2、组合继承（包括原型链和借用构造函数），又称为伪经典继承
构造函数模式：它的每个成员都无法得到复用，包括函数；
原型模式：使用构造函数的prototype属性来指定那些应该共享的属性和方法；
既使用组合继承来吸收两者的优先，创建实例属性独立，方法复用的对象。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title></title>
<script type="text/javascript">
// 【组合继承（实战用法）：包含了借用构造函数继承和原型链继承】
// 【区别】
/* 【借用构造函数】又称经典继承：目的借用构造函数来实现对实例属性的继承 */
/* 【原型链继承】普通继承：目的使用原型链实现对原型属性和方法的继承 */
function clickMe() {
var superType = new SuperType();
superType.getColors(); //111,222
var subType1 = new SubType();
subType1.getColors(); //111,222
subType1.colors.push("333");
subType1.getColors(); //111,222,333
var subType2 = new SubType();
subType2.getColors();//111,222
}
function SuperType() {
this.colors = ["111","222"];
}
SuperType.prototype = {
getColors: function () {
alert(this.colors);
}
}
function SubType() {
SuperType.call(this); //经典继承：继承实例属性
}
SubType.prototype = new SuperType(); //原型链继承：继承方法
</script>
</head>
<body>
<form id="form1" runat="server">
<input type="button" name="点我 " value="点我 " onclick="clickMe()" />
</form>
</body>
</html>
3、JS的闭包
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="TestHelloWorld.aspx.cs"
Inherits="TestWebButton.JavaScript.TestHelloWorld" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title></title>
<script type="text/javascript">
// 【闭包】
/*【完美的闭包】
* 1、在一个函数的生命周期内所有的属性都得到释放且独立；
* 2、在函数内属性的作用域应该处于块作用域内（“{}”表示块作用域）；
*
*/
function clickMe() {
/* 在场景中 报错的为实现闭包 */
showNameError(6); //7
showNameRight(6); //报错,i未定义
perfect(10); //报错，num未定义
}
/* 非闭包 */
function showNameError(num) {
for (var i = 0; i <= num; i++) {
document.write( "</br>"+"Error : " + i );
}
alert(i); //7，此处i为function showNameError(num){}函数内作用域
}
/* 闭包 */
function showNameRight(num) {
/*
*块级作用域（通常称为私有作用域）
*(function () {
* })()
*不要小看这两个括号：1、第一个括号表示定义一个匿名函数；2、第二个括号表示执行这个匿名函数；
*/
(function () {
for (var i = 0; i <= num; i++) {
document.write("Right : " + i + "</br>");
}
})()
alert(i); //报错,i未定义
}
/* 完美的闭包 PS：我理解的 */
function perfect(num_) {
(function () {
for (var i = 10; i <= num_; i++) {
var _num = document.getElementById("10").value; //JS不会主动将持有的DOM对象释放
var num = _num;
_num = null; //手动释放
document.write("Right : " + num + "</br>"); // num的作用域仅存在于块作用域中
}
})()
alert(num); //报错，num未定义
}
//clickMe();
</script>
</head>
<body>
<form id="form1" runat="server">
<input type="text" id="10" name="num" value="10" />
<input type="button" name="点我 " value="点我 " onclick=" perfect(10)" />
</form>
</body>
</html>
相关推荐
常见的编程语言可以分为编译型语言（如C++、Java等）和解释型语言（如Python、JavaScript等）。了解它们之间的区别及适用场景有助于软件设计师在项目初期做出更合理的选型。 #### 语言处理工具 语言处理工具主要...
中级软件开发 代码 401 - 高级软件开发 我在其中使用了以下功能： 1-斜体 2- 表格 具有正确字符的复选框 没有正确字符的复选框 5- 有序列表 6-图像 7- 链接 代码 201 的目录 读号 章节名称 介绍性 HTML 和 ...
本笔记将详细探讨HTML的中级知识，旨在帮助开发者提升技能水平。 1. **语义化标签** 随着HTML5的引入，一系列语义化标签如, , , , 和等被引入，它们有助于提高页面结构的可读性和可访问性。了解并正确使用这些标签...
Java中级笔记涵盖了多个关键的Web开发技术，包括Servlet、JSP、分页和Ajax。这些技术在构建动态、交互式的Web应用程序中起着至关重要的作用。 1. **Servlet**：Servlet是Java EE平台中的核心组件，它是一个Java类，...
#### Java EE中级部分 - **Servlets**：处理HTTP请求的基本组件。 - **JSP (JavaServer Pages)**：动态网页技术，与HTML结合展示动态内容。 - **MVC (Model-View-Controller)**：设计模式，用于分离数据模型、用户...
JavaScript中的作用域和上下文对象是理解这门语言的关键概念，尤其对于中高级开发者来说更是如此。作用域决定了变量的可见性和生命周期，而上下文对象则关乎函数执行时的环境。 首先，我们要明白JavaScript的作用域...
### JavaScript中级知识点详解 #### 一、回顾：DOM与事件 **1. DOM (文档对象模型)** DOM 是一种标准的编程接口，用于处理 HTML 和 XML 文档。它定义了如何通过编程方式访问文档结构、内容以及样式。在 Web 开发...
### Java学习笔记知识点详解 #### Java 平台与开发概述 - **Java平台分类：** - **J2SE（Java SE）:** 标准版，适用于桌面应用程序开发。 - **J2EE（Java EE）:** 企业版，专为Web应用和服务端应用程序设计。 -...
JavaScript 中级笔记第五章面向对象的基础主要涵盖了对象的创建、使用、公共方法、私有方法以及特权方法等核心概念。面向对象编程是JavaScript中的重要特性，理解和掌握这些知识点对于提升编程能力至关重要。 1. **...
这个名为"JavaScript 基础和中级 代码汇总.zip"的压缩包文件显然是一个JavaScript学习者或开发者积累的实践代码集合，旨在帮助理解和巩固从基础到中级的JavaScript知识。 首先，我们来看看JavaScript的基础部分。...
在JavaScript的中级学习中，掌握闭包的概念是理解高级编程技巧的基础。闭包的特性包括能够记忆并访问函数定义时所在的词法作用域。 在给出的文件内容中，闭包被描述为“内层的函数可以引用存在于包围它的函数内的...
中级JS笔记 高级JS注释 现在使用JavaScript 互动课程：关闭或关闭 学习AngularJS-这样的列表，但重点是AngularJS。 网站/博客 特定JavaScript NodeHispano 费内特 它们包括JavaScript，但不是特定的 ...
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行] 本例中，两个对象都指向同一个对象，当修改某一个对象的属性内容时，则会影响另一个。 我们再来看一个例子，这次我们利用数组来讲解引用： [Ctrl+A 全选 注:如需...
标题中的“Note-taking-app:命令行节点笔记应用程序”指的是一个基于Node.js开发的简单命令行工具，用于创建、查看和管理个人笔记。这个应用程序利用了Node.js的非阻塞I/O模型和丰富的生态系统，为用户提供了一种在...
### Java EE 中级部分 随着技术的发展，Java EE 还涉及到了以下更高级的技术： - **Servlet**：处理 HTTP 请求的基本接口。 - **JSP (Java Server Pages)**：用于生成动态 Web 页面。 - **MVC 模式 (Model-View-...