天天看點

Javascript函數、構造函數、原型、類和對象

函數是javascript中特殊的對象,對函數執行typeof運算會傳回字元串"function",因為函數也是對象,他們可以擁有屬性和方法。

函數在js中定義了類的名字,任何添加到函數的屬性都是類字段和類方法(類比java中類的static variable 和 static method),下面代碼起到java裡面static method的效果:

如果函數或者方法的調用之前加上new關鍵字,他就構成了構造函數的調用.,

構造函數的調用和普通函數,方法的調用在實參處理,調用上下文和傳回值方面有不同

(1).實參處理不同

凡是沒有形參的構造函數調用都可以省略圓括号

(2)調用上下文的不同

調用構造函數建立一個新的空對象,這個對象繼承自構造函數的prototype(原型).構造函數試圖初始化這個新對象,并把這個新對象當做構造函數的調用上下文,是以在構造函數中this關鍵字可以用來引用這個新對象,也就能夠在構造函數中初始化這個新對象. 

注意: 盡管構造函數看起來像一個方法調用,它依然會使用這個新對象作為調用上下文。也就是說,在表達式new

o.m() 中,調用上下文并不是o.

例子1-2:

(3)傳回值不同

構造函數通常不使用return關鍵字調用完畢之後會傳回一個對象(就是新建立的這個對象)

this是一個關鍵字,不是變量也不是屬性.

this關鍵字沒有作用域的限制,他隻有下面幾種情況

(1)一個函數被當做方法調用,則函數中的this指向的是調用它的對象

(2)一個函數被當做函數調用,則函數中的this指向的全局對象(非嚴格模式)或者是undefined(嚴格模式下)

(3)函數被當做構造函數調用,this就指向構造函數建立的新對象

例子:

函數原型,每一個函數都包含一個prototype屬性,而且這個prototype包含唯一一個屬性constructor指向構造函數對象,當将函數用做構造函數的時候,新建立的對象會從原型對象上繼承屬性,按照慣例,構造函數首字母要大寫:

注意:每個函數自身就是個對象,是以可以被指派和像參數一樣傳遞,但同時,它也可以被用作構造函數,用來建立其他對象。

構造函數的prototype是被所有執行個體共享的,例如:

因為p1和p2共享prototype對象,是以p1的friends改變會影響到p2,這顯然不是我們想要的,我們希望每個person執行個體有自己單獨的屬性,但同時,我們又希望對一些公共方法可以共享,以節省記憶體。

構造方法用于定義執行個體屬性,而原型模式用于定義方法和共享的屬性。結果,每個執行個體都會有自己的一份執行個體屬性的副本,同時又共享着對方法的引用,最大限度地節省了記憶體。有點類似于繼承,但差別是prototype是單例的。

修改後的寫法:

作為命名空間的函數

在函數中聲明的變量在整個函數體内都是可見的,在函數的外部是不可見的(局部變量)。不在任何函數中聲明的變量是全局變量,在整個javascript程式中都可見。

一種慣用法是用自調用匿名函數(self-invoking anonymous function) 來實作這個命名空間技術,其寫法如下

(function(){

//子產品代碼

  })();

因為預設情況下,js是運作在全局的namespace下,而對全局變量的暴露是非常危險的,因為任何無意的修改和覆寫都會來帶意想不到的錯誤。是以在js開發中,盡量不要定義全局變量。在js架構開發中此條法則展現的尤為明顯,因為假如架構暴露過多的全局變量,一旦被使用者修改,就可能導緻架構不可用。

是以在jquery中,整個架構通過 window.jquery = window.$ = jquery; 隻向外部暴露了2個全局變量,即著名的$和jquery

javascript 中,除了數字、true、false、null和undefined之外,其他值都是對象,每個對象擁有三個相關的對象屬性(object attribute)

對象的原型(prototype)指向另一個對象,本對象的屬性繼承自它的原型對象。對象繼承是通過原型鍊實作的

對象的類(class)是一個辨別對象類型的字元串

對象的擴充标記(extensible flag)指明了是否可以向該對象添加新屬性

所有通過對象直接量(object literals)建立的對象都具有同一個原型對象object.prototype,對象的屬性繼承自原型對象,對象之是以會繼承是因為屬性的查詢過程是,搜尋對象的原型鍊,直到根原型,如果還沒有找到辨別為undefined。

上面代碼對象在記憶體中的示意圖:

Javascript函數、構造函數、原型、類和對象

工廠方法這個設計模式在js中也是經常用到,下面以jquery源碼為例,看一下對象工廠的運用。

下一篇: BES

繼續閱讀