JavaScript踩坑筆記06---原型物件、prototype、隱式原型、__proto__、原型鏈
阿新 • • 發佈:2018-11-26
原型、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的程式設計哲學。
個人學習總結,歡迎批評指正