JavaScript 面向对象程序设计

近期在网上看到一篇关于 "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() {};

 关于变量和函数的定义及其赋值，要注意以下几点：

1. 变量定义和函数定义是在整个脚本执行之前完成的，而变量赋值是在执行阶段完成的，若赋值语句(给变量赋值)出现在要执行脚本(需要用到要被赋值的变量)之后，此值仍然是 undefined，因为脚本的执行是自上而下的。
2. 变量定义的作用仅仅是给所声明的变量指明它的作用域，变量定义并不给变量初始值，任何没有定义的而直接使用的变量，或者定义但没有赋值的变量，他们的值都是 undefined。
3. 函数定义除了声明函数所在的作用域外，同时还定义函数体结构。这个过程是递归的，也就是说，对函数体的定义包括了对函数体内的变量定义和函数定义。
4. 变量定义和同名函数定义同时出现时，变量定义确实不对变量做什么，仅仅是声明它的作用域而已，它不会覆盖函数定义。
5. 不管赋值语句写在函数定义之前还是函数定义之后，对一个跟函数同名的变量赋值总会覆盖函数定义。
6. 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>

 通过上面的代码分析，我们来总结下什么是执行上下文。我们需要要注意以下几个概念：

1. 如果当前正在执行的是一个方法，则执行上下文就是该方法所附属的对象，如果当前正在执行的是一个创建对象(就是通过 new 来创建)的过程，则创建的对象就是执行上下文。
2. 如果一个方法在执行时没有明确的附属于一个对象，则它的执行上下文是全局对象(顶级对象)，但它不一定附属于全局对象。全局对象由当前环境来决定。在浏览器环境下，全局对象就是 window 对象。
3. 定义在所有函数之外的全局变量和全局函数附属于全局对象，定义在函数内的局部变量和局部函数不附属于任何对象。
4. 执行上下文与变量作用域是不同的。
5. 一个函数赋值给另一个变量时，这个函数的内部所使用的变量的作用域不会改变，但它的执行上下文会变为这个变量所附属的对象(如果这个变量有附属对象的话)。
6. Function 原型上的 call 和 apply 方法可以改变执行上下文，但是同样不会改变变量作用域。
7. 记住一点：变量作用域是在定义时就确定的，它永远不会变；而执行上下文是在执行时才确定的，它随时可以变。

原型继承法
        在 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>

 通过上面的代码分析，我们可是得出如下结论：

1. 利用原型继承的关键有两步操作
   • 创建一个父类的实例化对象，然后将该对象赋给子类的 prototype 属性。这样，父类中的所有公有实例成员都会被子类继承。并且用 instanceof 运算符判断时，子类的实例化对象既属于子类，也属于父类。[color]
   • [color=#345286]将子类本身赋值给它的 prototype 的 constructor 属性。(注意：这里赋值的时候是没有 () 的！)。这一步是为了保证在查看子类的实例化对象的 constructor 属性时，看到的是子类的定义，而不是其父类的定义。
2. 子类继承来的公有实例方法中，如果调用了私有实例字段或者私有实例方法，则所调用的这些私有实例成员是属于父类的。
3. 子类中定义的实例方法，如果调用了私有实例字段或者私有实例方法，则所调用的这些私有实例成员是属于子类的。
4. 定义在父类原型上的方法，会被子类继承。
5. 子类中定义的实例方法是不能访问父类中定义的私有实例成员的。
6. 静态成员是不会被继承的。

调用继承法
        调用继承的本质是，在子类的构造器中，让父类的构造器方法在子类的执行上下文上执行，父类构造器方法上所有通过 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>

 通过上面的代码分析，我们可是得出如下结论：

1. 利用调用继承的关键只有一步操作：在子类定义时，通过父类的 call 方法，将子类的 this 指针传入。使父类方法在子类上下文中执行。这样，父类中的所有在父类内部通过 this 方式定义的公有实例成员都会被子类继承。用 instanceof 运算符判断时，子类的实例化对象只属于子类，不属于父类。查看子类的实例化对象的 constructor 属性时，看到的是子类的定义，不是其父类的定义。
2. 定义在父类原型上的方法，不会被子类继承。
3. 子类中定义的实例方法不能访问父类中定义的私有实例成员的。
4. 静态成员同样不会被继承的。
5. 通过调用继承法，可以实现多继承。也就是说，一个子类可以从多个父类中继承通过 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(虽然在这个
 * 例子中没有必要)，如果直接调用这个方法，执行上下文就会变成全局对象了。
 */