首頁 > web前端 > js教程 > JS物件導向、prototype、call()、apply()

JS物件導向、prototype、call()、apply()

青灯夜游
發布: 2018-10-08 16:33:49
轉載
2488 人瀏覽過

那天用到prototype.js於是打開看看,才看幾行就滿頭霧水,原因是對js的面向對像不是很熟悉,於是百度google了一把,最後終於算小有收穫,寫此紀念一下^_^。

一、 起因
那天用到prototype.js於是打開看看,才看幾行就滿頭霧水,原因是對js的面向對像不是很熟悉,於是百度google了一把,最後終於算小有收穫,寫此紀念一下^_^。 

prototype.js程式碼片段 

var Class = { 
create: function() { 
return function() { 
this.initialize.apply(this , arguments); 
} 
} 
} 
// 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方法?

尋找答案: 

二、 Js的物件導向
initialize是什麼?
只不過是個變量,代表一個方法,用途是類別的建構函數。
其具體功能靠js的物件導向支持,那麼js的物件導向是什麼樣子的那?而java 的有什麼相同與不同?
看程式碼: 

var ClassName = function(v){ 
this.value=v; 
this.getValue=function(){ 
return this.value; 
} 
this.setValue=function(v){ 
this.value=v; 
} 
}
登入後複製

那麼JS中的函數和類別有什麼不同呢?  

其實是一樣的,ClassName就是一個函數,當出現在new後面的時候就當作一個建構函數來建構物件。
如 

var objectName1 = new ClassName(“a”);//得到一个对象
登入後複製

其中objectName1就是執行ClassName建構函數後得到的對象,而在ClassName函數中的this指的就是new之後構造出來的對象,所以objectName1會後一個屬性和兩個方法。可以透過這樣​​來呼叫他們: 

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方法。這也就是呼叫了一個初始化的方法。

三、 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方法的參數怎麼傳遞進去的呢?

四、 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是物件。然後會依序打出1、2、3。說明arguments就是呼叫函數的實參數組。 

var Class = { 
create: function() { 
return function() { 
this.initialize.apply(this , arguments); 
} 
} 
}
登入後複製

arguments 就是create返回的构造函数的实参数组,那么在 var a = new A(‘helloWord!'); 的时候‘helloWord!'就是实参数组(虽然只有一个字符串),传递给方法apply,然后在调用initialize 的时候作为参数传递给初始化函数initialize。 

以上就是本章的全部内容,更多相关教程请访问JavaScript视频教程

以上是JS物件導向、prototype、call()、apply()的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:jb51.net
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板