纵横研究院前端基础技术专题社区

回首掏javascript原型链

2019-06-13  本文已影响0人  想做个文人

万事万物都遵循道,事物的发展延续,都需要进化和遗传。遵循物竞天择,适者才能生存下去的道理。计算机是人类智慧的产物,其中蕴含的各种技术,大都都是人类的思想的结晶。javascript的发展,离不开其丰富多变的遗传特性——原型链

故事从小明同学开始说起

小明和他爸爸之间是有血缘关系的,这个我们应该都知道,除非出现了那个老王,不过呢在js里面也是可能会出现老王的,我们稍后再聊这个老王。

我们都知道动物都是有DNA这个东东,那么js是由我们人类发明出来的,自然而然也会有意识的植入这种DNA的思想来表示小明和他爸之间的血缘关系,那就是__proto__(我们js里面是雌雄同体,爸爸也是妈妈哈哈)

__proto__是怎么联系我们的小明和他爸爸的呢??

原来小明爸爸大明呢是个特殊的函数function,我们把它叫做类

function 大明(name){
    this.name = name;
}

大明体内流淌的血液含有prototype显示原型基因,这个就是遗传给我们小明,而小明是大明生出来的一个对象,他体内呢是流淌这他爸爸的血液的,里面就含有了我们前面所提到的__proto__,这个__proto__小明的隐式原型和大明显示的原型prototype有这密切的联系,组成的链条就是我们的所说原型链了。

image.png
所以他们之间应该就是如下图的关系:
image.png

那么现在问题就来了,这中间的这种联系会不会被打破呢?
那是肯定的,欢迎我们的老王闪亮登场👏👏

function 老王(name){
    this.name = name;
    this.prop = '老王的基因'
}
image.png

这种是比较简单粗暴的,直接是将小明的遗传基因给改变了。老王还有一种比较温柔的方法,那就是和小明爸爸走的比较亲密,将自己的基因注入到小明爸爸体内,这样小明就会遗传老王的基因了。

大明.prototype = new 老王('老王');
var 小明 = new 大明('小明')
image.png

小明同学就有了prop:老王基因的属性了。


总结

js因为不太想弄的跟java那样搞成一个纯的面向对象的编程,想降低学习门槛,然后设计出来了prototype原型这个东西,对象上的属性会跟着prototype一层层的往上查找属性,直到查找到null为止,Object的原型是null,如果当前对象有该属性那就不再继续往上查找了。每个函数都有一个prototype属性,每个对象都有一个__proto__属性,每个prototype都有一个构造函数又指回到原函数,我们在开发的过程中一般不会去改变对象的__proto__属性,因为这个是隐式的,只是去修改构造函数的prototype属性来达到继承的效果。

image.png

文末小结
前面花里胡哨的说了那么多不知道有没有把原型链说清楚,只是想通过另一种方式把它们拟人化来讲解这个东西,可能会好容易理解一些。如果文章中有描述不对的或者不清晰的请看到这篇文章的大佬在评论区留言指正,感谢感谢。

上一篇下一篇

猜你喜欢

热点阅读