深入理解JavaScript原型链与五种继承模式

JavaScript原型继承与原型链原理详解

本文深入解析JavaScript中的原型继承机制与原型链原理，通过具体示例代码进行详细说明，旨在为读者的学习与工作提供具有实际价值的参考。

在探讨原型继承之前，建议回顾创建自定义类型的方法。推荐采用构造函数与原型模式相结合的策略：利用构造函数定义实例特有的属性，同时通过原型对象定义公共的方法和属性。

这种模式的优势在于，每个实例都拥有独立属性的副本，同时又能共享同一套方法，从而极大程度地节省了内存空间。此外，该方式支持向构造函数传递参数，使用十分便捷。

特殊构造函数模式：寄生与稳妥

接下来介绍两种特殊的构造函数模式：

1. 寄生构造函数

从表现形式来看，该模式与工厂模式并无二致：


function Person(name, age, job) {
  var o = new Object();
  o.name = name;
  o.age = age;
  o.job = job;
  o.sayName = function() {
    alert(this.name);
  };
  return o;
}
var friend = new Person("Nicholas", 29, "Software Engineer");
friend.sayName(); //"Nicholas"

两者均在内部创建一个Object对象实例，赋予其属性和方法后返回。这种构造模式的主要优势在于，当需要为原生引用类型（如Array）的实例添加新方法或属性时，由于不建议直接修改原生构造函数，此时可利用寄生构造函数模式。


function SpecialArray() {
  //创建数组
  var values = new Array();
  //添加值
  values.push.apply(values, arguments);
  //添加方法
  values.toPipedString = function() {
    return this.join("|");
  };
  //返回数组
  return values;
}
var colors = new SpecialArray("red", "blue", "green");
alert(colors.toPipedString()); //"red|blue|green"

具体做法是在内部创建一个Array实例，添加自定义方法，最后返回该实例。这样既未修改原生Array构造函数，又成功实现了自定义方法和属性的添加。

然而，寄生构造函数存在一个显著缺点：返回的实例与构造函数或构造函数原型属性之间缺乏关联，其效果等同于在构造函数外部创建实例。此外，无法通过instanceof操作符确定对象类型，因此若有更优方案，不推荐使用此方法。

2. 稳妥构造函数

稳妥构造函数与寄生构造函数类似，但不使用new关键字和this（某些受限环境下禁止使用）。前述函数可改写为如下形式：


function Person(name, age, job) {
  //创建要返回的对象
  var o = new Object();

  //可以在这里定义私有变量和函数
  //添加方法
  o.sayName = function() {
    alert(name);
  };
  //返回对象
  return o;
}

原型链与五种核心继承模式解析

上述内容讨论完毕后，现在重点探讨原型继承与原型链。继承的基本思想是利用原型让一个引用类型继承另一个引用类型的方法和属性。每个构造函数都拥有一个原型对象，该原型对象包含一个指向构造函数的指针，而实例则包含一个指向原型对象的内部指针。所有引用类型默认继承Object，这一继承过程通过原型链实现。需牢记，所有函数的默认原型均为Object的实例，因此默认原型包含一个指向Object.prototype的内部指针。

借用构造函数（即在子类型构造函数的内部调用超类型构造函数）

若仅使用借用构造函数，则无法避免构造函数模式存在的问题——方法均在构造函数中定义，导致函数复用无从谈起。此外，超类型原型中定义的方法对子类型不可见，致使所有类型只能依赖构造函数模式。鉴于这些问题，借用构造函数技术很少单独使用。

组合继承（思路是使用原型链实现对原型属性和方法的继承，而通过借用构造函数来实现对实例属性的继承）


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.constructor = SubType;
SubType.prototype.sayAge = function() {
  alert(this.age);
};
var instance1 = new SubType("Nicholas", 29);
instance1.colors.push("black");
alert(instance1.colors); //"red,blue,green,black"
instance1.sayName(); //"Nicholas";
instance1.sayAge(); //29
var instance2 = new SubType("Greg", 27);
alert(instance2.colors); //"red,blue,green"
instance2.sayName(); //"Greg";
instance2.sayAge(); //27

SuperType构造函数定义了两个属性：name和colors。SuperType的原型定义了一个方法sayName()。SubType构造函数在调用SuperType构造函数时传入了name参数，随后定义了自己的属性age。接着，将SuperType的实例赋值给SubType的原型，并在新原型上定义方法sayAge()。如此，两个不同的SubType实例既能分别拥有自己的属性（包括colors属性），又能使用相同的方法。

原型式继承（借助原型可以基于已有的对象创建新对象，同时不必因此创建自定义类型）


var person = {
  name: "Nicholas",
  friends: ["Shelby", "Court", "Van"]
};
var anotherPerson = object(person);
anotherPerson.name = "Greg";
anotherPerson.friends.push("Rob");
var yetAnotherPerson = object(person);
yetAnotherPerson.name = "Linda";
yetAnotherPerson.friends.push("Barbie");
alert(person.friends); //"Shelby,Court,Van,Rob,Barbie"

当无需大规模创建构造函数，仅需让一个对象与另一个对象保持相似时，原型式继承完全胜任。需注意，包含引用类型值的属性始终会共享相应值，这与使用原型模式的情况一致。

寄生式继承（思路与寄生构造函数和工厂模式类似，即创建一个仅用于封装继承过程的函数，该函数在内部以某种方式增强对象，最后像真正执行所有工作一样返回对象）


function createAnother(original) {
  var clone = object(original); //通过调用函数创建一个新对象
  clone.sayHi = function() { //以某种方式来增强这个对象
    alert("hi");
  };
  return clone; //返回这个对象
}

寄生组合式继承

通过借用构造函数继承属性，通过原型链的混成形式继承方法。其基本思路是：无需为了指定子类型的原型而调用超类型的构造函数，所需仅为超类型原型的一个副本。本质上，这是使用寄生式继承来继承超类型的原型，再将结果指定给子类型的原型。

以上就是本文的全部内容，希望对读者的学习有所帮助，也欢迎大家继续支持本站。

JavaScript原型继承与原型链原理详解

JavaScript原型继承与原型链原理详解

特殊构造函数模式：寄生与稳妥

原型链与五种核心继承模式解析

实用工具推荐