一句话读懂原型 、原型链(__proto__、prototype)

162 阅读2分钟

先明确几个概念

  • prototype: 原型,函数的一个属性,它本身就是一个对象 {}
  • __proto__: 原型链接器,通过 __proto__ 可以把互相继承的对象的原型链接起来

原型、原型链

__proto__

__proto__ 是每个对象都具有的属性,它指向该对象所继承的原型对象。

或者可以这样说: 对象的 __proto__ 指向对象的构造函数的原型对象

  • 例 1.1
function Person() {

}

let person1 = new Person();
person1.__proto__ === Person.prototype		// true

/**
 * 解释:
 * - person1 对象具有__proto__属性和 Person 构造函数。
 * - Person 函数的原型对象就是 Person.prototype
 * - 所以 person1对象的原型(person1.__proto__)指向 person1 的构造函数(Person)的原型对象(Person.prototype)
 */

prototype 是函数才有的属性,它指向该函数的原型对象(Person.prototype

原型链

MDN上的总结:每个实例对象(object)都有一个私有属性(称之为 __proto__)指向它的构造函数的原型对象(prototype)。

该原型对象也有一个自己的原型对象(__proto__),层层向上直到一个对象的原型对象为 null,通过__proto__一层一层像链条一样向上链接原型对象,我们可以称这条链为原型链。

几乎所有 JavaScript 中的对象都是位于原型链顶端的 Object 的实例

延续 例 1.1:

function Person() {

}
let person1 = new Person();

console.log(person1.__proto__ === person1.constructor.prototype)  // true
console.log(person1.constructor.prototype === Person.prototype)	  // true

console.log(person1.__proto__.__proto__ === Object.prototype)	  // true
console.log(Person.prototype.__proto__ === Object.prototype)	  // true

console.log(person1.__proto__.__proto__.__proto__ === null)	      // true
console.log(Object.prototype.__proto__ === null)				  // true

下一篇文字

下一篇文章将讲述一下JavaScript中创建对象有哪些方式?这些方式又存在的哪些优缺点?

《JavaScript中创建对象的多种方式和优缺点》

写在最后

我是 AndyHu,目前暂时是一枚前端搬砖工程师。

文中如有错误,欢迎在评论区指正,如果这篇文章帮到了你,欢迎点赞和关注呀😊

未经许可禁止转载💌

speak less,do more.