国产探花免费观看_亚洲丰满少妇自慰呻吟_97日韩有码在线_资源在线日韩欧美_一区二区精品毛片,辰东完美世界有声小说,欢乐颂第一季,yy玄幻小说排行榜完本

首頁 > 編程 > JavaScript > 正文

理解Javascript_11_constructor實現原理

2019-11-21 00:11:51
字體:
來源:轉載
供稿:網友
constructor是什么

簡單的理解,constructor指的就是對象的構造函數。請看如下示例:
復制代碼 代碼如下:

function Foo(){};
var foo = new Foo();
alert(foo.constructor);//Foo
alert(Foo.constructor);//Function
alert(Object.constructor);//Function
alert(Function.constructor);//Function

對于foo.constructor為Foo,我想應該很好理解,因為foo的構造函數為Foo。對于Foo、Object、Function的構造函數為Function,我想也沒什么好爭議的。(因為Foo,Object,Function都是函數對象,又因為所有的函數對象都是Function這個函數對象構造出來,所以它們的constructor為Function,詳細請參考《js_函數對象》)

Prototype與Constructor的關系

復制代碼 代碼如下:

function Dog(){}
alert(Dog === Dog.prototype.constructor);//true

在 JavaScript 中,每個函數都有名為“prototype”的屬性,用于引用原型對象。此原型對象又有名為“constructor”的屬性,它反過來引用函數本身。這是一種循環引用,如圖:

constructor屬性來自何方
我們來看一下Function構造String的構造過程:

注:Function構造任何函數對象的過程都是一樣的,所以說不管是String,Boolean,Number等內置對象,還是用戶自定義對象,其構造過程都和上圖一樣。這里String只是一個代表而矣!
圖中可以看出constructor是Function在創建函數對象時產生的,也正如'prototype與constructor的關系'中講的那樣,constructor是函數對象prototype鏈中的一個屬性。即String=== String.prototype.constructor。

我還想用一段代碼來證明一下,理論是正確的:
復制代碼 代碼如下:

function Person(){}
var p = new Person();
alert(p.constructor);//Person
alert(Person.prototype.constructor);//Person
alert(Person.prototype.hasOwnProperty('constructor'));//true
alert(Person.prototype.isPrototypeOf(p));//true
alert(Object.prototype.isPrototypeOf(p));//true
alert(Person.prototype == Object.prototype);//false

到現在,你會發現這和前面《原型鏈的實現原理》中的默認prototype指向Object.prototype有沖突,顯然當時的理論不是很全面。

特別的Object
用心的讀者可能會提出這樣一問題,你這一套理論并不能適用于Object。因為以下的代碼和你上面的理論是沖突的:
復制代碼 代碼如下:

alert(Object.prototype.hasOwnProperty('constructor'));//true
alert(Object.prototype.hasOwnProperty('isPrototypeOf'));//true,如果按上面的理論,這里應該返回false

真的是這樣嗎?不是!那我們來看一下特殊的Object是如何處理的:

你會發現,這圖的原理和上面一張圖的原理是一樣的。這就能正確解釋Object.prototype.hasOwnProperty('isPrototypeOf')為true!

constructor探究
復制代碼 代碼如下:

function Animal(){}
function Person(){}
var person = new Person();
alert(person.constructor); //Person

根據上一節的內容,你能正確的理解這段代碼的結果嗎?思考后,看一下其內存表示:

這張圖明確有表明了Function構造Animal和Person的過程。同時也顯示了實例person與Person的關系。

再深入一點,代碼如下:
復制代碼 代碼如下:

function Animal(){}
function Person(){}
Person.prototype = new Animal();
var person = new Person();
alert(person.constructor); //Animal

這個時候,person的構造函數成了Animal,怎么解釋?

注:圖中的虛線表示Person默認的prototype指向(只作參考的作用)。但是我們將Person.prototype指向了new Animal。
此時,Person的prototype指向的是Animal的實例,所以person的constructor為Animal這個構造函數。

結論:constructor的原理非常簡單,就是在對象的原型鏈上尋找constructor屬性。

注:如果你無法正確理解本文內容,請回顧前面章節的內容。
發表評論 共有條評論
用戶名: 密碼:
驗證碼: 匿名發表
主站蜘蛛池模板: 仙游县| 安图县| 信宜市| 自治县| 始兴县| 连云港市| 罗甸县| 曲水县| 宿松县| 新河县| 汕头市| 襄樊市| 日喀则市| 都匀市| 乌兰县| 文登市| 锡林郭勒盟| 奎屯市| 保靖县| 象州县| 巴里| 永宁县| 东辽县| 凉城县| 兴山县| 连山| 游戏| 潞西市| 临洮县| 响水县| 民县| 长泰县| 奉化市| 隆林| 郯城县| 巴塘县| 习水县| 镇安县| 乐平市| 嵊泗县| 乐平市|