近期在网上看到一篇关于 "javaScript 面向对象程序设计" 的文章，觉得写的挺好的，这里我将原文修改了一下，加了更加详细的注释，和大家共享一下，也作为学习 javascript 的笔记将其记录下。
原文出处：http://www.cftea.com/c/2008/01/7RNSKPYOSJAGGPCT.asp
定义和赋值
// 变量的定义
var a;
// 函数的定义
function a() {};
// 两个过程，首先定义变量 a，其次给变量 a 赋值
var a = 1;
// 两个过程，首先定义变量 a 和定义一个匿名函数，其次将此匿名函数赋值给变量 a
var a = function() {};
关于变量和函数的定义及其赋值，要注意以下几点：
- 变量定义和函数定义是在整个脚本执行之前完成的，而变量赋值是在执行阶段完成的，若赋值语句(给变量赋值)出现在要执行脚本(需要用到要被赋值的变量)之后，此值仍然是 undefined，因为脚本的执行是自上而下的。
- 变量定义的作用仅仅是给所声明的变量指明它的作用域，变量定义并不给变量初始值，任何没有定义的而直接使用的变量，或者定义但没有赋值的变量，他们的值都是 undefined。
- 函数定义除了声明函数所在的作用域外，同时还定义函数体结构。这个过程是递归的，也就是说，对函数体的定义包括了对函数体内的变量定义和函数定义。
- 变量定义和同名函数定义同时出现时，变量定义确实不对变量做什么，仅仅是声明它的作用域而已，它不会覆盖函数定义。
- 不管赋值语句写在函数定义之前还是函数定义之后，对一个跟函数同名的变量赋值总会覆盖函数定义。
- eval 中的如果出现变量定义和函数定义，则它们是在执行阶段完成的。所以，不到万不得已，不要用 eval。另外，即使要用 eval，也不要在里面用局部变量和局部方法。
仔细分析以下脚本，有助于理解上述要注意的事项：
/**
* 首先，变量定义和函数定义是在脚本执行之前完成的。
* 1. 定义变量 a
* 2. 定义函数 a
* 3. 定义函数 b
* 4. 定义变量 b
* 5. 定义变量 c
* 6. 定义变量 c
* 7. 定义匿名函数
* 开始执行脚本(开始进行赋值操作)：
* alert(a) -> 变量的定义不会覆盖同名函数的定义，此时还未对变量 a 赋值，因此结果为 function a() {}
* alert(b) -> 变量的定义不会覆盖同名函数的定义，此时还未对变量 b 赋值，因此结果为 function b() {}
* alert(c) -> 执行脚本之前，只定义了变量 c，此时还未对变量 c 赋值，因此结果为 undefined
* var a = "a" -> 将字符串 "a" 赋值给变量 a，它覆盖了函数 a 的定义
* var b = "b" -> 将字符串 "b" 赋值给变量 b，它覆盖了函数 b 的定义
* var b = "b" -> 将字符串 "c" 赋值给变量 c
* var c = function() {} -> 将匿名函数赋值给变量 c
* alert(a) -> 字符串 "a"
* alert(b) -> 字符串 "b"
* alert(c) -> 赋值语句是顺序执行的，后面的赋值覆盖了前面的赋值，不管赋的值是函数还是其它对象。
* 因此结果为 function() {}
*/
alert(a);
alert(b);
alert(c);
var a = "a";
function a() {}
function b() {}
var b = "b";
var c = "c";
var c = function() {}
alert(a);
alert(b);
alert(c);
this 和执行上下文
<script type="text/javascript" language="javascript">
var x = "I'm a global variable!";
function method() {
alert(x);
alert(this.x);
}
function class1() {
// private field
var x = "I'm a private variable!";
// private method
function method1() {
alert(x);
alert(this.x);
}
var method2 = method;
// public field
this.x = "I'm a object variable!";
// public method
this.method1 = function() {
alert(x);
alert(this.x);
}
this.method2 = method;
/**
* constructor
* 正在创建对象，那当前的执行上下文就是这个正在创建的对象，所以 this 指向的也是当前正在创建的
× 对象，即 class1 类的实例。我们假设实例名为 obj。
*/
{
/**
* 正在执行的方法所附属的对象也是这个正在创建的对象，即 obj 对象。
* alert(x); class1 定义的 x 会覆盖全局的同名 x -> I'm a private variable!
* alert(this.x); this 就是 obj -> I'm a object variable!
*/
this.method1();
/**
* method1 定义在 class1 中，它并不是附属于 class1 的，也不是附属于 class1 实例化后的
× 对象的，只是它的作用域被限制在了 class1 当中。因此，它的附属对象实际上是全局对象。
* alert(x); class1 定义的 x 会覆盖全局的同名 x -> I'm a private variable!
* alert(this.x); this 为全局对象 window -> I'm a global variable!
*/
method1();
/**
* method2() 虽然是在 class1 中定义的，但是 method() 是在 class1 之外定义的，method 被赋值
× 给 method2 时，并没有改变 method 的作用域，所以，在 method2 执行时，仍然是在 method 被
× 定义的作用域内执行的。因此不管是执行 method2 还是 this.method2，它们的第一句(alert(x);)
* 执行时，会在 method 所在的作用域中找 x，所以结果为 I'm a global variable!
* alert(x); -> I'm a global variable!
* alert(this.x); this 就是 obj -> I'm a object variable!
*/
this.method2();
/**
* 原因同上
* alert(x); -> I'm a global variable!
* alert(this.x); this 为全局对象 window -> I'm a global variable!
*/
method2();
/**
* call 会改变执行上下文，所以通过 method1.call(this) 和 method2.call(this) 时，
* this.x 都变成了 I’m a object variable!!。但是它不改变作用域，所以 x 仍然跟
* 不使用 call 方法调用时的结果是一样的。
* alert(x); -> I'm a private variable!
* alert(this.x); -> I'm a object variable!
*/
method1.call(this);
/**
* 原因同上
* alert(x); -> I'm a global variable!
* alert(this.x); -> I'm a object variable!
*/
method2.call(this);
}
}
/**
* 创建 class1 对象，执行 class1 构造函数里的操作，参见注释
*/
var o = new class1();
/**
* alert(x); -> I'm a global variable!
* alert(this.x); this 为 window -> I'm a global variable!
*/
method();
/**
* 执行 o.method1() 时，alert(x) 没有用 this 指出 x 的执行上下文，则 x 表示当前执行的函数所在的
* 作用域中最近定义的变量，因此，这时输出的就是 I’m a private variable!。
* alert(x); -> I'm a private variable!
* alert(this.x) -> I'm a object variable!
*/
o.method1();
/**
* 构造函数里已做过解释。
* alert(x); -> I'm a global variable!
* alert(this.x); -> I'm a object variable!
*/
o.method2();
</script>
通过上面的代码分析，我们来总结下什么是执行上下文。我们需要要注意以下几个概念：
- 如果当前正在执行的是一个方法，则执行上下文就是该方法所附属的对象，如果当前正在执行的是一个创建对象(就是通过 new 来创建)的过程，则创建的对象就是执行上下文。
- 如果一个方法在执行时没有明确的附属于一个对象，则它的执行上下文是全局对象(顶级对象)，但它不一定附属于全局对象。全局对象由当前环境来决定。在浏览器环境下，全局对象就是 window 对象。
- 定义在所有函数之外的全局变量和全局函数附属于全局对象，定义在函数内的局部变量和局部函数不附属于任何对象。
- 执行上下文与变量作用域是不同的。
- 一个函数赋值给另一个变量时，这个函数的内部所使用的变量的作用域不会改变，但它的执行上下文会变为这个变量所附属的对象(如果这个变量有附属对象的话)。
- Function 原型上的 call 和 apply 方法可以改变执行上下文，但是同样不会改变变量作用域。
- 记住一点：变量作用域是在定义时就确定的，它永远不会变；而执行上下文是在执行时才确定的，它随时可以变。
原型继承法
在 javascript 中，每一个类(函数)都有一个原型，该原型上的成员在该类实例化时，会传给该类的实例化对象。实例化的对象(parentClass )上没有原型，但是它可以作为另一个类(函数，subClass )的原型，当以该对象(parentClass )为原型的类(subClass )实例化时，该对象(parentClass )上的成员就会传给以它为原型的类(subClass )的实例化对象上。这就是原型继承的本质。原型继承也是 javascript 中许多原生对象所使用的继承方法。
<script type="text/javascript" language="javascript">
function parentClass() {
// private field
var x = "I'm a parentClass field!";
// private method
function method1() {
alert(x);
alert("I'm a parentClass method!");
}
// public field
this.x = "I'm a parentClass object field!";
// public method
this.method1 = function() {
alert(x);
alert(this.x);
method1();
}
}
parentClass.prototype.method = function () {
alert("I'm a parentClass prototype method!");
}
parentClass.staticMethod = function () {
alert("I'm a parentClass static method!");
}
function subClass() {
// private field
var x = "I'm a subClass field!";
// private method
function method2() {
alert(x);
alert("I'm a subClass method!");
}
// public field
this.x = "I'm a subClass object field!";
// public method
this.method2 = function() {
alert(x);
alert(this.x);
method2();
}
this.method3 = function() {
method1();
}
}
/**
* inherit
* subClass 没有原型，将 parentClass 的实例作为 subClass 的原型。在实例化 subClass 时，
× parentClass 对象上的成员会传递給 subClass
*/
subClass.prototype = new parentClass();
subClass.prototype.constructor = subClass;
// test
var o = new subClass();
alert(o instanceof parentClass); // true
alert(o instanceof subClass); // true
alert(o.constructor); // function subClass() {...}
/**
* 调用父类的 method1 方法
* 子类继承来的公有实例方法中，如果调用了私有实例字段或者私有实例方法，则所调用的这些私有实例成员
* 是属于父类的
* alert(x); -> I'm a parentClass field!
* alert(this.x); -> I'm a subClass object field!
* method1();(调用父类的方法)
* alert(x); -> I'm a parentClass field!
* alert("I'm a parentClass method!"); -> I'm a parentClass method!
*/
o.method1();
/**
* 子类有 method2 方法，因此这里调用的是 subClass 的 method2 方法
* alert(x); -> I'm a subClass field!
* alert(this.x); -> I'm a subClass object field!
* nethod2();(调用子类的方法)
* alert(x); -> I'm a subClass field!
* alert("I'm a subClass method!"); -> I'm a subClass method!
*/
o.method2();
/**
* parentClass 实例作为 subClass 的原型，method2 传递給了 subClass 的实例上
* alert("I'm a parentClass prototype method!"); -> I'm a parentClass prototype method!
*/
o.method();
/**
* subClass 实例有 method3 方法，但在方法体调用 method1 方法，可 method1 方法是 parentClass
* 的私有方法，不允许这种调用！
* Error!
*/
o.method3();
/**
* 静态成员是不会被继承的
* Error!
*/
subClass.staticMethod();
</script>
通过上面的代码分析，我们可是得出如下结论：
- 利用原型继承的关键有两步操作
- 创建一个父类的实例化对象，然后将该对象赋给子类的 prototype 属性。这样，父类中的所有公有实例成员都会被子类继承。并且用 instanceof 运算符判断时，子类的实例化对象既属于子类，也属于父类。[color]
- [color=#345286]将子类本身赋值给它的 prototype 的 constructor 属性。(注意：这里赋值的时候是没有 () 的！)。这一步是为了保证在查看子类的实例化对象的 constructor 属性时，看到的是子类的定义，而不是其父类的定义。
- 子类继承来的公有实例方法中，如果调用了私有实例字段或者私有实例方法，则所调用的这些私有实例成员是属于父类的。
- 子类中定义的实例方法，如果调用了私有实例字段或者私有实例方法，则所调用的这些私有实例成员是属于子类的。
- 定义在父类原型上的方法，会被子类继承。
- 子类中定义的实例方法是不能访问父类中定义的私有实例成员的。
- 静态成员是不会被继承的。
调用继承法
调用继承的本质是，在子类的构造器中，让父类的构造器方法在子类的执行上下文上执行，父类构造器方法上所有通过 this 方式操作的内容实际上都都是操作的子类的实例化对象上的内容。因此，这种做法仅仅为了减少重复代码的编写。
<script type="text/javascript" language="javascript">
function parentClass() {
// private field
var x = "I'm a parentClass field!";
// private method
function method1() {
alert(x);
alert("I'm a parentClass method!");
}
// public field
this.x = "I'm a parentClass object field!";
// public method
this.method1 = function() {
alert(x);
alert(this.x);
method1();
}
}
parentClass.prototype.method = function () {
alert("I'm a parentClass prototype method!");
}
parentClass.staticMethod = function () {
alert("I'm a parentClass static method!");
}
function subClass() {
// inherit
parentClass.call(this);
// private field
var x = "I'm a subClass field!";
// private method
function method2() {
alert(x);
alert("I'm a subClass method!");
}
// public field
this.x = "I'm a subClass object field!";
// public method
this.method2 = function() {
alert(x);
alert(this.x);
method2();
}
this.method3 = function() {
method1();
}
}
// test
var o = new subClass();
alert(o instanceof parentClass); // false
alert(o instanceof subClass); // true
alert(o.constructor); // function subClass() {...}
/**
* 由于有 parentClass.call(this); 因此，会在以 subClass 为执行上下文执行 method1 方法。
* call 只改变执行上下文，不改变变量的作用域。
* alert(x); -> I'm a parentClass field!
* alert(this.x); -> I'm a subClass object field!
* method1();(调用 parentClass 的方法)
* alert(x); -> I'm a parentClass field!
* alert("I'm a parentClass method!"); -> I'm a parentClass method!
*/
o.method1();
/**
* 调用 subClass 的方法。
* alert(x); -> I'm a subClass field!
* alert(this.x); -> I'm a subClass object field!
* method2();(调用 subClass 的方法)
* alert(x); -> I'm a subClass field!
* alert("I'm a subClass method!"); -> I'm a subClass method!
*/
o.method2();
/**
* 定义在父类原型上的方法，不会被子类继承。
* Error!
*/
o.method();
/**
* 子类中定义的实例方法不能访问父类中定义的私有实例成员的。
* Error!
*/
o.method3();
/**
* 静态成员不会被继承的。
* Error!
*/
subClass.staticMethod();
</script>
通过上面的代码分析，我们可是得出如下结论：
- 利用调用继承的关键只有一步操作：在子类定义时，通过父类的 call 方法，将子类的 this 指针传入。使父类方法在子类上下文中执行。这样，父类中的所有在父类内部通过 this 方式定义的公有实例成员都会被子类继承。用 instanceof 运算符判断时，子类的实例化对象只属于子类，不属于父类。查看子类的实例化对象的 constructor 属性时，看到的是子类的定义，不是其父类的定义。
- 定义在父类原型上的方法，不会被子类继承。
- 子类中定义的实例方法不能访问父类中定义的私有实例成员的。
- 静态成员同样不会被继承的。
- 通过调用继承法，可以实现多继承。也就是说，一个子类可以从多个父类中继承通过 this 方式定义在父类内部的所有公有实例成员。
多态(重载和覆盖)
先来说明一下重载和覆盖的区别。重载的英文是 overload，覆盖的英文是 override。发现网上大多数人把 override 当成了重载，这个是不对的。重载和覆盖是有区别的。
重载的意思是，同一个名字的函数（注意这里包括函数）或方法可以有多个实现，他们依靠参数的类型和（或）参数的个数来区分识别。
而覆盖的意思是，子类中可以定义与父类中同名，并且参数类型和个数也相同的方法，这些方法的定义后，在子类的实例化对象中，父类中继承的这些同名方法将被隐藏。
// 重载
/**
× javascript 中函数的参数是没有类型的，并且参数个数也是任意的，例如，尽管你可以定义这样的函数：
* 你仍然可以在调用它是带入任意多个参数，当然，参数类型也是任意的。至于是否出错，那是这个函数中
* 所执行的内容来决定的，javascript 并不根据你指定的参数个数和参数类型来判断你调用的是哪个函数。
×/
function add(a, b) {
return a + b;
}
/**
* 因此，要定义重载方法，就不能像强类型语言中那样做了。但是你仍然可以实现重载。就是通过函数的
* arguments 属性。例如：
*/
function add() {
var sum = 0;
for (var i = 0; i < arguments.length; i++) {
sum += arguments[i];
}
return sum;
}
/**
* 这样你就实现了任意多个参数加法函数的重载了。
*
* 当然，你还可以在函数中通过 instanceof 或者 constructor 来判断每个参数的类型，来决定后面执行什么
* 操作，实现更为复杂的函数或方法重载。总之，javascript 的重载，是在函数中由用户自己通过操作
* arguments 这个属性来实现的。
*/
// 覆盖
// 这样，子类中定义的 method 就覆盖了从父类中继承来的 method 方法了。
function parentClass() {
this.method = function() {
alert("parentClass method");
}
}
function subClass() {
this.method = function() {
alert("subClass method");
}
}
subClass.prototype = new parentClass();
subClass.prototype.constructor = subClass;
var o = new subClass();
o.method();
/**
* 你可能会说，这样子覆盖是不错，但 java 中，覆盖的方法里面可以调用被覆盖的方法(父类的方法)，在这里
* 怎么实现呢？也很容易，而且比 java 中还要灵活，java 中限制，你只能在覆盖被覆盖方法的方法中才能使
* 用 super 来调用次被覆盖的方法。我们不但可以实现这点，而且还可以让子类中所有的方法中都可以调用父
* 类中被覆盖的方法。看下面的例子：
*/
function parentClass() {
this.method = function() {
alert("parentClass method");
}
}
function subClass() {
var method = this.method;
this.method = function() {
method.call(this);
alert("subClass method");
}
}
subClass.prototype = new parentClass();
subClass.prototype.constructor = subClass;
var o = new subClass();
o.method();
/**
* 你会发现，原来这么简单，只要在定义覆盖方法前，定义一个私有变量，然后把父类中定义的将要被覆盖的
* 方法赋给它，然后我们就可以在后面继续调用它了，而且这个是这个方法是私有的，对于子类的对象是不可
* 见的。这样跟其它高级语言实现的覆盖就一致了。
*
* 最后需要注意，我们在覆盖方法中调用这个方法时，需要用 call 方法来改变执行上下文为 this(虽然在这个
* 例子中没有必要)，如果直接调用这个方法，执行上下文就会变成全局对象了。
*/
1271
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
