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对象的继承