`
zachary.guo
  • 浏览: 487178 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

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(虽然在这个
 * 例子中没有必要),如果直接调用这个方法,执行上下文就会变成全局对象了。
 */
分享到:
评论

相关推荐

    JavaScript面向对象程序设计

    在JavaScript面向对象编程中,随着Web2.0和Ajax技术的普及,JavaScript的角色从简单的表单验证扩展到了复杂的数据交互和页面动态更新。采用面向对象的编程风格可以使代码结构更加清晰,便于管理和维护。例如,...

    Javascript面向对象程序设计培训讲义

    由于JS不是纯的面向对象的语言,所以对象的继承是以原型函数的形式继承的,很多人刚开始接触的时候不太理解,但是JS这种以原型函数的形式实现面向对象技术,不仅是可行的,而且还为面向对象技术提供了动态继承的功能...

    JavaScript面向对象程序设计创建对象的方法分析

    本文实例讲述了JavaScript面向对象程序设计创建对象的方法。分享给大家供大家参考,具体如下: 面向对象的语言具有一个共同的标志,那就是具有“类”的概念,但是在javascript中没有类的概念,在js中将对象定义为...

    javascript 面向对象程序设计博客文章

    JavaScript是一种广泛应用于Web开发的动态编程语言,尤其以其强大的...以上就是JavaScript中面向对象程序设计的一些关键知识点,通过理解并熟练运用这些概念,开发者可以构建出更加健壮和易于维护的JavaScript应用。

    面向对象JavaScript开发

    JavaScript,作为一种广泛应用...JavaScript 面向对象程序设计——继承与多态.pdf 和 JavaScript 面向对象程序设计——封装.pdf 这两个文档可能深入探讨了这些主题,帮助读者深入理解并掌握JavaScript的面向对象开发。

    JavaScript面向对象程序设计中对象的定义和继承详解

    在JavaScript的面向对象编程中,由于它本身并不支持传统的类概念,而是基于原型(prototype)的对象模型,因此理解...通过构造函数和原型的巧妙组合,以及适当的继承策略,可以构建出灵活且可维护的面向对象应用程序。

    《javascript设计模式》学习笔记五:Javascript面向对象程序设计工厂模式实例分析

    总结来说,工厂模式是JavaScript面向对象编程中一种重要的设计模式,它提高了代码的灵活性和可扩展性。通过将对象的创建过程封装起来,使得代码在面对多种相似对象时能保持一致性和低耦合性。无论是简单工厂模式还是...

    习题解答-Java面向对象程序设计-邢国波-清华大学出版社.pdf

    Java面向对象程序设计是计算机科学中的一个重要主题,尤其在Java编程中。邢国波的《Java面向对象程序设计》一书旨在帮助读者理解和掌握Java语言的核心特性,特别是面向对象编程的概念。以下是根据提供的内容和标签...

    JavaScript面向对象程序设计教程

    JavaScript面向对象程序设计是一种编程范式,它以对象为核心,利用对象的属性和方法来构建应用程序。在JavaScript中,对象是一组无序的属性集合,每个属性都有一个键(key)和值(value),其中值可以是基本值、对象...

    《javascript设计模式》学习笔记一:Javascript面向对象程序设计对象成员的定义分析

    本文实例讲述了Javascript面向对象程序设计对象成员的定义。分享给大家供大家参考,具体如下: 序: 刚接触javascript的时候,觉得这语言有点儿摸不着门道,感觉这玩意儿太难学了,没什么规范,没什么像样的手册,...

    javascript面向对象程序设计高级特性经典教程(值得收藏)

    JavaScript面向对象程序设计是一种编程范式,它以对象为核心,对象是属性和方法的集合体。在JavaScript中,对象可以由字面量创建,也可以通过构造函数创建,或者使用Object.create()等方法创建。面向对象编程有很多...

    javascript面向对象程序设计实践常用知识点总结

    本文实例讲述了javascript面向对象程序设计实践常用知识点。分享给大家供大家参考,具体如下: 实践一:原型中的引用类型的属性是共享的 var Person = function(){}; Person.prototype = { info:{ name:Tom } } ...

    《javascript设计模式》学习笔记二:Javascript面向对象程序设计继承用法分析

    本文实例讲述了Javascript面向对象程序设计继承用法。分享给大家供大家参考,具体如下: 1.关于继承: 百度百科对继承的解释是:继承是指一个对象直接使用另一对象的属性和方法。 (话说百科对于计算机概念的继承的...

Global site tag (gtag.js) - Google Analytics