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

如何继承

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

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

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

function Cat(name, age) {
  this.name = name;
  this.age = age;
}
var cat1 = new Cat("tom", 23);

此时,二者是没有关系的

console.log(cat1.spices) 
// undefined

怎样才能使"猫"继承"动物"呢?

1 构造函数绑定

第一种方法也是最简单的方法,使用callapply方法,将父对象的构造函数绑定在子对象上,即在子对象构造函数中加一行:

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的方法都要注意)

比如Catprototype对象,指向一个Animal的实例,那么所有"猫"的实例,就能继承Animal了。

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(),我们将Catprototype对象指向一个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对象,

o.prototype = {};

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

o.prototype.constructor = o;

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

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

3 直接继承prototype

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

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

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.prototypeAnimal.prototype现在指向了同一个对象,那么任何对Cat.prototype的修改,都会反映到Animal.prototype

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

Cat.prototype.constructor = Cat;

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

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

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

4 利用空对象作为中介

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

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是空对象,所以几乎不占内存。这时,修改Catprototype对象,就不会影响到Animalprototype对象。

可以将上面的方法封装成为一个函数,便于使用(YUI就是使用这种方法实现继承):

function extend(Child, Parent) {
  var F = function() {};
  F.prototype = Parent.prototype;
  Child.prototype = new F();
  Child.prototype.constructor = Child;
  Child.uber = Parent.prototype;
}

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

Child.uber = Parent.prototype;

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

5 利用拷贝实现继承

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

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

function Animal() {}
Animal.prototype.spices = "动物";
Animal.prototype.say = function() {
  alert("333")
};

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

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对象。使用的时候,这样写:

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__属性到另一个对象)

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

执行之后,相当于执行写下面的操作:

Cat.prototype.__prot__ = Animal.prototype

7 使用ES6的classextends实现继承

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

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的继承 同时实现实例属性、原型链以及静态属性的继承

参考

  • Javascript面向对象编程(二):构造函数的继承@阮一峰的网络日志
  • Object.setPrototypeOf()@MDN

你可能感兴趣的:(JavaScript)