1. 程式人生 > >JS中object與constructor的分析

JS中object與constructor的分析

引入 prototype 實例化 不難 屬性 png const 出現 tor

什麽是constructor屬性?它來自哪裏?又將會指向何處? 什麽是constructor屬性? constructor是構造函數屬性。 它來自哪裏? 其實constructor屬性是來自 prototy原型屬性 所指向的那個對象的屬性,如果不明白這裏的“那個對象”具體指的是哪個對象,可以看看我上一章講的javascript面向對象——prototype屬性(原型屬性),裏面有著詳細的講解。 又將指向何處? 從constructor屬性的字面意思我們就不難看出,它指向的永遠都是構造函數。 例如: 我們看看下面代碼: function myfile(name,age){
this.webname = name;
this.age = age;
}
myfile.prototype.getname = function () {
return this.age;
}
var myfile1 = new myfile("zhang",3);
console.info(myfile1.constructor);
console.info(myfile.constructor);
console.info(myfile.prototype.constructor);
這裏我打印了在3種不同情況下所輸出的constructor構造函數屬性的內容,我將谷歌瀏覽器控制臺打印出的結果截圖如下: 技術分享圖片


是的正如我們看見的為什麽console.info(myfile1.constructor);打印出的結果與console.info(myfile.prototype.constructor);打印出的結果會是一樣的,而console.info(myfile.constructor);打印出的結果卻是?
Function() { [native code] },其實這個很好理解,如果你看了我的上一章講解的javascript面向對象——prototype屬性(原型屬性)那麽我相信這個地方就會很容易理解,其實我們首先要清楚constructor構造函數屬性,它是誰的屬性?它是原型屬性prototype所指向的那個對象的屬性。那麽在這個對象中這個屬性它又指向誰呢!?它指向的是構造函數也就是上面代碼中的function
myfile(name,age){this.webname = name; this.age = age;}這一部分,其值就是這個構造函數中的對象。
那麽肯定會有人疑問,既然
constructor構造函數屬性 指向的是是構造函數,那麽打印出的結果是構造函數這個可以理解但是為什麽console.info(myfile.prototype.constructor);打印的也是構造函數呢!?它指向的可不是構造函數,是的我們知道實例化對象指向的一直都是prototype原型屬性所指向的對象。如果想解決這個問題,那麽我們首先應該弄明白兩個問題。
1、實例化對象到底指向的是誰?
2、實例化對象到底繼承的是誰?
首先我們還是用一個實例來引入,用圖片看結果然後在總結:
代碼部分:
function myfile(name,age){
this.webname = name;
this.age = age;
}
myfile.prototype.getname = function () {
return this.age;
}
var myfile1 = new myfile("zhang",3);
console.info(myfile1.constructor);
打印結果圖片如下: 總結:代碼執行的結果在控制臺上顯示的內容如上圖,打印出的是構造函數的代碼也就是代碼部分 function myfile(name,age){
this.webname = name;
this.age = age;
}
的的內容,有人肯定會想,哎!!!這不很明顯嘛,實例化對象指向的就是構造函數啊!繼承的也是構造函數。
那麽我們來運行另外一句代碼:console.info(myfile1.getname());打印出的結果卻是3。 什麽情況在上面的構造函數中並沒有getname()這個函數對象啊!為什麽會打印出結果3呢!我們可以仔細看看getname()這個對象是在什麽地方出現的,是的它是通過原型屬性直接定義的,通過上面的兩次打印我們可以很明顯的發現實例化對象不僅能夠打印出構造函數還能夠打印出通過原型鏈來創建的屬性以及屬性值,換句話說,也就是實力化的對象繼承的對象並不全是構造函數,而是指向了一個我們看不見的對象,這個對象裏面包含的有構造函數,還有通過原型鏈來創建的屬性,那麽這個對象是什麽呢!其實我們在創建構造函數的時候,每個構造函數都會有一個prototype原型屬性,這個原型屬性會指向一個我們看不見的對象,我們可以通過原型屬性來創建固定不變的屬性並賦值,如:myfile.prototype.getname
= function () {return this.age;}這個時候原型屬性所指向的對象不僅包含了構造函數還包含了通過原型屬性所創建出來的一些屬性。 上面兩個問題的答案就出來了: 1、實例化對象到底指向的是誰? 答:實例化對象指向的永遠是prototype原型屬性所指向的那個對象,是通過實例化對象的內部屬性[[prototype]]來實現的。
2、實例化對象到底繼承的是誰? 答:其實實例化對象繼承的還是prototype原型所指向的那個虛擬的對象。 總結constructor(構造函數屬性): 這個時候我們在來看看 console.info(myfile1.constructor); console.info(myfile.constructor); console.info(myfile.prototype.constructor);三個為什麽第一個跟第三個的值是一樣的但是第二個會出現
? Function() { [native code] } 。 console.info(myfile.prototype.constructor);其實就是在告訴計算機我們要的結果是prototype原型屬性所指向的那個對象中的構造函數,而因為console.info(myfile1.constructor);本來就是直接繼承的就是prototype原型屬性所指的對象所以這兩個命令打印出的結果自然也都是來之那個虛擬的對象中,這就是為什麽這兩個代碼所執行出來的結果是一樣的原因。至於console.info(myfile.constructor);執行出來的結果是?
Function() { [native code] } 就更好理解了,native code
的意思就是 本機代碼 其實意思就是告訴我們,我們所執行的console.info(myfile.constructor);代碼就是構造函數它自己本身,不能所執行這條代碼會報錯,只是控制臺會更智能一些的告訴我們,我們需要打印的就是它自己而已。 現在你知道了constructor構造函數屬性是屬於誰的屬性嗎? 答: 1、它是prototype原型屬性所指向的那個虛擬對象的屬性。 2、它是實例化對象的屬性。 從上面的例子中我們也能推斷出上面的兩條答案是成立的。

JS中object與constructor的分析