注:本文大量参考高程三,主要作为自己对继承学习和理解的记录
原型链继承
function PersonPrototype(){ this.name = 'person'; this.age = 18; this.colors = ['red','green','blue']; }; PersonPrototype.prototype.showColors = function(){ console.log(this.colors) }; function Person(){}; Person.prototype = new PersonPrototype(); let personPrototype1 = new Person(); let personPrototype2 = new Person(); 复制代码
以上代码的原型链关系如下图:
公共的方法定义在了PersonPrototype.prototype上,而通过把Person.prototype指向PersonPrototype的实例,保证PersonPrototype方法中的代码得以执行,并保存到Person.prototype中,此时,通过new Person()得到的实例,继承Person.prototype中的属性以及PersonPrototype.prototype中的方法,但是要注意的是,作为引用数据类型的colors会被所有实例共享,看如下代码:
personPrototype1.name = 'personPrototype1'; personPrototype1.colors.push('pink'); 复制代码
上面的代码会给personPrototype1创建私有属性name并赋值'personPrototype1',而对colors的操作则作用在Person.prototype.colors上
借用构造函数继承
function person(name,age){ this.name = name; this.age = age; this.colors = ['red','green','blue']; this.showColors = function(){ console.log(this.colors); } }; function Person(name,age){ person.call(this,name,age) } let person1 = new Person('person1',18); let person2 = new Person('person2',28); person1.colors.push('pink'); 复制代码
以上代码的原型链关系如下图:
比原型链灵活,可以在实例化的时候传入所需参数,并且引用数据类型的属性也是私有属性,所以更改引用数据类型的属性不会互相影响,但是showColors方法会在每个实例上都创建,占用内存,函数无法复用
组合继承
考虑到原型链继承和借用构造函数继承各自的缺点,组合继承是将原型链和借用构造函数的技术组合到一块,从而发挥二者之长且避免它们的不足的一种继承模式。其背后的思路是使用原型链实现对原型属性和方法的继承,而通过借用构造函数来实现对实例属性的继承。这样,既通过在原型上定义方法实现了函数复用,又能够保证每个实例都有它自己的属性。看如下代码:
function SuperType(name){ this.name = name; this.colors = ['red','green','blue']; } SuperType.prototype.showColors = function(){ console.log(this.colors); }; function SubType(name,age){ SuperType.call(this,name); this.age = age; }; SubType.prototype = new SuperType(); SubType.prototype.constructor = SubType; SubType.prototype.sayName = function(){ console.log(this.name); } let person1 = new SubType('person1',18), person2 = new SubType('person2',20); 复制代码
以上代码的原型链关系如下图:
取原型链的优点,实现对原型方法和属性的继承,实现方法的复用,取构造函数的优点,实现实例的私有属性,且可以通过instanceof 和 isPrototypeOf()识别基于组合继承创建的对象。
虽然组合继承做到了方法的复用及属性的私有化,但是可以看到这种继承方式调用了两次SuperType构造函数,并且在SubType.prototype上创建了不必要的属性,造成了性能和内存的浪费,后边的寄生组合式继承会解决组合继承的缺陷。
原型式继承
看如下代码:
function object(obj){ function F(){}; F.prototype = obj; return new F(); }; let obj = { name:'obj.name', age:18, firends:['a','b','c','d'], showName:function(){ console.log(this.name) } } let obj1 = object(obj); 复制代码
以上代码的原型链关系如下图:
可见原型式继承其实有些像原型链继承,即实例自身没有私有属性和方法,所有属性和方法都继承自其___proto__指向的原型对象上,所以同样存在引用数据类型共享问题,与原型链继承不同的是原型式继承需要一个现有对象作为参数,返回一个继承该对象的所有属性和方法的实例。
ECMAScript 5 通过新增 Object.create()方法规范化了原型式继承。这个方法接收两个参数:一 个用作新对象原型的对象和(可选的)一个为新对象定义额外属性的对象。在传入一个参数的情况下, Object.create()与 object()方法的行为相同。
寄生式继承
看如下代码:
function object(obj){ function F(){}; F.prototype = obj; return new F(); }; function createAnother(original){ var clone = object(original); clone.sayName = function(){ console.log(this.name); }; return clone;//返回这个对象 } let obj = { name:'obj.name', age:18, firends:['a','b','c','d'], showName:function(){ console.log(this.name) } }; let obj1 = createAnother(obj); 复制代码
以上代码的原型链关系如下图:
可见寄生式继承基于原型式继承,只是在寄生式继承的基础上增强了寄生式继承返回的对象
寄生组合式继承
看如下代码:
function SuperType(name){ this.name = name; this.colors = ["red", "blue", "green"]; } SuperType.prototype.showColors = function(){ console.log(this.colors); }; function SubType(name, age){ SuperType.call(this, name); this.age = age; } function F(){}; F.prototype = SuperType.prototype; SubType.prototype = new F(); SubType.prototype.constructor = SubType; SubType.prototype.sayName = function(){ console.log(this.name); }; let person1 = new SubType('person1',18), person2 = new SubType('person2',20); 复制代码
以上代码的原型链关系如下图:
可以看到,借用原型式继承创建中间构造函数的方法,寄生组合式继承只调用了一次
SuperType构造函数,而且实现了方法的复用及属性的私有化,因为只调用了一次
SuperType,所以也没有创建多余的属性和方法,开发人员普遍认为寄生组合式继承是引用类型最理想的继承范式。