为了账号安全,请及时绑定邮箱和手机立即绑定

Javascript实现完美继承

标签:
JavaScript
700  javascipt

实现javascript完美继承要考虑三个方面:

第一步: 获取父构造函数体内的属性

  • 解决方法: 通过 Father.call(this)实现(这里的this是子构造函数)

第二步: 根据父构造函数原型 创建独立的子构造函数原型, 且要求子构造函数原型的__proto__属性指向子构造函数

700  第二步
  • 解决方法: Son.prototype = Object.create(Father.prototype)

第三步: 将子构造函数原型constractor指向子构造函数

  • 解决方法 Son.prototype.constractor = Son

<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <title>完美继承</title>     <script>         function Father(name){             this.name = name;         }         Father.prototype.sayName = function(){           console.log(this.name)         };                  function Son(name, age){             // 第一步: 获取父构造函数函数体内的属性             Father.call(this, name)         }                  // 第二步: 根据父构造函数原型 创建独立的子构造函数原型, 且要求子构造函数原型的__proto__属性指向子构造函数         Son.prototype = Object.create(Father.prototype);         // 第三步: 将子构造函数原型的constractor指向子构造函数         Son.prototype.constructor = Son;         son1 = new Son("小明", 13);         console.log("子对象的原型指向子构造函数:",son1.__proto__ === Son.prototype);         console.log("子对象的原型指向父构造函数:",son1.__proto__ === Father.prototype);         console.log("打印子对象", son1);         son2 = new Son("小红", 14);         console.log("打印两个子对象的属性",son1, son2);         son1.sayName();         son2.sayName();         // 重新父原型内的方法 ,观察是否会对父原型产生影响         Son.prototype.sayName = function(){             console.log("子原型函数sayName", this.name);         };         // 父实例对象调用sayName         father1 = new Father("老王");         father1.sayName();         // 子实例调用sayName         son1.sayName();         son2.sayName();     </script> </head> <body> </body> </html>

700  执行结果

小结

  • 第一步(为了获取父构造函数函数体内的属性): 用子构造函数this, 去执行父构造函数, 最终使父构造函数的属性被附加到了子构造函数this上.

  • 第二步(为了完美获取父构造函数原型): 要理解b = Object.create(a),创建出实例a的__proto__依然是指向a的, 即b.__proto__ === a

  • 第三步(为了使子构造函数的实例能正确指向子构造函数): 很类似双向链表中替换单个节点的操作.




点击查看更多内容
TA 点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
  • 推荐
  • 评论
  • 收藏
  • 共同学习,写下你的评论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消