邀朋友种豆,一起分享吧
喜欢购买正品行货?那就去品牌街

图解JavaScript继承

来自:种豆 时间:2017-12-29 阅读:473次 原文链接
Javascript的继承是通过JavaScript原型链来实现的,比如
function A(){this.title = 'A';this.say = function(){console.log('say:' + this.title);}}
function B(){
this.title = 'B';this.talk = function(){console.log('talk:' + this.title);}}

B.prototype
= new A();
var b1
= new B();
b1.say();
//输出say:B
b1.talk();//输出talk:B

b1.hasOwnProperty(
'title');//true
b1.hasOwnProperty('say');//false
b1.hasOwnProperty('talk');//true

delete b1.title;
b1.say();
//输出say:A
b1.talk();//输出talk:A

b1.hasOwnProperty(
'title');//false
b1.hasOwnProperty('say');//false
b1.hasOwnProperty('talk');//true

b1.say
= function(){ console.log('my say:' + this.title); }
b1.say();
//my say:A
b1.hasOwnPrototype('say');//true

delete b1.say;
b1.say();
//say:A
用一张图来描述这个继承关系就是这样的:

将B的prototype设置为A的实例后,这里就已经实现了继承,实例化后的b1隐式原型链指向了A的实例;
在第一次执行b1.say时,javascript引擎(引擎)先在b1上寻找say属性,发现没有,于是沿着原型链搜索到a,发现say属性,返回;say方法的执行是输出title,于是引擎先在b1上寻找title属性,找到并返回,输出‘B’;
在执行delete b1.title后,b1上title属性被删掉,于是在第二次执行say的时候,引擎在b1上找不到title属性,沿着原型链搜索到a,找到title属性,值为‘A’;
在给b1重新赋予一个say方法后,调用say时,引擎直接在b1上找到了say,于是我们看到输出为‘my say:A’;这是因为javascript在写值操作时才会创建属性;这也就为什么title和talk属性都是实例的自身属性的原因,B是一个构造器,在执行new B的时候,创建了属性。

 
关于种豆 ┊ 联系我们 ┊ 免责声明 ┊ 发帖须知 ┊ 请提意见 ┊ 站点地图
本站为个人爱好兴趣分享网站,不代表本人观点,如有侵权请联系QQ3033380280进行处理
sowsoy.com 版权所有 Copyright©2010-2021 备案号:蜀ICP备2020025376号-3
Email:sowsoy#hotmail.com