解析 this.initialize.apply(this, arguments)

1、 原由 
那天用到prototype.js因而打開看看,纔看幾行就滿頭霧水,緣由是對js的面向對象不是很熟悉,因而百度+google了一把,最後終於算小有收穫,寫此記念一下^_^。 
prototype.js代碼片斷java

代碼以下:

數組

// Class使用方法以下
var A = Class.create(); 
A. prototype={ 
    initialize:function(v){ 
        this .value=v; 
    } 
    showValue:function(){ 
        alert(this.value); 
    } 
} 
var a = new A(‘helloWord!'); 
a. showValue();//彈出對話框helloWord!

 

l initialize是什麼? 
l apply方法是幹什麼的? 
l arguments變量呢? 
l 爲何new A後就會執行initialize方法? 
尋找答案:app

2、 Js的面向對象 
initialize是什麼? 
只不過是個變量,表明一個方法,用途是類的構造函數。 
其具體功能靠js的面向對象支持,那麼js的面向對象是什麼樣子的那?和java 的有什麼相同與不一樣? 
看代碼:函數

代碼以下:this

var ClassName = function(v){ 
    this.value=v; 
    this.getValue=function(){ 
        return this.value; 
    } 
    this.setValue=function(v){ 
        this.value=v; 
    } 
}

 

那麼JS中的函數和類有什麼不一樣呢? 
實際上是同樣的,ClassName就是一個函數,當出如今new後面的時候就做爲一個構造函數來構造對象。 
google

代碼以下:spa

var objectName1 = new ClassName(「a」);//獲得一個對象

 

其中objectName1就是執行ClassName構造函數後獲得的對象,而在ClassName函數中的this指的就是new以後構造出來的對象,因此objectName1會後一個屬性和兩個方法。能夠經過這樣來調用他們:prototype

代碼以下:code

objectName1.setValue(''hello''); 
alert(objectName1.getValue());//對話框hello 
alert(objectName1.value) ;//對話框hello

 

那麼對象

複製代碼 代碼以下:

var objectName2 = ClassName(「b」);//獲得一個對象

 

這樣objectName2獲得的是什麼呢?顯然是方法的返回值,這裏ClassName只做爲了一個普通的函數(雖然首字母大寫了)。可是在以前寫的ClassName中並無返回值,因此objectName2會是undifinded那麼「b」賦給誰了呢?在這並無產生一個對象,而只是單純的執行這個方法,因此這個「b」賦值給了調用這個方法的對象window,證據以下: 

var objectName2 = ClassName(「b」);//獲得一個對象 
alert(window.value);//對話框b 

 


因此JS中的全部function都是同樣的,可是用途多是不一樣的(用做構造對象抑或是執行一個過程)。 
下面該回到主題了initialize是幹什麼的?

代碼以下:

var Class = { 
    create: function() { 
        return function() { 
            this.initialize.apply(this , arguments); 
        } 
    } 
} 
var A = Class.create();

 

這段代碼是構造個一個function複製給A,這個function是

複製代碼 代碼以下:

function() { 
    this.initialize.apply(this , arguments); 
}

 

而且後面這個方法是用來作構造函數的。當使用這個構造函數來構造對象的時候,會讓構造出來的這個對象的initialize變量執行apply()方法,apply()的用途後面在說,繼續說initialize。這樣在初始化對象的時候會聯繫到initialize(怎麼聯繫就要看apply的了)。 
那麼

代碼以下:

A.prototype={ 
    initialize:function(v){ 
        this .value=v; 
    } 
    showValue:function(){ 
        alert(this.value); 
    } 
}

 

是什麼意思呢? 
Prototype是「原型」的意思。A是一個function(),那麼A. prototype,就是function中的一個變量,實際上是個對象。這個對象擁有什麼方法,那麼function產生的對象就擁有什麼方法,故 

var a = new A(‘helloWord!'); 
a. showValue();//彈出對話框helloWord!

 


因此a對象也會有initialize方法,不僅如此,每個有A構造出來的對象都會有一個initialize方法,而在前面說過,構造的時候會調用構造函數,構造函數裏面會讓initialize去調用apply方法,因而在new A(‘helloWord!')的時候initialize回去調用apply方法。這也就是調用了一個初始化的方法。

3、 call()和apply() 
下面開始研究apply(),在網上找了幾個資料,並結合本身的研究,瞭解了call()和apply()的功能。功能基本同樣,function().call(object,{},{}……)或者function().apply (object,[……])的功能就是對象object調用這裏的funciton(),不一樣之處是call參數從第二個開始都是傳遞給funciton的,能夠依次羅列用「,」隔開。而apply只有兩個參數,第二個是一個數組,其中存儲了全部傳遞給function的參數。 

this.initialize.apply(this , arguments); 

 

是什麼意思? 
這裏的第一個this,是指用new調用構造函數以後生成的對象,也就是前面的a,那麼第二個this也固然應該是指同一個對象。那這句話就是this(也就是a)調用initialize方法,參數是arguments對象(參數的數組對象),因此在構造函數執行的時候,對象a就會去執行initialize方法來初始化,這樣就和單詞「initialize」的意思對上了。 
那麼執行initialize方法的參數怎麼傳遞進去的呢?

4、 Arguments對象 
這段代碼能說明一切了:

代碼以下:

function test(){ 
    alert(typeof arguments); 
    for(var i=0; i<arguments.length; i++){ 
        alert(arguments[i]); 
    } 
} 
test("1","2","3"); 
test("a","b");

 

執行後alert(typeof arguments);會顯示object,說明arguments是對象。而後會依次打出一、二、3。說明arguments就是調用函數的實參數組。

代碼以下:

var Class = { 
    create: function() { 
        return function() { 
            this.initialize.apply(this , arguments); 
        } 
    } 
}

 

arguments 就是create返回的構造函數的實參數組,那麼在 var a = new A(‘helloWord!'); 的時候‘helloWord!'就是實參數組(雖然只有一個字符串),傳遞給方法apply,而後在調用initialize 的時候做爲參數傳遞給初始化函數initialize。

相關文章
相關標籤/搜索