JavaScript中的原型链和继承

原创 年树先生 随笔 前端技术 18503阅读 14 天前 举报

理解原型链

在 JavaScript 的世界中,函数是一等公民。
上面这句话在很多地方都看到过。用我自己的话来理解就是:函数既当爹又当妈。“当爹”是因为我们用函数去处理各种“粗活累活”(各种工具函数、页面交互、业务逻辑等);“当妈”是因为函数还会“生孩子”(创建对象)。

在 JavaScript 的世界中,每一个对象都有一个隐藏的proto属性。这个属性指向生成这个对象的构造函数的原型(prototype)。事实上,所有函数都有一个原型。考虑如下例子:

所有实例对象都可以访问到相应原型对象里面的属性和方法。(理解原型链的关键)

实现继承

再看另外一个构造函数:

jsfiddle

虽然把 Human 的原型直接赋给 Coder 的原型可以让 Coder 的实例访问到 Human 原型上的属性和方法,但是如果想单独修改 Coder 原型的话会影响到 Human 原型上的值,这显然不是我们所期望的。

所以应该这样写:

从而实现了 JavaScript 最简单的原型链式继承。

不过这么写还是会有以下两个缺陷:

父类构造函数中的引用类型的属性(方法)是所有子类实例共享的,所以会出现改动一个实例的属性(或方法)会影响所有实例的属性(或方法)。

创建子类实例时,无法向父类构造函数传参。

所以需要在子类构造函数内调用一下父类构造函数,并把子类的this绑定上去:

获取源码

本次给大家推荐一个免费的学习群,里面概括移动应用网站开发,css,html,webpack,vue node angular以及面试资源等。
对web开发技术感兴趣的同学,欢迎加入Q群:864305860,不管你是小白还是大牛我都欢迎,还有大牛整理的一套高效率学习路线和教程与您免费分享,同时每天更新视频资料。
最后,祝大家早日学有所成,拿到满意offer,快速升职加薪,走上人生巅峰。

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复