一文搞懂 构造函数 实例 原型 原型链 与他们的关系

构造函数、实例、原型之间的关系

概念

• 构造函数：构造函数就是一个函数，配合new可以新建对象。
• 实例：通过构造函数实例化出来的对象我们把它叫做构造函数的实例。一个构造函数可以有很多实例。
• 原型：每一个构造函数都有一个prototype属性，指向另一个对象。这个对象的所有属性和方法，都会被构造函数的实例继承。

通过构造函数创建的对象，自带一个__proro__属性，这个属性指向了构造函数的prototype属性，也就是原型对象。默认情况下，原型对象中值包含了一个属性：constructor，该属性指向了当前的构造函数。所以构造函数、实例和原型之间的关系如下图所示

demo

由于实例可以继承原型上的所有属性和方法，这也就意味着，我们可以把所有对象实例需要共享的属性和方法直接定义在prototype对象上。

// 声明一个自定义构造函数
function Person(name, age) {
  this.name = name
  this.age = age
}

// 在原型中添加一个type属性和sayName方法
Person.prototype.type = 'human'
Person.prototype.sayName = function () {
  console.log(this.name)
}

var p1 = new Person()
var p2 = new Person()

console.log(p1.sayName === p2.sayName) // => true

原型链

概念

任何一个对象，都有原型对象，原型对象本身又是一个对象，所以原型对象也有自己的原型对象，这样一环扣一环就形成了一个链式结构，我们把这个链式结构称为：原型链。

属性查找原则

• 获取操作
  • 在自身上查找
  • 自身没有，则根据__proto__对应的原型去找
  • 如果__proto__没有，则会一直找到Object.prototype
• 修改操作
  • 只会修改对象自身的属性，如果自身没有这个属性，那么就会添加这个属性，并不会修改原型中的属性。

原型链图解

只要是函数，就有prototype属性。
只要是对象，就有__proto__属性。
在 JS 中，函数也是对象，因此函数既有prototype属性，又有__proto__属性。
所有的函数（包括Function构造函数）都是Function的实例，因此函数.__proro__ === Function.prototype，Function.__proto__ === Function.prototype。
只要是原型，都属于对象，因此原型.__proto__ === Object.prototype。
需要注意的是，Object.prototype也是原型，但是Object.prototype.__proto__ === null，也就是原型链找到链头了。