快捷導(dǎo)航

JavaScript精煉之構(gòu)造函數(shù) Constructor及Constructor屬性詳解

更新時(shí)間：2015年11月05日 11:17:29 投稿：mrr

對(duì)象的constructor屬性用于返回創(chuàng)建該對(duì)象的函數(shù)，也就是我們常說的構(gòu)造函數(shù)，除了創(chuàng)建對(duì)象，構(gòu)造函數(shù)(constructor) 還做了另一件有用的事情—自動(dòng)為創(chuàng)建的新對(duì)象設(shè)置了原型對(duì)象(prototype object)

除了創(chuàng)建對(duì)象，構(gòu)造函數(shù)(constructor) 還做了另一件有用的事情—自動(dòng)為創(chuàng)建的新對(duì)象設(shè)置了原型對(duì)象(prototype object) 。原型對(duì)象存放于 ConstructorFunction.prototype 屬性中。

例如，我們重寫之前例子，使用構(gòu)造函數(shù)創(chuàng)建對(duì)象“b”和“c”，那么對(duì)象”a”則扮演了“Foo.prototype”這個(gè)角色：

// 構(gòu)造函數(shù)
function Foo(y) {
 // 構(gòu)造函數(shù)將會(huì)以特定模式創(chuàng)建對(duì)象：被創(chuàng)建的對(duì)象都會(huì)有"y"屬性
 this.y = y;
}
// "Foo.prototype"存放了新建對(duì)象的原型引用
// 所以我們可以將之用于定義繼承和共享屬性或方法
// 所以，和上例一樣，我們有了如下代碼：
// 繼承屬性"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"自動(dòng)創(chuàng)建了一個(gè)特殊的屬性"constructor"
 // 指向a的構(gòu)造函數(shù)本身
 // 實(shí)例"b"和"c"可以通過授權(quán)找到它并用以檢測(cè)自己的構(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ù)與對(duì)象之間的關(guān)系

上述圖示可以看出，每一個(gè)object都有一個(gè)prototype. 構(gòu)造函數(shù)Foo也擁有自己的__proto__, 也就是Function.prototype, 而Function.prototype的__proto__指向了Object.prototype. 重申一遍，F(xiàn)oo.prototype只是一個(gè)顯式的屬性，也就是b和c的__proto__屬性。

這個(gè)問題完整和詳細(xì)的解釋有兩個(gè)部分：

面向?qū)ο缶幊?一般理論(OOP. The general theory)，描述了不同的面向?qū)ο蟮姆妒脚c風(fēng)格(OOP paradigms and stylistics)，以及與ECMAScript的比較。

面向?qū)ο缶幊?ECMAScript實(shí)現(xiàn)(OOP. ECMAScript implementation), 專門講述了ECMAScript中的面向?qū)ο缶幊獭?br /> 現(xiàn)在，我們已經(jīng)了解了基本的object原理，那么我們接下去來看看ECMAScript里面的程序執(zhí)行環(huán)境[runtime program execution]. 這就是通常稱為的“執(zhí)行上下文堆?！盵execution context stack]。每一個(gè)元素都可以抽象的理解為object。你也許發(fā)現(xiàn)了，沒錯(cuò)，在ECMAScript中，幾乎處處都能看到object的身影。

下面給大家介紹JavaScript constructor 屬性詳解

對(duì)象的constructor屬性用于返回創(chuàng)建該對(duì)象的函數(shù)，也就是我們常說的構(gòu)造函數(shù)。

在JavaScript中，每個(gè)具有原型的對(duì)象都會(huì)自動(dòng)獲得constructor屬性。除了arguments、Enumerator、Error、Global、Math、RegExp、Regular Expression等一些特殊對(duì)象之外，其他所有的JavaScript內(nèi)置對(duì)象都具備constructor屬性。例如：Array、Boolean、Date、Function、Number、Object、String等。所有主流瀏覽器均支持該屬性。

語法

object.constructor

返回值

對(duì)象的constructor屬性返回創(chuàng)建該對(duì)象的函數(shù)的引用。

示例&說明

以下代碼中的[native code]，表示這是JavaScript的底層內(nèi)部代碼實(shí)現(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
// 自定義對(duì)象：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對(duì)象：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

您可能感興趣的文章: