「Learning」JavaScript深入之从原型到原型链

学习内容：JavaScript深入之从原型到原型链

Learning Card

• 构造函数创建对象
  • prototype属性
  • __proto__属性
  • constructor属性
• 实例与原型
  • 属性逐级向上找
• 原型的原型
  • 所有实例原型的__proto__最终都指向Object.prototype
• 原型链
  • 父类的prototype===实例的__proto__
  • Object.prototype.__proto__ === null

原型链三大定律

function Person() {}
var person = new Person();

//1. 父元素的prototype 等于 子元素的__proto__
Person.prototype === person.__proto__  //true
//2. 父元素原型的constructor指向自己
Person.prototype.constructor === Perosn  //true
//3. 获取对象的原型方法
Object.getPrototypeOf(person) === Person.prototype  //true

---

构造函数创建对象

prototype

• 每个函数都有prototype属性

• 函数的prototype属性指向调用这个构造函数创建是实例的原型

• 每个JS对象（除了null）在创建时都会关联两一个对象，这个对象就是原型

• 每个对象都会从原型继承属性

__proto__

• __proto__属性指向对象的原型
• 父元素的prototype指向子元素的__proto__

constructor

• 每个原型都有一个constructor属性
• constructor属性指向关联的构造函数

实例与原型

• 读取属性时，从实例开始查找，没有就向上找到原型，再向上找到原型的原型，以此类推，一直找到最顶层为止

原型的原型

• 原型对象都是通过Object创建的
• 所有实例原型的__proto__最终都指向Object.prototype

原型链

• Object.prototype.__proto__ === null
• 查找属性最终都查到Object.prototype就停止查找了

注意点

constructor属性

Son.constructor === Father

因为实例本身没有constructor属性，当读不到时，会向Father.prototype查找，所以实际上是

person.constructor === Person.prototype.constructor;  //true
Person.prototype.constructor === Person;   //true
person.constructor === Person;   //true

__proto__属性

__proto__属性是一个非标准的访问原型的方法，当使用obj.__proto__时，可以理解成返回了Object.getPrototypeOf(obj)