继承&原型链

Posted cheesecatmiao

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了继承&原型链相关的知识,希望对你有一定的参考价值。

本以为自己对原型链、this、数据域已经蛮了解了

但是遇到问题时无法立刻做出判断才发现其实自己了解得还不够

 

题目很简单,稍微结合理解就可以做得出来

 

function Father(name){
this.name = name || ‘jjjj‘;
}

Father.prototype.sayName = function(){
console.log(this.name);
}

function Child(name){
Father.call(this,name);
}


Child.prototype = new Father();
var chi = new Child(‘red‘);

console.log(chi.name); //red 


chi.sayName(); //red


delete chi.name;
chi.sayName(); //jjjj

 

console.log(chi.constructor);

console.log(Child.constructor);

 

//? Father(name){
this.name = name || ‘jjjj‘;
}
//? Function() { [native code] }

 

解释:

1、Father 是构造函数模式创建的类,且通过prototype给其原型链上加了方法sayName

2、Child的构造函数里调用了Father的构造函数,继承了Father的属性name,但是值不是共享的

3、Child的原型被赋为了Father的一个实例,也就是说,Child此时原型上同时有name属性和sayName方法,而name=‘jjjj’,因为在初始化Father实例时并未传参.如果Child.prototype=new Father(‘hello‘),那么第三个会输出hello而不是jjjj

4、实例方法在遇到一个变量属性时,会优先查看实例中有无该属性,如果实例上无该属性,则会去原型链上找,直至找完所有

5、在delete了chi.name后,chi实例已经不含有name属性,所以sayName会到原型链上找name,而chi的原型链就是Child的原型链此时的name=jjjj,所以最后输出jjjj

6、第二个输出red也是显而易见的,因为函数内的this指向调用它的对象chi,所以this指向的是chi,而chi拥有实例属性name=red















以上是关于继承&原型链的主要内容,如果未能解决你的问题,请参考以下文章

继承&原型链

深入浅出JavaScript之原型链&继承

对js原型链及继承的理解:__proto__&prototpye

JavaScript 原型继承原型链

JavaScript原型&原型链

JavaScript难点系列:原型链与继承