JavaScript高级程序设计学习笔记--面向对象的程序设计（二）-- 继承

时间 2020-04-15

标签 javascript 高级程序设计学习笔记面向对象继承栏目 JavaScript 繁體版

原文原文链接

相关文章: 面向对象的程序设计（一） — 建立对象 http://www.cnblogs.com/blackwood/archive/2013/04/24/3039523.htmlhtml

继承

继承是OO语言中的一个最为人津津乐道的概念。许多OO语言都支持两种继承方式：接口继承和实现继承。接口继承只继承方法签名，而实现继承则继承实际的方法。如其所述，因为函数没有签名，在ECMAScript中没法实现接口继承。 ECMAScript只支持实现继承，并且其实现继承主要是依靠原型链来实现的。编程

原型链

ECMAScript中描述了原型链的概念，并将原型链做为实现继承的主要方法。其基本思想是利用原型让一个引用类型继承另外一个引用类型的属性和方法。简单回顾一下构造函数、原型和实例的关系：每一个构造函数都有一个原型对象，原型对象都包含一个指向构造函数的指针，而实例都包含一个指向原型对象的内部指针。那么，假如咱们让原型对象等于另外一个类型的实例，结果会如何呢？显然，此时的原型对象将包含一个指向另外一个原型的指针，相应的，另外一个原型中也包含着一个指向另外一个构造函数的指针。假如另外一个原型又是另外一个类型的实例，那么上述关系依然成立，如此层层递进，就 构成了实例与原型的链条。这就是所谓原型链的基本概念 。
实现原型链有一种基本模式，其代码大体以下：数组

function SuperType() {
      this.flag = true;
 }

 SuperType.prototype.getSuperFlag = function() {
      return this.flag;
 };

 function SubType() {
      this.subFlag = false;
 }

 //继承了SuperType
 SubType.prototype = new SuperType();
 SubType.prototype.getSubFlag = function() {
      return this.subFlag;
 };

 var st = new SubType();
 alert(st.getSuperFlag());  //true

 alert(st instanceof Object);  //true
 alert(st instanceof SuperType);  //true
 alert(st instanceof SubType);  //true

 alert(Object.prototype.isPrototypeOf(st)); //true
 alert(SuperType.prototype.isPrototypeOf(st)); //true
 alert(SubType.prototype.isPrototypeOf(st)); //true

以上代码定义了两个类型：SuperType和SubType。每一个类型分别有一个属性和一个方法。它们的主要区别是SbuType继承了SuperType，而继承是经过建立SuperType的实例，并将该实例赋给SubType.prototype实现的。实现的本质是重写原型对象，代之以一个新类型的实例。换句话说，原来存在于SuperType的实例中的全部属性和方法，如今也存在于SubType.prototype中了。在确立了继承关系以后，咱们给SubType.prototype添加了一个方法，这样就在继承了SuperType的属性和方法的基础上又添加了一个新方法。markdown

在上面的代码中，咱们没有使用SubType默认提供的原型，而是给它换了一个新原型；这个原型就是SuperType的实例。因而新原型不只具备做为一个SuperType实例所拥有的所有属性和方法，而其内部还有一个指针，指向了SuperType的原型。最终结果就是这样的：st指向SubType.prototype，SubType.prototype又指向SuperType.prototype。 getSuperFlag()方法仍然还在SuperType.prototype中，但flag位于SubType.prototype中，这是由于flag是一个实例的属性，而getSuperFlag()则是一个原型方法。既然SubType.prototype如今是SuperType的实例，那么flag固然就位于该实例中了。此外要注意的是，st.constructor如今指向的是SuperType，这是由于原来的SubType.prototype.constructor被重写了（SuperType实例的constructor—SuperType）。app

经过实现原型链，本质上扩展了前面（建立对象那里）介绍的原型搜索机制。当以读取模式访问一个实例属性时，首先会在实例中搜索该属性。若是没找到该属性，则会继续搜索实例的原型。在经过原型链实现继承的状况下，搜索过程就得以沿着原型链继续向上。就拿上面的例子来讲，调用st.getSuperFlag()会经历三个步骤：1）搜索实例；2）搜索SubType.prototype; 3）搜索SuperType.prototype，最后一步才会找到该方法。在找不到属性或方法的状况下，搜索过程老是要一环一环地前行到原型链末端才会停下来。函数

一、别忘记默认的原型

事实上，前面例子中展现的原型链还少一环。咱们知道，全部引用类型默认都继承了Object，而这个继承也是经过原型链实现的。你们要记住，全部函数的默认原型都是Object的实例。所以默认原型都会包含一个内部指针，指向Object.prototype。这也正是全部自定义类型都会继承toString()、valueOf()等默认方法的根本缘由。因此，咱们说上面的例子展现的原型链中还应包含另一个继承层次。 SuperType.prototype里会有一个指针指向Object.prototype。测试

一句话SubType继承了SuperType，而SuperType继承了Object。当调用st.toString()时，实际上用的是保存在Object.prototype中的那个方法。this

二、肯定原型和实例的关系

能够经过两种方法来肯定原型和实例之间的关系。第一种方法是使用instanceof操做符，只要用这个操做符来测试实例与原型链中出现过的构造函数，结果就会返回ture。以下：spa

alert(st instanceof Object);   //true
 alert(st instanceof SuperType);   //true
 alert(st instanceof SubType);  //true

因为原型链的关系，咱们能够说st是Object、SuperType、SubType中的任何一个类型的实例。所以，测试这三个构造函数的结果都返回了true。prototype

第二种方法是使用isPrototypeOf()方法。一样，只要是原型链中出现过的原型，均可以说是该原型链所派生的实例的原型，所以isPrototypeOf()方法也会返回true，以下：

alert(Object.prototype.isPrototypeOf(st));    //true
 alert(SuperType.prototype.isPrototypeOf(st));   //true
 alert(SubType.prototype.isPrototypeOf(st));   //true

三、谨慎地定义方法

子类型有时须要重写超类型中的某个方法，或者须要添加超类型中不存在的某个方法。但无论怎样，给原型添加方法的代码必定要放在替换原型的语句以后。例：

function SuperType() {
      this.flag = true;
 }

 SuperType.prototype.getSuperFlag = function() {
      return this.flag;
 };

 function SubType() {
      this.subFlag = false;
 }

 //继承SuperType
 SubType.prototype = new SuperType();

 //添加新方法
 SubType.prototype.getSubFlag = function() {
      return this.subFlag;
 };

 //重写超类型中的方法
 SubType.prototype.getSuperFlag = function() {
      return false;
 };

 var st = new SubType();
 alert(st.getSuperFlag()); //false

在以上代码中，SubType.prototype定义了两个方法。第一个方法getSubFlag()方法被添加到了SubType中。第二个方法getSuperFlag()是原型链中已经存在的一个方法，但重写这个方法将会屏蔽原来的那个方法。换句话说，当经过SubType实例调用getSuperFlag()时，调用的就是这个从新定义的方法；但经过SuperType的实例调用getSuperFlag()时，还会继续调用原来的那个方法。格外要注意的是，必须在SuperType的实例替换SubType的原型以后，再定义这个方法。

在经过原型链实现继承时，不能使用对象字面量建立原型。由于这样作就会重写原型。以下：

function SuperType() {
      this.flag = true;
 }

 SuperType.prototype.getSuperFlag = function() {
      alert(this.flag);
 };

 function SubType() {
      this.subFlag = false;
 }

 //继承SuperType
 SubType.prototype = new SuperType();

 //使用对象字面量添加新方法，会致使上一行代码无效
 SubType.prototype = {
      getSubFlag: function(){
           return this.subFlag;
      }
 };

 var st = new SubType();
 alert(st.getSuperFlag());  //error!

以上代码展现了把SuperType的实例赋给原型以后，紧接着又将原型替换成一个对象字面量而致使的问题。因为如今的原型包含的是一个Object实例，而非SuperType实例，所以咱们设想中的原型链已经被切断—SubType和SuperType之间已经没有关系了。

四、原型链的问题

原型链虽然很强大，能够用它来实现继承，但它也存在一些问题。其中，最主要的问题来自包含引用类型值的原型。前面介绍过（建立对象部分），包含引用类型值的原型属性会被全部实例共享；而这也正是为何要在构造函数中，而不是原型中定义属性的缘由。在经过原型来实现继承时，原型实际上会变成另外一个类型的实例。因而原先的实例属性也就瓜熟蒂落的变成了如今的原型属性。例：

function SuperType() {
      this.colors = ["red", "blue", "green"];
 }

 function SubType() {}

 SubType.prototype = new SuperType();

 var st1 = new SubType();
 st1.colors.push("black");
 alert(st1.colors);   //'red,blue,green,black'

 var st2 = new SubType();
 alert(st2.colors);  //'red,blue,green,balck'

这个例子中的SuperType构造函数定义了一个colors属性，该属性包含一个数组（引用类型值）。SuperType的每一个实例都会有各自包含本身数组的colors属性。当SubType经过原型链继承了SuperType以后，SubType.prototype就变成了SuperType的一个实例，所以它也拥有了一个它本身的colors属性—就跟专门建立了一个SubType.prototype.colors属性同样。但结果是，SubType的全部实例都会共享这一个colors属性。而咱们对st1.colors的修改可以经过st2.colors反映出来，就已经充分证明了这一点。

原型链的第二问题是：在建立子类型的实例时，不能向超类型的构造函数中传递参数。实际上，应该说是没有办法在不影响全部对象实例的状况下，给超类型的构造函数传递参数。有鉴于此，再加上前面刚刚讨论过的因为原型中包含引用类型值所带来的问题，实践中不多会单独使用原型链。

借用构造函数

在解决原型中包含引用类型值所带来的问题中，开发人员开始使用一种叫作借用构造函数的技术（有时候也叫作伪造对象或经典继承）。这种技术的基本思想至关简单，即在子类型构造函数的内部调用超类型构造函数。别忘了，函数只不过是在特定环境中执行代码的对象，所以经过使用applay()和call()方法也能够在（未来）新建立的对象上执行构造函数，以下所示：

function SuperType() {
      this.colors = ['red', 'blue', 'green'];
 }

 function SubType() {
      SuperType.call(this);  //调用SuperType()构造函数，并将当前this传入
 }

 var st1 = new SubType();
 st1.colors.push('black');  
 alert(st1.colors);  //'red,blue,green,black'

 var st2 = new SubType();
 alert(st2.colors);  //'red,blue,green'

代码中SubType()构造函数中“借调”了超类型的构造函数。经过使用call()方法，咱们其实是在（将来将要）新建立的SubType实例的环境下调用了SuperType构造函数。这样一来，就会在新SubType对象上执行SuperType()函数中定义的全部对象初始化代码。结果，，SubType的而每一个实例都会具备本身的colors属性副本了。

一、传递参数

相对于原型链而言，借用构造函数有一个很大的优点，便可以在子类型构造函数中向超类型构造函数传递参数。以下：

function SuperType(name) {
      this.name = name;
 }

 function SubType() {
      //继承了SuperType，同时传递了参数
      SuperType.call(this,'nico');
      this.age = 22;
 }

 var st = new SubType();
 alert(st.name);   //'nico'
 alert(st.age);   //22

为了确保SuperType构造函数不会重写子类型的属性，能够在调用超类型构造函数后，再添加应该在子类型中定义的属性。

二、借用构造函数的问题

没法避免的构造函数模式存在的问题—方法都在函数中定义，所以函数复用就无从谈起了。并且，在超类型的原型中定义的方法，对子类型而言也是不可见的。结果全部类型都只能使用构造函数模式。考虑到这些问题，借用构造函数技术也是不多单独使用的。

组合继承

组合继承，有时候也叫作伪经典继承，指的是将原型链和借用构造函数的技术组合到一块，从而发挥两者之长的一种继承模式。其背后的思路是使用原型链实现对原型属性和方法的继承，而经过借用构造函数来实现对实例属性的继承。这样，既经过在原型上定义方法实现了函数复用，又能保证每一个实例都有它本身的属性。例：

function SuperType(name) {
      this.name = name;
      this.colors = ['red', 'blue', 'green'];
 }

 SuperType.prototype.sayName = function() {
      alert(this.name);
 };

 function SubType(name,age) {
      SuperType.call(this, name);
      this.age = age;
 }

 SubType.prototype = new SuperType();

 SubType.prototype.sayAge = function() {
      alert(this.age);
 };

 var st1 = new SubType('nico',22);
 st1.colors.push('black');
 alert(st1.colors);   //'red,blue,green,black'

 st1.sayName();  //'nico'
 st1.sayAge();   //'22'

 var st2 = new SubType('nana',23);
 alert(st2.colors);  //'red,blue,green'
 st2.sayName();   //'nana'
 st2.sayAge();   //'23'

在这个例子中SuperType构造函数定义了两个属性：name和colors。SuperType的原型定义了一个方法sayName()。SubType构造函数在调用SuperType构造函数时传入了name参数，紧接着又定义了本身的属性age。而后，将SuperType的实例赋给SubType原型，而后又在该新原型上定义了方法sayAge()。这样一来，就可让两个不一样的SubType实例既分别用拥有本身的属性—包括colors属性，又可使用相同的方法了。
组合继承避免了原型链和借用构造函数的缺陷，融合了它们的优势，成为JavaScript中最经常使用的继承模式。并且，instanceof和isPrototypeOf()也能识别基于组合继承建立的对象。

原型式继承

道格拉斯·克罗克福德在2006年写了一篇文章，题为Prototypal Inheritance in JavaScript(JavaScript中的原型继承)

这种方法并无使用严格意义上的构造函数。它借助原型能够基于已有对象建立新对象，同时还没必要所以建立自定义类型。为了达到这个目的，给出以下函数：

function object(o) {
      function F () {}
      F.prototype = o;
      return new F();
 }

在object()函数内部，先建立了一个临时性的构造函数，而后将传入的对象做为这个构造函数的原型，最后返回了这个临时类型的一个新实例。从本质上讲，object()对传入其中的对象执行了一次浅复制。来看下面的例子：

function object(o) {
      function F () {}
      F.prototype = o;
      return new F();
 }

 var person = {
      name: "nico",
      friends: ['nana','john']
 };

 var person1 = object(person);
 person1.name = 'Greg';
 person.friends.push('rob');

 var person2 = object(person);
 person2.name = 'Linda';
 person2.friends.push('kobe');

 alert(person.friends);  //'nana,john,rob,kobe'

(在这以前，来小小复习一下关于参数传递的问题。 ECMAScript中全部的函数的参数都是按值传递的，在向参数传递引用类型的值时，会把这个值在内存中的地址复制给一个局部变量，所以这个局部变量的变化会反映在函数的外部。

虽然能够经过对象实例访问保存在原型中的值，却不能经过实例重写原型中的值。若是在实例中添加了一个与实例原型同名的属性，该属性将屏蔽原型中的那个属性，当访问该属性的时候，先会在实例中搜索该属性是否存在，它确实存在因此返回它的值，再也不搜索原型了。)

这种原型式继承，要求必须有一个对象能够做为另外一个对象的基础。若是有这么一个对象的话，能够把它传递给object()函数，而后再根据具体需求对获得的对象加以修改便可。在这个例子中，能够做为另外一个对象基础的是person对象，因而咱们把它传入到object()函数中，而后改函数会返回一个新对象。这个新对象将person做为原型，因此它的原型中就包含一个基本类型值属性和一个引用类型属性。这意味着preson.friends不只属于person全部，并且也会被person1和person2共享（指向同一个地址）。实际上，这就至关于又建立了person对象的两个副本。

在没有必要兴师动众地建立构造函数，而只想让一个对象与另外一个对象保持相似的状况下，原型式继承是彻底能够胜任的。不过别忘了，包含引用类型值的属性始终都会共享相应的值，就像使用原型模式同样。

寄生式继承

一样是由克罗克福德推广的

寄生式继承是与原型式继承紧密相关的一种思路。寄生式继承的思路与寄生构造函数和工厂模式相似，即建立一个仅用于封装继承过程的函数，该函数在内部以某种方式来加强对象，最后再像真地是它作了全部工做同样返回对象。例：

function object(o) {
      function F () {}
      F.prototype = o;
      return new F();
 }

 function createAnother(original) {
      var clone = object(original);
      clone.sayHi = function(){
           alert("hi");
      };
     return clone;
 }

在这个例子中， createAnother()函数接收了一个参数，也就是将要做为新对象继承的对象。而后，把这个对象(original)传递给object()函数，将返回结果赋值给clone。再为clone对象添加一个新方法sayHi()，最后返回clone对象。能够像下面这样使用createAnother()函数：

var person = {
     name: "nico",
     friends: ['nana', 'john']
  };

  var anotherPerson = createAnother(person);
  anotherPerson.sayHi(); //'hi'

这个例子中，基于person建立了一个新对象—anotherPerson。新对象不只具备person全部的属性和方法，并且还有本身的sayHi()方法。

在主要考虑对象而不是自定义类型和构造函数的状况下，寄生式继承也是一种有用的模式。前面示范继承模式时使用的object() 函数不是必需的；任何能返回新对象的函数都是用于此模式。

使用寄生式继承来为对象添加函数，会因为不能作到函数复用而下降效率；这一点与构造函数模式相似。

寄生组合式继承

前面说过，组合继承是JavaScript最经常使用的继承模式；不过，它也有本身的不足。组合继承最大的问题是不管什么状况下，都会调用两次超类型构造函数：一次是在建立子类型原型的时候，另外一次是在子类型构造函数内部。没错，子类型最终会包含超类型对象的所有实例属性，但咱们不得不在调用子类型构造函数时重写这些属性。再来看一看下面组合继承的例子：

function SuperType(name) {
      this.name = name;
      this.colors = ["red", "blue", "green"];
 }

 SuperType.prototype.sayName = function() {
      alert(this.name);
 };

 function SubType(name, age) {
      SuperType.call(this, name);   //第二次调用SuperType()
      this.age = age;
 }

 SubType.prototype = new SuperType();   //第一次调用SuperType()

 SubType.prototype.sayAge = function() {
      alert(this.age);
 };

在第一次调用SuperType()构造函数的时候，SubType.prototype会获得两个属性name和colors，他们都是SuperType的实例属性，只不过如今位于SubType的原型中。当调用SubType构造函数时，又会调用一次SuperType()构造函数，这一次又在新对象上建立了实例属性name和colors。因而，这两个属性就屏蔽了原型中的两个同名属性。

有两组name和colors属性，一组在实例上，一组在SubType原型中。这就是调用两次SuperType构造函数的结果。好在咱们已经找到了解决这个问题的方法—寄生组合式继承。

所谓寄生组和式继承，即经过借用构造函数来继承属性，经过原型链的混成形式来继承方法。其背后的基本思路是：没必要为了指定子类型的原型而调用超类型的构造函数，咱们所须要的无非就是超类型原型的一个副本而已。本质上，就是使用寄生式继承来继承超类型的原型，而后再将结果指定给子类型的原型。寄生组和式继承的基本模式以下所示：

function inheritPrototype(subType, superType) {
      var prototype = object(superType.prototype);
      prototype.constructor = subType;
      subType.prototype = prototype;
 }

这个示例中的inheritPrototype()函数实现了寄生组合式继承的最简单形式。这个函数接收两个参数：子类型构造函数和超类型构造函数。在函数内部，第一步是建立超类型原型的一个副本。第二步是为建立的副本添加constructor属性，从而弥补因重写原型而失去的默认的constructor属性。最后一步，将新建立的对象（即副本）赋值给子类型的原型。这样，咱们就能够用调用inheritPrototype()函数的语句，去替换前面例子中位子类型原型赋值的语句了。例如：

function inheritPrototype(subType, superType) {
      var prototype = object(superType.prototype);
      prototype.constructor = subType;
      subType.prototype = prototype;
 }

 function object(o) {
      function F () {}
      F.prototype = o;
      return new F();
 }

 function SuperType(name) {
      this.name = name;
      this.colors = ["red", "blue", "green"];
 }

 SuperType.prototype.sayName = function() {
      alert(this.name);
 }

 function SubType(name, age) {
      SuperType.call(this, name);
      this.age = age;
 }

 //替换了组合继承模式中建立SuperType实例赋值给SubType.prototype
 inheritPrototype(SubType, SuperType);

 SubType.prototype.sayAge = function() {
      alert(this.age);
 };

这个例子的高效率提如今它只调用了一次SuperType构造函数，而且所以避免了在SubType.prototype上面建立没必要要的、多余的属性。于此同时，原型链还能保持不变；所以，还可以正常使用instanceof和isPrototypeof()。 开发人员广泛认为寄生组合式继承是引用类型最理想的继承范式。

小结

ECMAScript支持面向对象（OO）编程，但不使用类或接口。对象能够在代码执行过程当中建立和加强，所以具备动态性而非严格定义的实体。在没有类的状况下，能够采用下列模式建立对象。

工厂模式
构造函数模式
原型模式

JavaScript主要经过原型链实现继承。原型链的构建是经过讲一个类型的实例赋值给另外一个构造函数的原型实现的。这样，子类型就可以访问超类型的全部属性和方法。使用最多的继承模式是组合继承，这种模式使用原型链继承共享的属性和方法，而经过构造函数继承实例属性。

此外，还存在下列可供选择的继承模型。
原型式继承
寄生式继承
寄生组合式继承，集寄生式继承和组合继承的优势与一身，是实现基于类型继承最有效的方式。

“面向对象的程序设计”这一章是我看得最头痛的一章，一开始的时候被原型啊构造函数啊继承啊寄生啊什么的绕晕掉了，又是在纸上画图又是写各类例子好不容啃完了第一遍，隔了段时间又啃了第二遍，如今终于算是所有能理解了，心理顿时轻松好多。

相关文章: 面向对象的程序设计（一） — 建立对象 http://www.cnblogs.com/blackwood/archive/2013/04/24/3039523.html