【prototype】JavaScript中的原型和原型链纯理论知识点！

前言

不论是在面试中还是在实际应用中，原型和原型链都是JavaScript中最基础的知识点。很多人都是在面试前看一些宝典来临时抱佛脚去应付面试，为了和大家一起弄懂这其中的原理，不止是停留在面试题的答案中。我们将在本篇文章里面一起学习！！！

prototype

当我们随意输出一个对象时，在对象中总会包含这样一个Object的代码，这里面就是JavaScript对象中特殊的内置属性[[Prototype]]，其实它就是对其他对象的引用。

😮‍💨 [[Prototype]]引用到底有啥用呢？

var obj = {
    name: '蜡笔小心_'
};

obj.name;

• 当我们试图使用 obj.name （也就是引用对象的属性）时，就会触发对象中默认的[[Get]]操作
• [[Get]]操作会先检查对象本身是否有这个属性，如果有就使用它。

[[Get]]属于对象中的一个默认操作，有兴趣的可以自行去了解一下哦。

😬 如果 name 不在obj对象中，就需要使用对象的[[Prototype]]链了

• 对于默认的[[Get]]操作来说，如果无法在对象本身中找到需要的属性，那么就会访问对象的[[Prototype]]链
• obj对象的[[Prototype]]关联到了 tempObj，尽管 obj.name 并不存在，但是并不耽误属性成功访问到它的值

[[Prototype]]链会一直持续在匹配属性名和完整链条中，如果未找到的话，[[Get]]操作就会返回 undefined

我们在代码中常用的 for..in 遍历对象时的原理就和查找[[Prototype]]链类似。

😮‍💨 [[Prototype]]的尽头在何处？

所有内置的[[Prototype]]链最终都会指向内置的 Object.prototype。由于所有的内置对象都源于这个 Object.prototype，所以它包含JavaScript中许多通用的功能。

• 这些功能都是我们在项目中经常用到的，比如：toString()、valueOf()...

设置和屏蔽属性

🤨 给某个对象去设置属性，并不仅仅是添加一个新属性或修改已有的属性值。

var obj.name = '稀土';

• 如果 obj 对象里面包含了名为 name 的属性，这段代码只会修改已有的属性值
• 如果 name 不是直接存在 obj 里面的，那么 [[Prototype]] 链就会遍历，类似上面的 [[Get]]操作

如果属性名 name 即出现在 obj对象中，同时还出现在 obj 对象的 [[Prototype]] 链上层，那么就会发生屏蔽。

obj 对象中包含的 name 属性会屏蔽原型链上层的所有 name 属性，因为[[Get]]操作总是会选择原型链里面最底层的 name 属性。

总结

[[Prototype]] 链理解起来并不难，设置属性也是在编程过程中一直用到的，但是屏蔽属性就比较复杂了，里面会有各种各样的情况出现。在项目开发过程中，可能随时都会遇到屏蔽属性的问题。只要缕清代码逻辑，找到原型链的关系就能避免这些特殊情况的发生了。