Javascript之对象组合继承

Posted tisikcci

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Javascript之对象组合继承相关的知识，希望对你有一定的参考价值。

感悟：

最近看了一些关于javascript对象继承的知识，发现自己之前虽然看了一些书，但是很多知识都忘了。虽然很多东西都忘了，但再次看的过程中对这些东西不会再向刚接触时那么陌生，而且理解起来也比之前顺畅和透彻多了。

充分说明：多看书是有意义的。

————————————————————————————————————————————————————————————————————————————————————————————碎碎念

关于对象之间的继承，在Javascript中主要是通过原型对象链来实现的，这一点与java这种基于类的面向对象语言有明显的不同，Javascript是基于原型的面向对象语言（大部分人说是基于对象的语言两种说法的观点不同）。

 

下面来具体说一下继承的实现方式：

一、组合继承

 1.组合继承将原型链和借用构造函数技术组合在一起。通过使用apply或者是call借用构造函数，借用对象可以得到被借用对象的实例属性。首先来看一个栗子：

function People(){
    this.species = "人类";
}

People.prototype.nationality = "中国";
People.prototype.showSpecies = function(){
    return this.species;
}

function Person(name, sex){
    People.apply(this,arguments);
    //此处是 Person 的实例属性，当然也可以添加一些实例方法
    this.name = name;
    this.sex = sex;
}

var person1 = new Person("二狗","男");
alert(person1.species);//人类
alert(person1.nationality);//undefined
alert(person1.showSpecies());//Uncaught TypeError: person1.showSpecies is not a function

通过结果可以看到，person1 是构造函数 Person 的一个实例，因为构造函数 Person 使用了借用构造函数技术  

 People.apply(this,arguments);

Person 就可以获得 People 的实例属性 species；但是 Person 无法获得 People 的原型属性：nationality 和原型方法：showSpecies()；

如果想让 Person 获得 People 的原型属性和原型方法，需要让 Person 获得 People 的原型对象（隐式）上的属性和方法。

本质上讲：就是要重写 Person 的原型对象。

a. 一种简单实用的做法是直接将 People 的原型属性和原型方法复制给 Person：（也称之为拷贝继承）

function People(){
    this.species = "人类";
}
People.prototype.nationality = "中国";
People.prototype.showSpecies = function(){
    return this.species;
}

function Person(name, sex){
    People.apply(this,arguments);
    this.name = name;
    this.sex = sex;
}
//遍历并复制
for(var i in People.prototype){
    Person.prototype[i] = People.prototype[i];
}

var person1 = new Person("二狗","男");
alert(person1.species);//人类
alert(person1.nationality);中国
alert(person1.showSpecies());人类

 注意：上面这种复制是将 People.prototype 复制给了 Person.prototype。Person 拥有了和 People 一样的隐式原型对象。通过对原型对象上的数组进行操作可以证实：

function People(){
    this.species = "人类";
}

People.prototype.colorArray = ["red", "blue"];

function Person(name, sex){
    People.apply(this,arguments);
    this.name = name;
    this.sex = sex;
}

for(var i in People.prototype){
    Person.prototype[i] = People.prototype[i];
}

var person1 = new Person("二狗","男");
alert(person1.colorArray.push("green"));//3

var person2 = new People("二毛","男");
alert(person2.colorArray.push("black"));//4

两个不同构造函数实例化得到的对象，他们操作原型对象上的数组是同一个，说明这种原型对象上的原型属性和原型方法的复制是遵循一般的 Javascript 复制规则的。

可以对这个隐式的原型对象做一些别的操作，比如：

修改隐式对象对某个已引用方法：

function People(){
    this.species = "人类";
}
People.prototype.nationality = "中国";
People.prototype.showSpecies = function(){
    return this.species;
};
People.prototype.cheers = function(){
    return "中国加油！";
};

function Person(name, sex){
    People.apply(this,arguments);
    this.name = name;
    this.sex = sex;
}

for(var i in People.prototype){
    Person.prototype[i] = People.prototype[i];
}

Person.prototype.cheers = function(){
    return "中国必胜！";
};

var person1 = new Person("二狗","男");
alert(person1.species);//人类
alert(person1.nationality);//中国
alert(person1.showSpecies());//人类
alert(person1.cheers());//中国必胜!

var person2 = new People("二毛","男");
alert(person2.cheers());//中国加油！

可以看到：person1 利用修改构造函数对应的原型对象中的方法，引用了一个新的方法。也可以向下面的样子先引用一个方法，再通过继承覆盖之前的引用，当然，这样做没什么意义：

function People(){
    this.species = "人类";
}
People.prototype.nationality = "中国";
People.prototype.showSpecies = function(){
    return this.species;
};
People.prototype.cheers = function(){
    return "中国加油！";
};

function Person(name, sex){
    People.apply(this,arguments);
    this.name = name;
    this.sex = sex;
}

Person.prototype.cheers = function(){
    return "中国必胜！";
};


for(var i in People.prototype){
    Person.prototype[i] = People.prototype[i];
}


var person1 = new Person("二狗","男");
alert(person1.species);//人类
alert(person1.nationality);//中国
alert(person1.showSpecies());//人类
alert(person1.cheers());//中国加油！

var person2 = new People("二毛","男");
alert(person2.cheers());//中国加油！

b. 将 People 的实例赋值给 Person 的原型对象，同时修改 Person 原型对象的 constructor 属性值为自身。

如果只是单单将 People 的实例赋值给 Person 的原型对象, 而不修改 Person 原型对象的 constructor 属性会怎么样？

来看看修改 Person 原型对象前后 Person 构造函数的 Person.prototype.constructor 属性：

function People(){
    this.species = "人类";
}

function Person(name, sex){
    People.apply(this,arguments);
    this.name = name;
    this.sex = sex;
}
alert(Person.prototype.constructor);//Person这个完整的函数

Person.prototype = new People();
alert(Person.prototype.constructor);//People这个完整的函数

可以看到在将 People 实例赋值给 Person 前后，Person 的构造函数变了，如果这个时候什么都不做，那么再对 Person 实例化：

function People(){
    this.species = "人类";
}

function Person(name, sex){
    People.apply(this,arguments);
    this.name = name;
    this.sex = sex;
}
alert(Person.prototype.constructor);//Person这个完整的函数

Person.prototype = new People();
alert(Person.prototype.constructor);//People这个完整的函数

var person1 = new Person("二狗","男");
alert(person1.constructor);//People这个完整的函数

会发现构造函数 Person 的实例： person1 的构造函数居然不是 Person 而是 People，这显然不对。 

也就是说构造函数 People 在将其实例赋值给 Person 的原型对象时，同时也将 Person 的原型对象的属性 constructor 也更换了（很明显，因为 constructor 是 prototype 的属性，皮之不存，毛将焉附？），

而 prototype.constructor 的值表示由当前构造函数对象 实例化的 函数对象的构造函数（简单点说 Person.prototype.constructor 就是告诉构造函数对象 Person 的实例，他们是谁构造的，

而 person1.constructor 让作为实例对象的 person1 直指它自己的构造函数）。——可以看出，正常情况下 Person.prototype.constructor === person1.constructor 应该成立。

function People(){
	this.species = "人类";
}

function Person(name, sex){
	People.apply(this,arguments);
	this.name = name;
	this.sex = sex;
}
alert(Person.prototype.constructor);//Person这个完整的函数

Person.prototype = new People();
Person.prototype.constructor = Person;

var person1 = new Person("二狗","男");

alert(person1.constructor === Person.prototype.constructor);//true

通过上面讲到的组合继承的两种实现方式，虽然能够实现属性和方法、原型属性和原型方法的继承，但是存在一个不足：无论在什么情况下，被继承的函数对象都会被调用两次。

先来看一个有趣的地方，假如：在组合继承中不使用 借用构造函数技术 而直接重写原型对象，会发生什么?

function People(){
    this.species = "人类";
    this.arr = [1];
}
People.prototype.nationality = "中国";
People.prototype.showSpecies = function(){
    return this.species;
};

function Person(name, sex){
    // People.apply(this,arguments);
    this.name = name;
    this.sex = sex;
}

Person.prototype = new People();//让People的实例属性变成Person的原型属性
Person.prototype.constructor = Person;

var person1 = new Person("二狗","男");

person1.arr.push(2);//1,2
alert(person1.species);//人类
alert(person1.arr);
alert(person1.nationality);//中国
alert(person1.showSpecies());//人类

var person2 = new People("二毛","男");
person2.arr.push(3);
alert(person2.arr);//1,3
alert(person1.arr);//1,2

这样看来在构造函数 People 和 构造函数 Person 的实例对象中都能正常使用 People 的实例属性。如果是单个构造函数 Person 的多个 实例对象呢？

function People(){
    this.species = "人类";
    this.arr = [1];
}
People.prototype.nationality = "中国";
People.prototype.showSpecies = function(){
    return this.species;
};

function Person(name, sex){
    // People.apply(this,arguments);
    this.name = name;
    this.sex = sex;
}

Person.prototype = new People();//让People的实例属性变成Person的原型属性
Person.prototype.constructor = Person;

var person1 = new Person("二狗","男");
var person3 = new Person("三狗","男");

person1.arr.push(2);
alert(person1.arr);//1,2

person3.arr.push(4);
alert(person3.arr);//1,2,4
alert(person1.arr);//1,2,4

var person2 = new People("二毛","男");
person2.arr.push(3);
alert(person2.arr);//1,3
alert(person1.arr);//1,2,4
var person4 = new People("四毛","男");
person4.arr.push(5);
alert(person4.arr);//1,5
alert(person2.arr);//1,3

注意看构造函数 People 和构造函数 Person 的实例通过相同操作后结果的差异。

构造函数 People 的实例会各自拥有自己的数组 arr， 各自的操作间是不会相互影响的，但是构造函数 Person 的实例都拥有相同的数组 arr 引用，他们操作的是同一个数组。那么实例化得到的不同对象无法正常使用各自的 arr。

所以在组合继承中，借用构造函数和原型链缺一不可。

这里的 person1.__proto__ 是帮助我们拿到 person1 的构造函数 Person 的原型对象。可以看到，上面直接将 People 的实例属性转化为 Person 的原型属性，而 People 的原型属性和原型方法也成为  Person 的原型属性和原型方法。

 

但是，组合继承也存在缺点，最明显的就是：无论在什么情况下，只要实例化了使用组合继承后的对象，被继承的对象都会调用两次。

function People(){
    this.species = "人类";
}
People.prototype.nationality = "中国";
People.prototype.showSpecies = function(){
    return this.species;
};

function Person(name, sex){
    People.apply(this,arguments);//第二次调用People()
    this.name = name;
    this.sex = sex;
}

Person.prototype = new People();//第一次调用People()
Person.prototype.constructor = Person;

var person1 = new Person("二狗","男");

第一次发生在将 People 的实例对象潜复制给 Person 的原型对象（可以是直接复制，也可以是通过 People 的实例 new People() ）；

第二次发生在调用构造函数 Person 时。

 在第一次调用的时候，其实 Person 就已经拿到了 People 的实例化属性 species，而第二次调用发生在实例化 Person 的时候，通过借用构造函数，Person 又一次的调用了 People，会在 Person1 上创建实例属性 species。

 

总结：组合继承通过借用构造函数技术和重写原型对象，可以让一个对象继承另一个对象的属性和方法、原型属性和原型方法。在组合继承中借用构造函数技术和重写原型对象都是必要的，缺少了任何一个都会使继承不能正常工作。

组合继承也存在缺点，主要是被继承的对象的实例属性的重复调用。

以上是关于Javascript之对象组合继承的主要内容，如果未能解决你的问题，请参考以下文章

JavaScript之原型式继承&寄生式继承和寄生组合式继承以及优缺点

48个值得掌握的JavaScript代码片段（上）

面向对象概论之继承简述，组合简述，菱形继承简述

JavaScript高级之继承

JavaScript继承的6种方式

JavaScript对象的继承