首頁 > web前端 > js教程 > 主體

Javascript中object.extend靜態方法使用實例詳解

伊谢尔伦
發布: 2017-07-27 17:33:28
原創
2764 人瀏覽過

既然是類,那麼就有抽象類,具體類,類別的繼承,同時,類別的成員可以有實例成員和靜態成員。

先看prototype中的以下的程式碼: 

var Abstract = new Object(); 
Object.extend = function(destination, source) { 
for (property in source) { 
destination[property] = source[property]; 
} 
return destination; 
} 
Object.prototype.extend = function(object) { 
return Object.extend.apply(this, [this, object]); 
}
登入後複製

第一個宣告了一個物件Abstract,Object其實是一個函數,他沒有任何成員,所以是一個空類,所以Abstract也就沒有任何成員。這個暫時不說,後面可以看到這是抽象類別的基礎。先解釋以下這個語法:

function.member=function(){}
登入後複製

在這種情況下,function一般都是已經定義過的,這條語句的作用是給function增加一個靜態成員member,member的內容是等號後面的。如上面第二段程式碼Object.extend=……,就是為Object這個類別增加了一個靜態方法extend。 ok,我們知道如何給一個類別定義靜態成員,那麼你一定很想知道實例成員怎麼定義,很簡單,在類別名稱和成員名稱之間加上prototype:

function.prototype.member=function(){}
登入後複製

prototype不僅可以這麼使用,還可以: 

function.prototype={ 
member1:function(){……}, 
member2:"abc", 
member3:function(){……} 
}
登入後複製

這樣就是實作了實例成員的定義。但prototype代表什麼意思呢?在第一篇我說過,直接用{}括起來,表示一個對象,如Prototype,Class都是這樣定義的全域對象。而看下面一種用法,prototype後面就是一個{}的結構,難道它也是物件?是的,沒錯,prototype其實也是一個物件!在javascript裡,一個物件我們可以任意增加它的成員,用如下的語法:
object.member=function(){……};
只要經過這樣的定義,一個物件就可以立刻有member這個方法! javascript就是這麼神奇!
好,我們現在知道了prototype是一個對象,而function是一個函數或類,那麼我們可以認為prototype是任何一個類別(函數)都內部保留的一個靜態成員。它的功能就是儲存這個類別的所有成員指針,但這些成員都只是原型,沒有經過初始化,這也符合prototype的原義。你可以隨時透過prototype這個物件來擴充成員。在new一個類別時,prototype的成員就經過初始化,然後賦給了實例化的物件。
上面第三段程式碼Object.prototype.extend=……,就是為Object增加了一個實例方法extend,實例方法中就可以引用this指針,指向由這個類別實例化的物件本身。當然,這個物件就具有成員extend。
繼續之前,先了解兩個語句:

for(var p in object){} 
method.apply(object,arguments);
登入後複製

第一句:列舉出一個變數的所有成員,如果是函數,那麼是所有靜態成員;如果是對象,那就是所有實例成員,p的型別是一個字串。表示成員的名稱。引用一個成員不只可以用variabel.member,還可以用variabel["member"]。反過來,賦值也是如此。這就為枚舉一個變數的成員帶來了很大方便。
第二條語句:將method這個方法應用到object去執行,參數是arguments這個陣列。注意:method並不是object的成員。但是,我們可以認為這條語句執行的意思是:object.method(arguments)。這是一個很重要的方法,後面會常用到,你也會逐漸熟悉它的。
下面繼續extend,它是一個非常重要的方法,可以看到它既是類別Object的靜態成員,也是其實例成員,那它有什麼作用呢?讓我們來看:它接收兩個參數,destination和source,如果destination和source都是類,那麼它的功能就是把類source的所有靜態成員都複製給類destination,如果destination和source都是對象,那麼是把所有實例成員複製過來。這時destination中如果已經有同名成員,那麼這個成員將會被覆蓋。也就是說讓destination具有了source的所有成員,並且函數會傳回這個destination。下面看extend作為Object的實例成員:

Object.prototype.extend = function(object) { 
return Object.extend.apply(this, [this, object]); 
}
登入後複製

開始有點暈了,不過不要急,還是可以看懂的,apply語法剛剛已經講過了,它的呼叫者是一個方法,而Object.extend是一個靜態方法,它被應用在this上面,也就是Object的實例,假設為obj,後面方括號是一個數組,包括兩個成員,this和object。這個陣列其實就是Object靜態成員extend的arguments參數。那麼這條語句就相當於執行
obj.extend(this,object);
this不解釋了,表示本身。 object是什麼?參數,恩,是實例方法extend傳來的參數,不要混淆。 extend呢? obj並沒有定義extend實例成員,但透過apply,它可以把Object的靜態成員extend拿來使用,再看一下extend的函數體:

Object.extend = function(destination, source) { 
for (property in source) { 
destination[property] = source[property]; 
} 
return destination; 
}
登入後複製

因为obj是对象,object也是对象,即destination和source都是对象,于是函数的作用就是使obj具有object的所有成员。并且会返回obj。听起来有点拗口,但逻辑很简单:让obj“继承于”object!很好,我们看到了继承,但你肯定会问,对象的继承,第一次听说啊,我们讲继承都是讲的类的继承。没错,现在的确还没有看到真正的类继承,但已经近在眼前了:类不就是有个prototype吗,而prototype是对象!
好,想到这一点,类的继承语法看似很简单了:

b.prototype.extend(a.prototype);
登入後複製

让b继承a。
可是事实却没那么简单:prototype是存放方法原型指针,extend方法没有初始化,不能使用!要使用extend,就必须实例化一个对象。还是看看prototype是怎么做的吧:

b.prototype=(new a()).extend(b.prototype);
登入後複製

很高明的办法!充分说明了函数其实也是一个变量的道理。先实例化a对象,然后在它基础上调用extend,将所有的成员b.prototype的成员覆盖到a的对象,然后把这个a对象再赋值给b.prototype。完成了b从a继承的工作。在实际使用中,一般的用法都是:

b.prototype=(new a()).extend({});
登入後複製

因为让一个b继承自a,通常b之前都是一个未定义的类,所以后面的{}中其实就可以定义类成员。当然,你也可以先定义,再继承,只是和传统概念有所区别了。 

以上是Javascript中object.extend靜態方法使用實例詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
javascript - Object.extend Object.extend是干什么用的?
來自於 2017-04-11 10:29:41
0
3
226
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!