共计 1518 个字符,预计需要花费 4 分钟才能阅读完成。
一. 前言
原型和原型链在面试中从来备受器重,常常被提及。说难可能也不太难,但要真正齐全了解,吃透它,还是要多下功夫的。
上面为大家简略论述我对原型和原型链的了解,若是感觉有说的不对的中央,还请帮忙斧正,或者敞开页面不节约您的宝贵时间(胆怯)
二. 注释
原型
JavaScript
所有的对象实质上都是通过new 函数
创立的,包含对象字面量的模式定义对象 (相当于new Object()
的语法糖)。- 所有的函数实质上都是通过
new Function
创立的,包含Object
、Array
等
(隐式执行,是咱们看不到的但在执行过程中产生过的) - 所有的函数都是对象。
分析
Prototype(显式原型)
每个函数都有一个属性 prototype
,它就是原型,默认状况下它是一个一般Object
对象,这个对象是调用该构造函数所创立的实例的原型。
__proto__(谷歌浏览器已更新为[[prototype]],隐式原型)
JavaScript
中所有对象 (除了null
) 都具备一个 __proto__
属性,该属性指向该对象的原型。
上图中,函数身上的属性,会被显式的继承到,即 //this.name=’wn’, 此时显式的不存在,所以继承不到,然而函数的原型上有属性,就会被隐式的继承到,即
name: “ 小南 ”
contructor 属性
JavaScript
同样存在由原型指向构造函数的属性:constructor
,即Func.prototype.constructor --> Func
参考原文 前端进阶面试题具体解答
原型链
实例对象在查找属性时,如果查找不到,就会沿着 __proto__
去与对象关联的原型上查找,如果还查找不到,就去找原型的原型,直至查到最顶层,这也就是原型链的概念。
通过这张图咱们能够留神到, 构造函数 Foo
的原型 prototype
和 构造函数Foo
所创立进去的对象实例 f1
,f2
的原型 __proto__
是一样的都指向Foo().prototype
.
这里咱们能够持续思考, 往下摸索一下, 既然 Foo().prototype 也是一个对象, 那是不是 Foo()
.prototype
也有本人的对象原型 __proto__
呢. 答案是必定的, 图中咱们也能够看到 Foo()
.prototype
的对象原型 __proto__
指向的是 Object.prototype. Object 作为最顶端的构造函数, 能够看到所有的对象都会通过原型链指向它. 这就是为什么新建的对象为什么可能应用 toString() 等办法的起因.
然而咱们能够发现 Object.prototype
也有本人的 __proto__
然而却指向的是null
,null
为原型链的起点.
留神!!!
那么这里还个问题, 仔细的小伙伴曾经发现了, 构造函数有本人的原型 prototype, 然而构造函数也是对象啊, 构造函数也有没有 __proto__
呢. 答案是有的. 因为每个 JavaScript 函数实际上都是一个 Function
对象。运行 function(){}).constructor === Function // true
便能够失去这个论断。
而且通过图咱们也能够发现 Foo
的 __proto__
指向 Function.prototype
, 而且这里还有个特例, 上文也阐明了每个 JavaScript 函数实际上都是一个 Function
对象, 所以Function
的构造函数原型 prototype
和对象原型 __proto__
都是指向同一个Function.prototype
.
结语
原型和原型链算是 js 里的一座大山,比拟偏概念性,在面试时是经常出现的,所以闲时能够多拿进去推敲。
鄙人写的也略有通俗,心愿能帮到查阅的小伙伴呀。
码字不易,还望看到这里的小伙伴用用发财的小手点点赞,与君共勉!