【详解】原型对象和原型链

原型对象和原型链

仅供参考，欢迎指正。

原型对象

• 我们每创建一个函数，浏览器就会在内存中创建一个对象A（函数的原型对象）。而解析器会向函数添加一个属性：prototype，这个属性指向对象A。这个对象A就是函数的原型对象，简称为函数的原型。

• 函数的原型对象中有属性constructor，指向这个函数

分类

• 显示原型prototype：每个函数function都有一个prototype。这是在定义函数时自动添加的，默认值是一个空的object对象。（1）
• 隐式原型__ proto __：在创建对象时自动添加的（2），是实例对象的原型。默认值为构造函数的prototype属性值。
• 一个实例对象的__ proto __保存的是构造这个对象的构造函数的prototype。（3）

属性

①当函数以构造函数的形式调用时，它所创建的对象中都会有一个隐含的属性，指向该构造函数的原型对象。我们可以通过__ proto __来访问这个对象以及对象中的属性（4）

②函数的原型对象就相当于一个公共区域，所有由同一个构造函数创建的的实例对象都可以访问到这个原型对象

③当我们访问对象的属性或方法时，首先会在对象自身中寻找，如果有则直接使用；如果没有则会去原型对象中寻找（5）

• 通过实例对象只能读取原型中的属性a的值，而不能修改原型中的属性a的值。（6）
  • test2.a= “这是新的a”; 并不是修改了原型中的值，而是在test2对象中给添加了一个属性a，赋值为”这是新的a“。

检查属性

①in：检查对象中是否有某个属性（7）

• 如果对象中没有，但是原型中有，也会返回true

• console.log(“a” in test1)

②hasOwnProperty():检查对象自身中是否有该属性（8）

• 该方法只有当对象自身中含有该属性时才返回true

• 对象自身没有，原型中有则返回false

• console.log(test1.hasOwnProperty(“a”))

③instanceof（判断对象的具体类型）的判断方法：（9）

• 表达式：A instanceof B
• 判断方法：如果B函数的显示原型在A对象的原型链上，就返回true；否则返回false

原型链

作用：查找对象的属性

当我们访问一个对象的属性时：

• 先在自身属性中查找，找到返回

• 如果没有，就再沿着__ proto __这条链向上查找，找到就返回

• 如果最终没有找到，则返回undefined

• 寻找对象的时候若原型也没有，则去原型的原型中寻找，一直找到null

• 读取属性值时，会到原型链中去查找

• 设置属性值时，不会查找原型链。如果当前对象中没有此属性，直接添加并设置其值

————————————————————————————————————————

Fun和Function

JS支持用Function函数创建一个新的Function对象，也就是函数对象。

• 我们用于构造test实例对象的Fun函数也是由Function这个函数构造而来的，Fun函数也属于Function的一个实例对象
• Fun函数作为Function的实例对象，Function就是它的构造函数。那么此时，就可以将Function构造函数类比于刚刚的Fun，而Fun又类比于刚刚的实例对象test1
• 那么，Function这个函数又由谁构造而来呢？（10）
  

————————————————————————————————————————

Object

JavaScript中的所有对象都来自 Object；所有对象从Object.prototype继承方法和属性

const obj = {};

const obj = new Object( );

• 构造函数Fun的原型对象本质上也是一个对象，是一个Object的空对象，所以它也有原型（11）

• 原型对象也是对象，所以它也有原型。由于Fun的原型对象是由Object构造出来的对象，所以它的__ proto __指向Object的原型对象

• 原型链的尽头是Object.prototype，因为Object.prototype的__ proto __为null
  

• 那么对于构造出Fun原型对象的构造函数Object，也有原型对象。如果再往上研究，就和上面提到的Fun和Function的关系一致了。
  

总的图解：