首页 > 代码库 > Javascript之对象组合继承
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);//undefinedalert(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"));//3var 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,2alert(person1.species);//人类alert(person1.arr);alert(person1.nationality);//中国alert(person1.showSpecies());//人类var person2 = new People("二毛","男");person2.arr.push(3);alert(person2.arr);//1,3alert(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,2person3.arr.push(4);alert(person3.arr);//1,2,4alert(person1.arr);//1,2,4var person2 = new People("二毛","男");person2.arr.push(3);alert(person2.arr);//1,3alert(person1.arr);//1,2,4var person4 = new People("四毛","男");person4.arr.push(5);alert(person4.arr);//1,5alert(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之对象组合继承