1. 程式人生 > >JavaScript踩坑筆記06---原型物件、prototype、隱式原型、__proto__、原型鏈

JavaScript踩坑筆記06---原型物件、prototype、隱式原型、__proto__、原型鏈

原型、prototype:

每個函式都有一個prototype屬性,這個屬性就是原型,它指向該函式對應的原型物件。這個物件包含由該函式建立的所有例項共享的屬性和方法。
舉例說明。

// 定義一個函式fn
function fn() {}

// 建立函式fn的例項
var fn1 = new fn();

// 沒有找到例項fn1中的屬性name,所以為未定義
console.log(fn1.name); // undefined
// 沒有找到例項fn1中的方法show,所以報錯
fn1.show(); // TypeError: fn1.show is not a function

// 給函式fn的原型物件新增一個屬性name
fn.prototype.name = "原型物件下面的一個屬性"; // 給函式fn的原型物件新增一個方法show fn.prototype.show = function () { console.log("Hello"); }; console.log(fn1.name); // 原型物件下面的一個屬性 fn1.show(); // Hello // 再建立一個函式fn的例項 var fn2 = new fn(); console.log(fn2.name); // 原型物件下面的一個屬性 fn1.show(); // Hello

由以上例子說明,在函式的原型物件下新增屬性和方法,會給由該函式建立的所有例項新增相同的物件和方法。
每個原型物件都有一個constructor屬性,它指向該原型物件對應的函式。
也就是說,函式、原型物件之間的關係,是一個環形關係。
畫圖說明。
在這裡插入圖片描述

隱式原型、proto

每一個物件都有一個__proto__屬性,這個屬性就是隱式原型,它指向建立該物件的建構函式對應的原型物件。所以給原型物件新增屬性和方法,那麼它對應的例項也會新增屬性和方法。
畫圖說明。
在這裡插入圖片描述

原型鏈:

原型鏈指的是,各個原型物件關係的一條鏈路。
原型物件也是物件,所以它也有__proto__屬性,它是由Object建立的,所以它的__proto__指向Object.prototype。
函式也是物件,所以它也有__proto__屬性,它是由Function建立的,所以它的__proto__指向Function.prototype,而函式Function的__proto__指向的是Function物件。
畫圖說明。
在這裡插入圖片描述


由上圖說明,所有的原型物件最終都會直接或間接的指向Object.prototype,所有的函式最終都會直接或間接的指向Function.prototype,而Function.prototype最終也會指向Object.prototype,而Object.prototype指向的是null。
總結一下,在面向物件的程式設計中,“萬物皆物件”這句話一點都沒錯。
但是在JavaScript中,“空即是物件,物件即是空”,這是JavaScript的程式設計哲學。


個人學習總結,歡迎批評指正