javascript 構造函數和方法


在之前javascript 定義函數的方法這篇日誌裏面有提到構造函數,現在,來具體的介紹以下javascript的構造函數及方法的概念。

這是兩個及其有用的概念,對後面介紹javascript的面向對象機制,及其類方法,繼承的頓悟有着說不清,道不明的好處,

仔細理解一下吧

構造函數:

在javascript中,使用new運算符或者預定義的構造函數(如Object(),Date(),Function()等)都可以創建並初始化一個新的js對象。

構造函數具有如下兩個特性,其本質仍然是javascript函數:

它由new運算符調用

傳遞給它的是一個對新創建的空對象的引用,將該引用作爲關鍵字this的值,而且它還要對新創建的對象進行適當的初始化

[cc lang='javascript']
//定義構造函數,
function User(name,age)
{
this.name = name;
this.age = age;
}

//實例化兩個對象
var simaopig = new User('simaopig','25');
var xiaoxiaozi = new User('xiaoxiaozi','25');
[/cc]

這裏需要明白並且強迫自己接受如下觀點:構造函數知識初始化了特定的對象,但是其並不返回這個對象

在上例中,我們可以看到構造函數對this的引用,其只是初始化由this傳遞進來的對象,並且啥也不返回。

方法:

所謂方法(method),其實就是通過對象調用的javascript函數

其實函數又是什麼?函數與方法又有啥不同?這似乎是一個哲學概念?雞是什麼?那就是蛋啊。。

函數其實就是數值,其和方法沒有任何本質區別,之所以要交兩個名字,無非是要強調對象的作用罷了。

因爲你完全可以把函數賦值給任何變量,當然也就包括了對象的屬性。

[cc lang='javascript']
//實例化對象o
var o = new Object();

//把函數fun賦值給o的屬性method
o.method = fun;

//聲明函數fun
function fun()
{
return '250';
}

//調用o的屬性,效果同學們自己去查看,又是彈窗,值爲250

alert(o.method());
[/cc]

方法有個非常重要的屬性,即在方法主體內部,關鍵字this的值爲調用該方法的對象。

任何被用作方法的函數都會得到一個額外的實際參數,就是調用該函數方法的對象,也就是剛纔我告訴你的this。

我爲啥說函數其實就是方法,方法也就是函數呢?

函數是儲存在變量中的值,而那個變量也不過是全局對象的一個屬性,因此,當你調用一個函數是,其實就是在調用全局對象的一個方法。

但是,函數和方法真正的不同點就在於設計和目的上,方法是用來對this對象進行操作的,而函數通常是獨立的並不需要this對象。

本來寫到這裏就不想再說啥了,不過,如果不把這個例子抄下來,難免真正需要的人就有些發暈,尤其當看我下一篇日誌的時候。。

所以,抄。

[cc lang='javascript']
//定義構造函數 矩形,有倆屬性,寬和高

function Rectangle(w, h)
{
this.width = w;

this.height = h;
}

//定義一個方法,計算面積,這裏用了this哦

function compute_area()
{
return this.width * this.height;
}

//實力化對象rect

var rect = new Rectangle(3,4);

//通過給屬性賦值把函數 compute_area作爲rect對象的一個屬性

rect.area = compute_area;

//如下內容調用新的方法獲得面積 結果爲3 * 4

var are = rect.area();
[/cc]

上述代碼有個問題,就是我每次調用rect對象的方法前,總得將方法賦值給其的一個屬性。

那我新實例化的對象,比如rect2要想求得面積,還得這樣來上一遍。麻煩啊。

那如果我直接在構造函數裏面聲明呢?爲所用實例化的對象都聲明一個方法,是不是可以解決問題?

NO,雖然你很聰明,因爲

每個屬性都佔用一定的內存空間所以如果把所有屬性方法都聲明在構造函數中,就會無形的增大很多開銷。因爲有的實例化對象不需要這個屬性好不?而且,這些個實例化的對象的屬性一模一樣,都是對this的引用來處理,比如面積,那就是嚴重的重複啊。資源浪費啊。

怎麼解決上述問題?嘿嘿,如果我不困的話,一會就告訴你,請期待我的下一篇日誌吧。。(說了不要扔轉頭。。。)

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章