JS 函式的原型關係

2021-10-25 05:33:38 字數 2303 閱讀 4768

首先,我們建立了乙個user函式,和user的例項化物件。

function user() {}

let hd = new user();

console.dir(user);

console.log(hd);

然後我們分別列印user和hd,分別看看他們兩之間的原型關係。

首先我們先來看看user這個函式,我們可以看到有prototype(原型物件)和__proto__(物件原型)兩個屬性,證明了user這個函式在不同的情況扮演著不同的作用。這就好比我們在生活中,在公司的時候我們是員工,回到家我們是父母的孩子。當函式扮演著建構函式的時候,他的父級就為prototype,當函式作為物件呼叫的時候,他的父級就為__proto__指向的建構函式的原型物件。或者我們可以理解為,__proto__是服務於我們函式物件的,而prototype一般是服務於函式例項化的物件。

讓我們再來看看hd的列印結果。

此時我們可以畫一幅關係圖幫助我們理解。

console.log(user.prototype === hd.__proto__)  //true
我們可以通過列印也能證明上述圖表是成立的。

因此我們知道,每乙個物件都會有乙個屬性__proto__指向建構函式的prototype原型物件,之所以我們物件可以使用建構函式prototype原型物件的屬性和方法,就是因為物件又__proto__原型的存在。__proto__物件原型的意義就在於為物件的查詢機制提供乙個方向,或者說一條路線,但是它是乙個非標準屬性,因此實際開發中,不可以使用這個屬性,它只是內部指向原型物件prototype。

當我們明白了這三者的關係之後,我們繼續看一下user的原型物件中的__proto__物件原型指的又是什麼呢?

我們給object的原型物件新增乙個show方法,然後再列印user函式看看。

從列印結果中可以得出結論,user函式中的prototype(原型物件)與__proto__(物件原型)的指向相同,且都指向與object的原型物件。

console.log(user.prototype.__proto__ === user.__proto__.__proto__) //true
最後我們通過列印object的原型物件的物件原型指向是null

console.log(object.prototype.__proto__) //null
因此我們總結得出下圖。

最下面的倒三角就是我們剛剛的user與hd物件關係圖。

tips:我們用字面量的形式宣告變數可以理解為用建構函式宣告變數的簡寫,因此他們的物件原型都指向建構函式的原型物件。

let hd = {}; //new object

console.log(hd.__proto__ === object.prototype); //true

let str = ''; // new string

console.log(str.__proto__ === string.prototype); //true

let arr = ; //new array

console.log(arr.__proto__ === array.prototype); //true

let bool = true;

console.log(bool.__proto__ === boolean.prototype); //true

JS 判斷原型關係

1.判斷b的原型鏈中是否存在a物件 let a let b console.dir a.isprototypeof b 判斷b物件的原型鏈上是否有a物件 返回true class user class admin extends user let hd new admin console.log a...

js中函式 例項 原型屬性 建構函式的關係

1 任何函式,即function,都有乙個prototype屬性,即原型屬性。2 任何prototype屬性中都有乙個construtor屬性,指向function function test console.log test.prototype.constructor test true 3 當通...

原型 建構函式 例項 原型鏈的關係

建立物件的方法 原型 建構函式 例項 原型鏈的關係 instanceof的原理 new運算子 建立物件的方式 1 字面量 var obj1 var obj2 new object 不是字面量,但結果和字面量等同 2 建構函式 var fn function name var obj3 new fn ...