js【详解】原型 vs 原型链

原型

• 每个 class 都有显示原型 prototype
• 每个实例都有隐式原型 __proto__
• 实例的 __proto__ 指向对应 class 的 prototype

如下范例： class Student 创建了 实例 xialuo

• 获取属性 xialuo.name 或执行方法 xialuo.sayhi()时，先在自身属性和方法寻找，如果找不到则自动去_proto_ 中查找

原型链

【下图需能手绘！】

• 通过 hasOwnProperty 可以判断某属性是否为实例自己的属性
  

实战 – 绘制原型链图

范例1

const obj1 = {
  a: 10,
};

Object.prototype.__proto__ === null   // true
obj1.__proto__.__proto__ === null     // true
obj1.__proto__ === Object.prototype   // true

实例的隐式原型指向类的显式原型

范例3

const obj1 = {
  a: 10,
};

const obj2 = Object.create(obj1);

Object.create() 的参数为对象实例时，返回一个以该对象实例为隐式原型的对象。

obj2.__proto__ === obj1       // true

范例3

const obj3 = Object.create(null);

Object.create() 的参数为 null 时，返回一个无原型也无属性的空对象。

【考题】new Object() 和 Object.create() 的区别

• new Object() 等同于 {} ，其隐式原型是 Object.prototype
• Object.create()

• 参数为 null 时，返回一个无原型也无属性的空对象
• 参数为对象实例时，返回一个以该对象实例为隐式原型的对象。

const obj1 = {
  a: 10,
};

const obj2 = new Object({
  a: 10,
});

const obj3 = new Object(obj1);

console.log(obj1 === obj2); // false
console.log(obj1 === obj3); // true