Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Save zhouyanyu/9d2fb237f24bfa432ded0663f91ee1ab to your computer and use it in GitHub Desktop.
Save zhouyanyu/9d2fb237f24bfa432ded0663f91ee1ab to your computer and use it in GitHub Desktop.
title date tags categories
我应该怎样理解JavaScript的继承?(二)
2017-11-10 15:29:14 -0800
JavaScript
JavaScript

继承21.png

窃取模式继承

前面研究了构造函数继承,我们实现了原型属性的继承,那么问题又又又来了,我们该如何继承自有属性呢?就是巧妙的使用.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();

继承21.png 可以看出,实例化的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("黄色");

继承22.png Yes!我们成功的拿到了构造函数Animal的自有属性color。解释一下,构造函数本身也是函数,只不过是在this上添加了color属性,我们在继承时,只要运用call函数,人为的改变它的this指向,这样我们就“偷”到了它的自有属性。

总结

  • 在自有属性继承时我们可以使用.call().apply()方法。
  • call()方法调用一个函数, 其具有一个指定的this值和分别地提供的参数(参数的列表)。
  • apply()方法和call()方法类似,只有一个区别,就是call()方法接受的是若干个参数的列表,而apply()方法接受的是一个包含多个参数的数组。
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment