JavaScript 原型链

一张图看懂javascript原型链

属性

• prototype：获取函数的原型对象，函数特有的属性
• __proto__：获取对象的构造函数的原型对象，所有的JS对象都有该属性
• constructor：获取对象的构造函数，所有的JS对象都有该属性

说明

javascript一切皆对象，比如"JS原型链“图中列出的函数、原型对象、对象实例

示例

// 示例代码，下面的例子会用到
function Foo () { ... }
const obj = {}
const fn = function () { ... }
const foo = new Foo()

__proto__：获取指定对象的构造函数的原型对象

//  函数对象，所有函数对象的构造函数的原型对象都指向"Function.prototype"
Object.__proto__ === Function.prototype  =>  true
Function.__proto__ === Function.prototype  =>  true
Foo.__proto__ === Function.prototype  =>  true

// 原型对象，原型对象的构造函数的原型对象都是"Object.prototype"
foo.prototype.__proto__ === Object.prototype  =>  true
Function.prototype.__proto__ === Object.prototype  =>  true

// 实例对象，重点在于找到实例对象的构造函数是谁，参考下面的"constructor"部分
obj.__proto__ === Object.prototype  =>  true
fn.__proto__ === Function.prototype  =>  true
foo.__proto__ === Foo.prototype  =>  true

constructor：获取指定对象的构造函数

// 函数，所有函数的”constructor”属性都指向”Function“
Object.constructor === Function  =>  true
Function.constructor === Function  => true
Foo.constructor === Function  =>  true

// 原型对象
Object.prototype.constructor === Object  =>  true
Function.prototype.constructor === Function  => true
Foo.prototype.constructor  === Foo  =>  true

// 实例对象
obj.constructor === Object  =>  true
fn.constructor === Function  => true
foo.constructor === Foo  =>  true

prototype，函数特有的属性，获取指定函数的原型对象，比如：

Object函数的原型对象 => Object.prototype

Function函数的原型对象 => Function.prototype

Foo函数的原型对象 => Foo.prototype