JavaScript prototype屬性深入介紹
更新時間:2012年11月27日 09:43:58 作者:
每個函數(shù)創(chuàng)建時默認帶有一個prototype屬性,其中包含一個constructor屬性,和一個指向Object對象的隱藏屬性,需要的朋友可以參考下
每個函數(shù)創(chuàng)建時默認帶有一個prototype屬性,其中包含一個constructor屬性,和一個指向Object對象的隱藏屬性__proto__。constructor屬性的值為該函數(shù)的對象。在一個函數(shù)前面加上new來調(diào)用,則會創(chuàng)建一個隱藏連接到該函數(shù)prototype成員的新對象(由__proto__屬性來鏈接),同時函數(shù)的this將會被綁定到那個新對象上。
函數(shù)總是返回一個值;如果沒有指定返回值,就返回undefined;如果當做構(gòu)造函數(shù)來調(diào)用,且返回值不是對象,則返回this(該新對象);如果返回值是對象,則它作為構(gòu)造函數(shù)是沒有意義的!
[javascript]
function A(){
this.p = 'haha';
return {p:'heihei'};
}
var a = new A();
function A(){
this.p = 'haha';
return {p:'heihei'};
}
var a = new A();
alert(a.p);//顯示'heihei',與var a = A();的效果一樣
函數(shù)A內(nèi)部直接調(diào)用一個函數(shù)B,B的this綁定到全局對象而不是其外部函數(shù)A,這是JS設(shè)計的一個錯誤。我們不得不用別的方式來解決這個問題,比如在A中用一個變量(通常是that)來保存A的this作用域的引用。
JS函數(shù)擁有一個length屬性,表示函數(shù)定義時指定的形參的個數(shù)。
函數(shù)的arguments屬性包含了調(diào)用函數(shù)時傳入的所有參數(shù),而不管函數(shù)的聲明中是否定義了這些形參;arguments不是數(shù)組,只是一個“類似數(shù)組”的對象(在函數(shù)中運行arguments instanceof Array;返回false)??梢酝ㄟ^Array.prototype.slice.apply(arguments)將其轉(zhuǎn)化為JS數(shù)組。
給JavaScript函數(shù)的原型增加方法(method),則所有的(構(gòu)造)函數(shù)都可以用了!例如,可以給JS函數(shù)的構(gòu)造者 Function 的原型增加一個method方法,則包括Object、Number等構(gòu)造函數(shù)在內(nèi)的所有函數(shù)都繼承了該方法,這是很強大的:
[javascript]
Function.prototype.method = function(name, func){
this.prototype[name] = func;
return this;
};
Function.prototype.method = function(name, func){
this.prototype[name] = func;
return this;
};
這樣,調(diào)用Object.method方法,就可以為所有的JS對象(包括Function對象)增加新的方法,調(diào)用Number.method方法,可以為所有的數(shù)值類型增加新的方法,下面一條就是這樣的一個例子。 注意Object、Number等類型的對象此時并沒有繼承method方法。如果想達到這樣的目的,可以運行類似下面的語句:
[javascript]
Object.method('method',Object.method);
Object.method('method',Object.method);
我們可以通過修改數(shù)值類型的原型,來給數(shù)值類型增加新的方法,這里我們借用上一條中提到的method方法來給Number的原型增加一個negative方法:
[javascript]
Number.method(negative,function(){
return 0–this;
})
Number.method(negative,function(){
return 0–this;
})
調(diào)用方法的時候稍微有一點繞。在JavaScript的語法中,數(shù)字后面直接跟點號,然后跟方法調(diào)用的語法是錯誤的;也就是說,3.negative()這樣寫是不對的。要想調(diào)用數(shù)值類型的方法,需要在數(shù)字后面加n個空格(n>=1),或者使用小括號將數(shù)字括起來,將其強制轉(zhuǎn)化為表達式,然后再調(diào)用方法,或者干脆定義一個數(shù)值變量,也可以直接調(diào)用方法。也就是說,下面的寫法都是正確的:
[javascript]
(3).negative();
3 .negative();
var n = 3; n.negative();
3['negative']();
(3).negative();
3 .negative();
var n = 3; n.negative();
3['negative']();
當使用函數(shù)表達式方法定義函數(shù)時,function后面的函數(shù)名可以用來遞歸地調(diào)用自己,并且這個名字不會被覆蓋!我們來看下面的例子,
[javascript]
function a(n){
if(n>1)
return a(n-1)+1;
else
return 1;
};
function a(n){
if(n>1)
return a(n-1)+1;
else
return 1;
};
上述代碼定義了一個函數(shù)a,并且其內(nèi)部遞歸對自身進行了調(diào)用;現(xiàn)在我們用一個新的引用aa指向函數(shù)a,然后將原來的a改變,比如變?yōu)橐粋€整數(shù)1,然后調(diào)用函數(shù)aa,如下面代碼所示:
[javascript]
var aa = a;
a = 1;
aa(3);
var aa = a;
a = 1;
aa(3);
則控制臺報錯:TypeError: Property 'a' of object [object Window] is not a function;很顯然,原來的遞歸函數(shù)已經(jīng)被破壞了。關(guān)于這個問題,我們可以在函數(shù)a的內(nèi)部,用arguments.callee.caller來代替a,或者用一個函數(shù)表達式來定義函數(shù):
[javascript]
var b = function a(n){
if(n>1)
return a(n-1)+1;
else
return 1;
};
var bb = b;
a = 3;
bb(3);
var b = function a(n){
if(n>1)
return a(n-1)+1;
else
return 1;
};
var bb = b;
a = 3;
bb(3);
此時,bb函數(shù)能正確返回我們想要的結(jié)果。
為了提高JavaScript函數(shù)的封裝性,我們可以定義函數(shù)化的構(gòu)造器,下面是一個例子:
[javascript]
var funcCons = function(spec){
var that = {};
that.getName = function(){
return spec.name;
};
that.says = function(){
return spec.saying || '';
};
return that;
};
var myFunc = funcCons({name:'NearEast'});
var funcCons = function(spec){
var that = {};
that.getName = function(){
return spec.name;
};
that.says = function(){
return spec.saying || '';
};
return that;
};
var myFunc = funcCons({name:'NearEast'});
這樣,我們可以在構(gòu)造器中定義一些私有變量(如字典表)和函數(shù),而不必把它們?nèi)勘┞对谕饷妗?
函數(shù)總是返回一個值;如果沒有指定返回值,就返回undefined;如果當做構(gòu)造函數(shù)來調(diào)用,且返回值不是對象,則返回this(該新對象);如果返回值是對象,則它作為構(gòu)造函數(shù)是沒有意義的!
[javascript]
復(fù)制代碼 代碼如下:
function A(){
this.p = 'haha';
return {p:'heihei'};
}
var a = new A();
function A(){
this.p = 'haha';
return {p:'heihei'};
}
var a = new A();
alert(a.p);//顯示'heihei',與var a = A();的效果一樣
函數(shù)A內(nèi)部直接調(diào)用一個函數(shù)B,B的this綁定到全局對象而不是其外部函數(shù)A,這是JS設(shè)計的一個錯誤。我們不得不用別的方式來解決這個問題,比如在A中用一個變量(通常是that)來保存A的this作用域的引用。
JS函數(shù)擁有一個length屬性,表示函數(shù)定義時指定的形參的個數(shù)。
函數(shù)的arguments屬性包含了調(diào)用函數(shù)時傳入的所有參數(shù),而不管函數(shù)的聲明中是否定義了這些形參;arguments不是數(shù)組,只是一個“類似數(shù)組”的對象(在函數(shù)中運行arguments instanceof Array;返回false)??梢酝ㄟ^Array.prototype.slice.apply(arguments)將其轉(zhuǎn)化為JS數(shù)組。
給JavaScript函數(shù)的原型增加方法(method),則所有的(構(gòu)造)函數(shù)都可以用了!例如,可以給JS函數(shù)的構(gòu)造者 Function 的原型增加一個method方法,則包括Object、Number等構(gòu)造函數(shù)在內(nèi)的所有函數(shù)都繼承了該方法,這是很強大的:
[javascript]
復(fù)制代碼 代碼如下:
Function.prototype.method = function(name, func){
this.prototype[name] = func;
return this;
};
Function.prototype.method = function(name, func){
this.prototype[name] = func;
return this;
};
這樣,調(diào)用Object.method方法,就可以為所有的JS對象(包括Function對象)增加新的方法,調(diào)用Number.method方法,可以為所有的數(shù)值類型增加新的方法,下面一條就是這樣的一個例子。 注意Object、Number等類型的對象此時并沒有繼承method方法。如果想達到這樣的目的,可以運行類似下面的語句:
[javascript]
復(fù)制代碼 代碼如下:
Object.method('method',Object.method);
Object.method('method',Object.method);
我們可以通過修改數(shù)值類型的原型,來給數(shù)值類型增加新的方法,這里我們借用上一條中提到的method方法來給Number的原型增加一個negative方法:
[javascript]
復(fù)制代碼 代碼如下:
Number.method(negative,function(){
return 0–this;
})
Number.method(negative,function(){
return 0–this;
})
調(diào)用方法的時候稍微有一點繞。在JavaScript的語法中,數(shù)字后面直接跟點號,然后跟方法調(diào)用的語法是錯誤的;也就是說,3.negative()這樣寫是不對的。要想調(diào)用數(shù)值類型的方法,需要在數(shù)字后面加n個空格(n>=1),或者使用小括號將數(shù)字括起來,將其強制轉(zhuǎn)化為表達式,然后再調(diào)用方法,或者干脆定義一個數(shù)值變量,也可以直接調(diào)用方法。也就是說,下面的寫法都是正確的:
[javascript]
(3).negative();
3 .negative();
var n = 3; n.negative();
3['negative']();
(3).negative();
3 .negative();
var n = 3; n.negative();
3['negative']();
當使用函數(shù)表達式方法定義函數(shù)時,function后面的函數(shù)名可以用來遞歸地調(diào)用自己,并且這個名字不會被覆蓋!我們來看下面的例子,
[javascript]
復(fù)制代碼 代碼如下:
function a(n){
if(n>1)
return a(n-1)+1;
else
return 1;
};
function a(n){
if(n>1)
return a(n-1)+1;
else
return 1;
};
上述代碼定義了一個函數(shù)a,并且其內(nèi)部遞歸對自身進行了調(diào)用;現(xiàn)在我們用一個新的引用aa指向函數(shù)a,然后將原來的a改變,比如變?yōu)橐粋€整數(shù)1,然后調(diào)用函數(shù)aa,如下面代碼所示:
[javascript]
復(fù)制代碼 代碼如下:
var aa = a;
a = 1;
aa(3);
var aa = a;
a = 1;
aa(3);
則控制臺報錯:TypeError: Property 'a' of object [object Window] is not a function;很顯然,原來的遞歸函數(shù)已經(jīng)被破壞了。關(guān)于這個問題,我們可以在函數(shù)a的內(nèi)部,用arguments.callee.caller來代替a,或者用一個函數(shù)表達式來定義函數(shù):
[javascript]
復(fù)制代碼 代碼如下:
var b = function a(n){
if(n>1)
return a(n-1)+1;
else
return 1;
};
var bb = b;
a = 3;
bb(3);
var b = function a(n){
if(n>1)
return a(n-1)+1;
else
return 1;
};
var bb = b;
a = 3;
bb(3);
此時,bb函數(shù)能正確返回我們想要的結(jié)果。
為了提高JavaScript函數(shù)的封裝性,我們可以定義函數(shù)化的構(gòu)造器,下面是一個例子:
復(fù)制代碼 代碼如下:
[javascript]
var funcCons = function(spec){
var that = {};
that.getName = function(){
return spec.name;
};
that.says = function(){
return spec.saying || '';
};
return that;
};
var myFunc = funcCons({name:'NearEast'});
var funcCons = function(spec){
var that = {};
that.getName = function(){
return spec.name;
};
that.says = function(){
return spec.saying || '';
};
return that;
};
var myFunc = funcCons({name:'NearEast'});
這樣,我們可以在構(gòu)造器中定義一些私有變量(如字典表)和函數(shù),而不必把它們?nèi)勘┞对谕饷妗?
您可能感興趣的文章:
- js中繼承的幾種用法總結(jié)(apply,call,prototype)
- JavaScript prototype 使用介紹
- js中prototype用法詳細介紹
- JavaScript中的prototype使用說明
- 不錯的一篇關(guān)于javascript-prototype繼承
- JS 面向?qū)ο笾衿娴膒rototype
- 詳解Javascript中prototype屬性(推薦)
- 深入了解javascript中的prototype與繼承
- javascript prototype的深度探索不是原型繼承那么簡單
- Javascript中的Prototype到底是什么
- javascript Prototype 對象擴展
- Javascript中prototype與__proto__的關(guān)系詳解
相關(guān)文章
JS使用遮罩實現(xiàn)點擊某區(qū)域以外時彈窗的彈出與關(guān)閉功能示例
這篇文章主要介紹了JS使用遮罩實現(xiàn)點擊某區(qū)域以外時彈窗的彈出與關(guān)閉功能,結(jié)合實例形式分析了javascript事件響應(yīng)及頁面元素屬性動態(tài)操作彈出與關(guān)閉遮罩層相關(guān)實現(xiàn)技巧,需要的朋友可以參考下2018-07-07JavaScript實現(xiàn)審核流程狀態(tài)的動態(tài)顯示進度條
對于有很多流程的東西,我們希望能夠根據(jù)不同的階段,用流程條對應(yīng)地進行顯示,非常直觀,給用戶帶來極好的用戶體驗,下面小編給大家分享JavaScript實現(xiàn)審核流程狀態(tài)的動態(tài)顯示進度條功能,需要的的朋友參考下2017-03-03JS 組件系列之Bootstrap Table 凍結(jié)列功能IE瀏覽器兼容性問題解決方案
這篇文章主要介紹了JS 組件系列之Bootstrap Table 凍結(jié)列功能IE瀏覽器兼容性問題解決方案,需要的朋友可以參考下2017-06-06JS學(xué)習(xí)筆記之原型鏈和利用原型實現(xiàn)繼承詳解
這篇文章主要介紹了JS學(xué)習(xí)筆記之原型鏈和利用原型實現(xiàn)繼承,結(jié)合實例形式詳細分析了javascript原型鏈以及利用原型實現(xiàn)繼承的相關(guān)操作技巧與注意事項,需要的朋友可以參考下2019-05-05