JavaScript原型链与继承操作实例总结

原创 Fly丶 教程 js 62阅读 2018-12-31 20:20:47 举报

本文实例讲述了JavaScript原型链与继承操作。分享给大家供大家参考,具体如下:

1. JavaScript继承

JavaScript继承可以说是发生在对象与对象之间,而原型链则是实现继承的主要方法;

1.1 原型链

利用原型让一引用类型继承另一个引用类型的属性和方法。

构造函数中有个prototype(每个函数中都有),指向他的原型对象,每个原型对象中也有一个constructor属性,指向原构造函数。通过构造函数创建的新对象中都有一个无法直接访问的[[proto]]属性,使得对象也指向构造函数的原型。这使得对象也获得了原型中的方法和属性。

当访问对象中的属性或方法时,如果对象中没有该属性或方法,则会向上一级原型对象中寻找该属性或方法,如果找了,就返回该属性,若没有则继续向上面的原型中去查找该属性。

1.2 构造函数的原型链继承

运行结果:

注意:

①:当 Son.prototype指向Father的时候,他就已经是父类型的Son了。

②:s1.eat();s1中没有此方法,该方法在父类型原型中,当s1访问时,现在s1中查找,若没有则向他指向的原型中去查找该方法,若还是没有,则继续往上面的原型中查找。这样就形成了一条原型链。

③:通过原型链实现了继承。

简写:

1.3 默认顶端原型
默认的顶端原型:

是当所有类型都没有指明继承某个类型时,则默认继承Object类型。

objec中也有prototype指向他的object原型,object中也有[[proto]],只不过他指向的是null;可忽略。

object的很多方法,都是存在object的原型中;

在原型链中查找,从当前位置一直往上访问,直到原型链顶端位置。

1.4 测试数据

typeof 测数据的类型,最好只来测试基本类型数据,应为除了基本类型外全是返回object。

instnaceof 测试一个对象属不属于其父类对象的类型

运行结果:

isPrototypeOf(要测的对象) 专属于原型对象的方法,判断该对象在不在该原型链上,使用:父类构造函数.prototype.isPrototypeOf(对象)

1.5 借调

借调:借用构造函数调用冒充继承,借调实现的继承,不是真正的继承,只是借用构造函数中的属性或方法。

apply,call。

注意:借调缺点:call是冒充继承,不是真正的继承,所以不能访问原构造函数的原型中的属性或方法。

1.6 组合继承

组合构造函数的借调继承和原型的继承优点:

注意:Son.prototype=new Fn(); 这条语句 实现了Son继承父类型Fn;Son指向的是父类型创建的对象,而父类型的对象有自己的属性,并且又成为了子类型的原型,那么其中的属性不就成了共享的了吗。 但是前面还有用到Fn.call( ),这条语句已经借调了父类构造函数属性,相当于覆盖了子类型原型的属性。

最后

为了帮助大家让学习变得轻松、高效,给大家免费分享一大批资料,帮助大家在成为全栈工程师,乃至架构师的路上披荆斩棘。在这里给大家推荐一个前端全栈学习交流圈:866109386.欢迎大家进群交流讨论,学习交流,共同进步。

当真正开始学习的时候难免不知道从哪入手,导致效率低下影响继续学习的信心。

但最重要的是不知道哪些技术需要重点掌握,学习时频繁踩坑,最终浪费大量时间,所以有有效资源还是很有必要的。

最后祝福所有遇到瓶疾且不知道怎么办的前端程序员们,祝福大家在往后的工作与面试中一切顺利。

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

赶紧努力消灭 0 回复