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