JavaScript精煉之構(gòu)造函數(shù) Constructor及Constructor屬性詳解
除了創(chuàng)建對象,構(gòu)造函數(shù)(constructor) 還做了另一件有用的事情—自動為創(chuàng)建的新對象設(shè)置了原型對象(prototype object) 。原型對象存放于 ConstructorFunction.prototype 屬性中。
例如,我們重寫之前例子,使用構(gòu)造函數(shù)創(chuàng)建對象“b”和“c”,那么對象”a”則扮演了“Foo.prototype”這個角色:
// 構(gòu)造函數(shù) function Foo(y) { // 構(gòu)造函數(shù)將會以特定模式創(chuàng)建對象:被創(chuàng)建的對象都會有"y"屬性 this.y = y; } // "Foo.prototype"存放了新建對象的原型引用 // 所以我們可以將之用于定義繼承和共享屬性或方法 // 所以,和上例一樣,我們有了如下代碼: // 繼承屬性"x" Foo.prototype.x = ; // 繼承方法"calculate" Foo.prototype.calculate = function (z) { return this.x + this.y + z; }; // 使用foo模式創(chuàng)建 "b" and "c" var b = new Foo(); var c = new Foo(); // 調(diào)用繼承的方法 b.calculate(); // c.calculate(); // // 讓我們看看是否使用了預(yù)期的屬性 console.log( b.__proto__ === Foo.prototype, // true c.__proto__ === Foo.prototype, // true // "Foo.prototype"自動創(chuàng)建了一個特殊的屬性"constructor" // 指向a的構(gòu)造函數(shù)本身 // 實例"b"和"c"可以通過授權(quán)找到它并用以檢測自己的構(gòu)造函數(shù) b.constructor === Foo, // true c.constructor === Foo, // true Foo.prototype.constructor === Foo // true b.calculate === b.__proto__.calculate, // true b.__proto__.calculate === Foo.prototype.calculate // true );
上述代碼可表示為如下的關(guān)系:
構(gòu)造函數(shù)與對象之間的關(guān)系
上述圖示可以看出,每一個object都有一個prototype. 構(gòu)造函數(shù)Foo也擁有自己的__proto__, 也就是Function.prototype, 而Function.prototype的__proto__指向了Object.prototype. 重申一遍,F(xiàn)oo.prototype只是一個顯式的屬性,也就是b和c的__proto__屬性。
這個問題完整和詳細(xì)的解釋有兩個部分:
面向?qū)ο缶幊?一般理論(OOP. The general theory),描述了不同的面向?qū)ο蟮姆妒脚c風(fēng)格(OOP paradigms and stylistics),以及與ECMAScript的比較。
面向?qū)ο缶幊?ECMAScript實現(xiàn)(OOP. ECMAScript implementation), 專門講述了ECMAScript中的面向?qū)ο缶幊獭?br /> 現(xiàn)在,我們已經(jīng)了解了基本的object原理,那么我們接下去來看看ECMAScript里面的程序執(zhí)行環(huán)境[runtime program execution]. 這就是通常稱為的“執(zhí)行上下文堆棧”[execution context stack]。每一個元素都可以抽象的理解為object。你也許發(fā)現(xiàn)了,沒錯,在ECMAScript中,幾乎處處都能看到object的身影。
下面給大家介紹JavaScript constructor 屬性詳解
對象的constructor屬性用于返回創(chuàng)建該對象的函數(shù),也就是我們常說的構(gòu)造函數(shù)。
在JavaScript中,每個具有原型的對象都會自動獲得constructor屬性。除了arguments、Enumerator、Error、Global、Math、RegExp、Regular Expression等一些特殊對象之外,其他所有的JavaScript內(nèi)置對象都具備constructor屬性。例如:Array、Boolean、Date、Function、Number、Object、String等。所有主流瀏覽器均支持該屬性。
語法
object.constructor
返回值
對象的constructor屬性返回創(chuàng)建該對象的函數(shù)的引用。
示例&說明
以下代碼中的[native code],表示這是JavaScript的底層內(nèi)部代碼實現(xiàn),無法顯示代碼細(xì)節(jié)。
// 字符串:String() var str = "張三"; document.writeln(str.constructor); // function String() { [native code] } document.writeln(str.constructor === String); // true // 數(shù)組:Array() var arr = [1, 2, 3]; document.writeln(arr.constructor); // function Array() { [native code] } document.writeln(arr.constructor === Array); // true // 數(shù)字:Number() var num = 5; document.writeln(num.constructor); // function Number() { [native code] } document.writeln(num.constructor === Number); // true // 自定義對象:Person() function Person(){ this.name = "CodePlayer"; } var p = new Person(); document.writeln(p.constructor); // function Person(){ this.name = "CodePlayer"; } document.writeln(p.constructor === Person); // true // JSON對象:Object() var o = { "name" : "張三"}; document.writeln(o.constructor); // function Object() { [native code] } document.writeln(o.constructor === Object); // true // 自定義函數(shù):Function() function foo(){ alert("CodePlayer"); } document.writeln(foo.constructor); // function Function() { [native code] } document.writeln(foo.constructor === Function); // true // 函數(shù)的原型:bar() function bar(){ alert("CodePlayer"); } document.writeln(bar.prototype.constructor); // function bar(){ alert("CodePlayer"); } document.writeln(bar.prototype.constructor === bar); // true
- js核心基礎(chǔ)之構(gòu)造函數(shù)constructor用法實例分析
- 不用構(gòu)造函數(shù)(Constructor)new關(guān)鍵字也能實現(xiàn)JavaScript的面向?qū)ο?/a>
- Javascript的構(gòu)造函數(shù)和constructor屬性
- javascript prototype的深度探索不是原型繼承那么簡單
- JavaScript為對象原型prototype添加屬性的兩種方式
- js中使用使用原型(prototype)定義方法的好處詳解
- javascript prototype原型詳解(比較基礎(chǔ))
- JavaScript中的原型prototype完全解析
- JS構(gòu)造函數(shù)與原型prototype的區(qū)別介紹
- js使用原型對象(prototype)需要注意的地方
- js構(gòu)造函數(shù)constructor和原型prototype原理與用法實例分析
相關(guān)文章
innerText innerHTML的用法以及注意事項 [推薦]
我們常常需要使用另外一些對象的屬性來實現(xiàn)動態(tài)改變其中的文本,它們就是:innerText,outerText,innerHTML,outerHTML,千萬要注意它們的大小寫,因為錯一點您就得不到預(yù)期的效果了。2009-05-05JS前端知識點總結(jié)之頁面加載事件,數(shù)組操作,DOM節(jié)點操作,循環(huán)和分支
這篇文章主要介紹了JS前端知識點總結(jié)之頁面加載事件,數(shù)組操作,DOM節(jié)點操作,循環(huán)和分支,結(jié)合實例形式總結(jié)分析了JS頁面加載事件,數(shù)組操作,DOM節(jié)點操作,循環(huán)和分支所涉及的相關(guān)事件、函數(shù)及操作注意事項,需要的朋友可以參考下2019-07-07JavaScript返回0-1之間隨機(jī)數(shù)的方法
這篇文章主要介紹了JavaScript返回0-1之間隨機(jī)數(shù)的方法,涉及javascript中Math對象random方法的使用技巧,非常具有實用價值,需要的朋友可以參考下2015-04-04高性能WEB開發(fā) flush讓頁面分塊,逐步呈現(xiàn) flush讓頁面分塊,逐步呈現(xiàn)
在處理比較耗時的請求的時候,我們總希望先讓用戶先看到部分內(nèi)容,讓用戶知道系統(tǒng)正在進(jìn)行處理,而不是無響應(yīng)。2010-06-06JavaScript實現(xiàn)給數(shù)字添加千位分隔符
這篇文章主要為大家詳細(xì)介紹了JavaScript如何實現(xiàn)給數(shù)字添加千位分隔符,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2023-11-11JS實現(xiàn)CheckBox復(fù)選框全選全不選功能
在網(wǎng)站的管理后臺應(yīng)用此功能居多,如一次性處理多個產(chǎn)品,或?qū)ξ恼碌膭h除對產(chǎn)品的下架等處理,一條一條的點顯然有一些麻煩,如果能每一行放一個checkbox,然后統(tǒng)一處理就好辦的多了,今天我就用簡單的篇幅來講解一下這個功能的實現(xiàn)原理和實現(xiàn)過程。2015-05-05