title | date | tags | categories |
---|---|---|---|
我应该怎样理解JavaScript的继承?(二) |
2017-11-10 15:29:14 -0800 |
JavaScript |
JavaScript |
前面研究了构造函数继承,我们实现了原型属性的继承,那么问题又又又来了,我们该如何继承自有属性呢?就是巧妙的使用.call()
和.apply()
方法。
我们把上次的继承继续写完:
// 动物
function Animal(){
}
Animal.prototype.eat = function(){
console.log('吧唧吧唧');
}
Animal.prototype.sheep = function(){
console.log('呼噜噜噜');
}
// 哺乳动物
function Mammal(){
}
Mammal.prototype = Object.create(Animal.prototype);
Mammal.prototype.constructor = Mammal;
Mammal.prototype.suckle = function(){
console.log('Emmmmm');
}
// 人
function People(){
}
People.prototype = Object.create(Mammal.prototype);
People.prototype.constructor = People;
People.prototype.love = function(){
console.log('Love You');
}
var laozhou = new People();
可以看出,实例化的laozhou已经拥有了自己的原型属性和上级继承来的原型属性,但是如果我们想要添加一个自有属性,比如说“颜色(肤色或毛色)”,他是所有动物共有的特性,但是又各自不相同,所以我们运用窃取模式继承这部分自有属性。
// 动物
function Animal(color){
this.color = color;
}
Animal.prototype.eat = function(){
console.log('吧唧吧唧');
}
Animal.prototype.sheep = function(){
console.log('呼噜噜噜');
}
// 哺乳动物
function Mammal(color){
Animal.call(this,color);
}
Mammal.prototype = Object.create(Animal.prototype);
Mammal.prototype.constructor = Mammal;
Mammal.prototype.suckle = function(){
console.log('Emmmmm');
}
// 人
function People(color){
Mammal.call(this,color);
}
People.prototype = Object.create(Mammal.prototype);
People.prototype.constructor = People;
People.prototype.love = function(){
console.log('Love You');
}
var peppa = new Mammal("粉色");
var laozhou = new People("黄色");
Yes!我们成功的拿到了构造函数Animal的自有属性color。解释一下,构造函数本身也是函数,只不过是在this上添加了color属性,我们在继承时,只要运用call函数,人为的改变它的this指向,这样我们就“偷”到了它的自有属性。
- 在自有属性继承时我们可以使用
.call()
和.apply()
方法。 call()
方法调用一个函数, 其具有一个指定的this值和分别地提供的参数(参数的列表)。apply()
方法和call()
方法类似,只有一个区别,就是call()
方法接受的是若干个参数的列表,而apply()方法接受的是一个包含多个参数的数组。