JS语言理解02 构造函数的继承

发表于 更新于 分类于 阅读次数：

JavaScript中的继承。

如何继承

现在有一个”动物”对象的构造函数

1
2
3
function Animal() {
  this.spices = "动物"
}

还有一个”猫”对象的构造函数。

1
2
3
4
5
function Cat(name, age) {
  this.name = name;
  this.age = age;
}
var cat1 = new Cat("tom", 23);

此时，二者是没有关系的

1
2
console.log(cat1.spices) 
// undefined

怎样才能使”猫”继承”动物”呢？

1 构造函数绑定

第一种方法也是最简单的方法，使用call或apply方法，将父对象的构造函数绑定在子对象上，即在子对象构造函数中加一行：

1
2
3
4
5
6
7
8
9
10
11
12
13
function Animal() {
  this.spices = "动物"
}
Animal.prototype.say = "hello";

function Cat(name, age) {
  Animal.apply(this, arguments); // 加入构造函数绑定
  this.name = name;
  this.age = age;
}
var cat1 = new Cat("tom", 23);
console.log(cat1.spices); // 动物
console.log(cat1.say); // undefined

这种方法用call/apply把父对象的this指向改为子对象。

缺点：不能继承原型上的属性和方法

2 prototype模式

第二种使用prototype属性，即把子对象的prototype对象指向父对象的一个实例。（注意：当改了prototype对象的constructor时，记得改回来，否则将造成继承链紊乱，后面所有涉及改动子类的prototype的方法都要注意）

比如Cat的prototype对象，指向一个Animal的实例，那么所有”猫”的实例，就能继承Animal了。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
function Animal() {
  this.spices = "动物"
}

function Cat(name, age) {
  this.name = name;
  this.age = age;
}

Cat.prototype = new Animal();
Cat.prototype.constructor = Cat;

var cat1 = new Cat("tom", 24);
console.log(cat1.name + "今年年纪" + cat1.age + "岁，是一种" + cat1.spices);
// tom今年年纪24岁，是一种动物

通过Cat.prototype = new Animal()，我们将Cat的prototype对象指向一个Animal的实例,它相当于完全删除了prototype对象原先的值，然后赋予一个新值。

任何一个prototype对象都有一个constructor属性，指向它的构造函数。如果没有Cat.prototype = new Animal()这一行，Cat.prototype.constructor是指向Cat的；加了这一行以后，Cat.prototype.constructor指向Animal。

更重要的是，每一个实例也有一个constructor属性，默认调用prototype对象的constructor属性。因此，在运行Cat.prototype = new Animal();这一行之后，cat1.constructor也指向Animal！

这显然会导致继承链的紊乱（cat1明明是用构造函数Cat生成的），因此我们必须手动纠正，将Cat.prototype对象的constructor值改为Cat。这就是第二行的意思。

这是很重要的一点，编程时务必要遵守。下文都遵循这一点，即如果替换了prototype对象，

1
o.prototype = {};

那么，下一步必然是为新的prototype对象加上constructor属性，并将这个属性指回原来的构造函数。

1
o.prototype.constructor = o;

这种方法的缺点：执行并且建立了一个Animal的实例（其实是没有实质意义的）会浪费内存。

直接将b赋值给a，a = b，会导致二者指向内存同一个地址，对其中一个的更改对会另外一个产生影响（也就是浅赋值）。但是实例化相当于给构造函数一个子元素，对子元素的更改不会影响到上层，也就是说构造函数的相关属性不会变化。

3 直接继承prototype

直接继承prototype，即child.prototype = parent.prototype;

由于Animal对象中，不变的属性都可以直接写入Animal.prototype。所以，我们也可以让Cat()跳过Animal()，直接继承Animal.prototype。

1
2
3
4
5
6
7
8
9
10
11
12
13
function Animal() {}
Animal.prototype.spices = "动物";

function Cat(name, age) {
  this.name = name;
  this.age = age;
}

Cat.prototype = Animal.prototype;
Cat.prototype.constructor = Cat;

var cat1 = new Cat("tom", 24);
console.log(cat1.name + "今年年纪" + cat1.age + "岁，是一种" + cat1.spices); //tom今年年纪24岁，是一种动物

与前一种方法相比，这样做的优点是效率比较高（不用执行和建立Animal的实例了），比较省内存。

缺点是Cat.prototype和Animal.prototype现在指向了同一个对象，那么任何对Cat.prototype的修改，都会反映到Animal.prototype。

所以，上面这一段代码其实是有问题的。请看第二行

1
Cat.prototype.constructor = Cat;

这一句实际上把Animal.prototype对象的constructor属性也改掉了！

1
alert(Animal.prototype.constructor); // Cat

这种方法相比第二种效率更高，比较省内存，因为节省了创建父类实例的过程，缺点是子对象的prototype对象修改后父对象的prototype也会被修改;

4 利用空对象作为中介

由于”直接继承prototype“存在上述的缺点，所以就有第四种方法，利用一个空对象作为中介。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
function Animal() {}
Animal.prototype.spices = "动物";

function Cat(name, age) {
  this.name = name;
  this.age = age;
}

var F = function() {};
F.prototype = Animal.prototype;
Cat.prototype = new F();
Cat.prototype.constructor = Cat;

var cat1 = new Cat("tom", 24);
console.log(cat1.name + "今年年纪" + cat1.age + "岁，是一种" + cat1.spices);
console.log(Animal.prototype.constructor === Cat); //false

F是空对象，所以几乎不占内存。这时，修改Cat的prototype对象，就不会影响到Animal的prototype对象。

可以将上面的方法封装成为一个函数，便于使用（YUI就是使用这种方法实现继承）：

1
2
3
4
5
6
7
function extend(Child, Parent) {
  var F = function() {};
  F.prototype = Parent.prototype;
  Child.prototype = new F();
  Child.prototype.constructor = Child;
  Child.uber = Parent.prototype;
}

另外，说明一点，函数体最后一行 　

1
Child.uber = Parent.prototype;

意思是为子对象设一个uber属性，这个属性直接指向父对象的prototype属性。（uber是一个德语词，意思是”向上”、”上一层”。）这等于在子对象上打开一条通道，可以直接调用父对象的方法。这一行放在这里，只是为了实现继承的完备性，纯属备用性质。

5 利用拷贝实现继承

上面是采用prototype对象，实现继承。也可以换一种思路，纯粹采用“拷贝”方法实现继承。简单说，如果把父对象的所有属性和方法，拷贝进子对象。

首先，还是把Animal的所有不变属性，都放到它的prototype对象上。

1
2
3
4
5
function Animal() {}
Animal.prototype.spices = "动物";
Animal.prototype.say = function() {
  alert("333")
};

然后，再写一个函数，实现原型上属性拷贝的目的。

1
2
3
4
5
6
7
8
function extend2(Child, Parent) {
  var p = Parent.prototype;
  var c = Child.prototype;
  for (var i in p) {
    c[i] = p[i];
  }
  c.uber = p;
}

这个函数的作用，就是将父对象的prototype对象中的属性，一一拷贝给Child对象prototype对象。使用的时候，这样写：

1
2
3
4
5
extend2(Cat, Animal);
var cat1 = new Cat("tom", 24);
console.log(cat1.name + "今年年纪" + cat1.age + "岁，是一种" + cat1.spices);
console.log(Animal.prototype.constructor === Cat); //false
cat1.say();

6 使用Object.setPrototypeOf

Object.setPrototypeOf方法设置一个指定的对象的原型（即内部的__proto__属性到另一个对象）

1
Object.setPrototypeOf(Cat.prototype, Animal.protoype)

执行之后，相当于执行写下面的操作：

1
Cat.prototype.__prot__ = Animal.prototype

7 使用ES6的class和extends实现继承

对于ES6的class，使用extends实现继承

1
2
3
4
5
class Cat extends Animal {
  constructor (...props) {
    super (...props)
  }
}

类的继承模式分为了三种：

  1. 类的实例属性是通过class内部的constructor里的super实现的
  2. 类的原型上的属性是通过Object.setPrototypeOf(B.prototype, A.prototype)实现的
  3. 类的静态属性是通过Object.setPrototypeOf(B, A)实现的

8 小总结

  • 如果是单单继承父函数内部的属性和方法可以使用Call()或者Apply()方法
  • 如果是单单继承原型链的方法，可以遍历父函数的prototype来实现继承
  • 最简便的方法目前看也是使用原型链prototype，令子函数的prototype成为父函数的一个实例，可以同时继承父函数内部和原型链的属性和方法
方法 总结
在子类函数内部使用call或者apply加入构造函数绑定 只能继承构造器里的属性
把子对象的prototype对象指向父对象的一个实例。 既能继承构造器里的属性,也能继承原型上的属性
令子类的prototype直接等于父类的prototype 只能继承原型上的属性和方法
用空对象函数作为中介,空对象的原型等于父类原型，子类原型为空对象实例 只能继承原型上的属性和方法
通过拷贝继承原型上的方法 只能继承原型上的属性和方法
通过Object.setPrototypeOf实现 只能继承原型上的属性和方法
通过extends实现class的继承 同时实现实例属性、原型链以及静态属性的继承

参考