JS面向?qū)ο?、prototype、call()、apply()
更新時間:2009年05月14日 22:56:41 作者:
那天用到prototype.js于是打開看看,才看幾行就滿頭霧水,原因是對js的面向?qū)ο蟛皇呛苁煜?,于是百?google了一把,最后終于算小有收獲,寫此紀(jì)念一下^_^。
一、 起因
那天用到prototype.js于是打開看看,才看幾行就滿頭霧水,原因是對js的面向?qū)ο蟛皇呛苁煜ぃ谑前俣?google了一把,最后終于算小有收獲,寫此紀(jì)念一下^_^。
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后就會執(zhí)行initialize方法?
尋找答案:
二、 Js的面向?qū)ο?/STRONG>
initialize是什么?
只不過是個變量,代表一個方法,用途是類的構(gòu)造函數(shù)。
其具體功能靠js的面向?qū)ο笾С?,那么js的面向?qū)ο笫鞘裁礃幼拥哪牵亢蚸ava 的有什么相同與不同?
看代碼:
var ClassName = function(v){
this.value=v;
this.getValue=function(){
return this.value;
}
this.setValue=function(v){
this.value=v;
}
}
那么JS中的函數(shù)和類有什么不同呢?
其實是一樣的,ClassName就是一個函數(shù),當(dāng)出現(xiàn)在new后面的時候就作為一個構(gòu)造函數(shù)來構(gòu)造對象。
如
var objectName1 = new ClassName(“a”);//得到一個對象
其中objectName1就是執(zhí)行ClassName構(gòu)造函數(shù)后得到的對象,而在ClassName函數(shù)中的this指的就是new之后構(gòu)造出來的對象,所以objectName1會后一個屬性和兩個方法。可以通過這樣來調(diào)用他們:
objectName1.setValue(''hello'');
alert(objectName1.getValue());//對話框hello
alert(objectName1.value) ;//對話框hello
那么
var objectName2 = ClassName(“b”);//得到一個對象
這樣objectName2得到的是什么呢?顯然是方法的返回值,這里ClassName只作為了一個普通的函數(shù)(雖然首字母大寫了)。但是在之前寫的ClassName中并沒有返回值,所以objectName2會是undifinded那么“b”賦給誰了呢?在這并沒有產(chǎn)生一個對象,而只是單純的執(zhí)行這個方法,所以這個“b”賦值給了調(diào)用這個方法的對象window,證據(jù)如下:
var objectName2 = ClassName(“b”);//得到一個對象
alert(window.value);//對話框b
所以JS中的所有function都是一樣的,但是用途可能是不同的(用作構(gòu)造對象抑或是執(zhí)行一個過程)。
下面該回到主題了initialize是干什么的?
var Class = {
create: function() {
return function() {
this.initialize.apply(this , arguments);
}
}
}
var A = Class.create();
這段代碼是構(gòu)造個一個function復(fù)制給A,這個function是
function() {
this.initialize.apply(this , arguments);
}
并且后面這個方法是用來做構(gòu)造函數(shù)的。當(dāng)使用這個構(gòu)造函數(shù)來構(gòu)造對象的時候,會讓構(gòu)造出來的這個對象的initialize變量執(zhí)行apply()方法,apply()的用途后面在說,繼續(xù)說initialize。這樣在初始化對象的時候會聯(lián)系到initialize(怎么聯(lián)系就要看apply的了)。
那么
A.prototype={
initialize:function(v){
this .value=v;
}
showValue:function(){
alert(this.value);
}
}
是什么意思呢?
Prototype是“原型”的意思。A是一個function(),那么A. prototype,就是function中的一個變量,其實是個對象。這個對象擁有什么方法,那么function產(chǎn)生的對象就擁有什么方法,故
var a = new A(‘helloWord!');
a. showValue();//彈出對話框helloWord!
所以a對象也會有initialize方法,不只如此,每一個有A構(gòu)造出來的對象都會有一個initialize方法,而在前面說過,構(gòu)造的時候會調(diào)用構(gòu)造函數(shù),構(gòu)造函數(shù)里面會讓initialize去調(diào)用apply方法,于是在new A(‘helloWord!')的時候initialize回去調(diào)用apply方法。這也就是調(diào)用了一個初始化的方法。
三、 call()和apply()
下面開始研究apply(),在網(wǎng)上找了幾個資料,并結(jié)合自己的研究,了解了call()和apply()的功能。功能基本一樣,function().call(object,{},{}……)或者function().apply (object,[……])的功能就是對象object調(diào)用這里的funciton(),不同之處是call參數(shù)從第二個開始都是傳遞給funciton的,可以依次羅列用“,”隔開。而apply只有兩個參數(shù),第二個是一個數(shù)組,其中存儲了所有傳遞給function的參數(shù)。
this.initialize.apply(this , arguments);
是什么意思?
這里的第一個this,是指用new調(diào)用構(gòu)造函數(shù)之后生成的對象,也就是前面的a,那么第二個this也當(dāng)然應(yīng)該是指同一個對象。那這句話就是this(也就是a)調(diào)用initialize方法,參數(shù)是arguments對象(參數(shù)的數(shù)組對象),所以在構(gòu)造函數(shù)執(zhí)行的時候,對象a就會去執(zhí)行initialize方法來初始化,這樣就和單詞“initialize”的意思對上了。
那么執(zhí)行initialize方法的參數(shù)怎么傳遞進(jìn)去的呢?
四、 Arguments對象
這段代碼能說明一切了:
function test(){
alert(typeof arguments);
for(var i=0; i<arguments.length; i++){
alert(arguments[i]);
}
}
test("1","2","3");
test("a","b");
執(zhí)行后alert(typeof arguments);會顯示object,說明arguments是對象。然后會依次打出1、2、3。說明arguments就是調(diào)用函數(shù)的實參數(shù)組。
var Class = {
create: function() {
return function() {
this.initialize.apply(this , arguments);
}
}
}
arguments 就是create返回的構(gòu)造函數(shù)的實參數(shù)組,那么在
var a = new A(‘helloWord!');
的時候‘helloWord!'就是實參數(shù)組(雖然只有一個字符串),傳遞給方法apply,然后在調(diào)用initialize 的時候作為參數(shù)傳遞給初始化函數(shù)initialize。
那天用到prototype.js于是打開看看,才看幾行就滿頭霧水,原因是對js的面向?qū)ο蟛皇呛苁煜ぃ谑前俣?google了一把,最后終于算小有收獲,寫此紀(jì)念一下^_^。
prototype.js代碼片段
復(fù)制代碼 代碼如下:
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后就會執(zhí)行initialize方法?
尋找答案:
二、 Js的面向?qū)ο?/STRONG>
initialize是什么?
只不過是個變量,代表一個方法,用途是類的構(gòu)造函數(shù)。
其具體功能靠js的面向?qū)ο笾С?,那么js的面向?qū)ο笫鞘裁礃幼拥哪牵亢蚸ava 的有什么相同與不同?
看代碼:
復(fù)制代碼 代碼如下:
var ClassName = function(v){
this.value=v;
this.getValue=function(){
return this.value;
}
this.setValue=function(v){
this.value=v;
}
}
那么JS中的函數(shù)和類有什么不同呢?
其實是一樣的,ClassName就是一個函數(shù),當(dāng)出現(xiàn)在new后面的時候就作為一個構(gòu)造函數(shù)來構(gòu)造對象。
如
復(fù)制代碼 代碼如下:
var objectName1 = new ClassName(“a”);//得到一個對象
其中objectName1就是執(zhí)行ClassName構(gòu)造函數(shù)后得到的對象,而在ClassName函數(shù)中的this指的就是new之后構(gòu)造出來的對象,所以objectName1會后一個屬性和兩個方法。可以通過這樣來調(diào)用他們:
復(fù)制代碼 代碼如下:
objectName1.setValue(''hello'');
alert(objectName1.getValue());//對話框hello
alert(objectName1.value) ;//對話框hello
那么
復(fù)制代碼 代碼如下:
var objectName2 = ClassName(“b”);//得到一個對象
這樣objectName2得到的是什么呢?顯然是方法的返回值,這里ClassName只作為了一個普通的函數(shù)(雖然首字母大寫了)。但是在之前寫的ClassName中并沒有返回值,所以objectName2會是undifinded那么“b”賦給誰了呢?在這并沒有產(chǎn)生一個對象,而只是單純的執(zhí)行這個方法,所以這個“b”賦值給了調(diào)用這個方法的對象window,證據(jù)如下:
var objectName2 = ClassName(“b”);//得到一個對象
alert(window.value);//對話框b
所以JS中的所有function都是一樣的,但是用途可能是不同的(用作構(gòu)造對象抑或是執(zhí)行一個過程)。
下面該回到主題了initialize是干什么的?
復(fù)制代碼 代碼如下:
var Class = {
create: function() {
return function() {
this.initialize.apply(this , arguments);
}
}
}
var A = Class.create();
這段代碼是構(gòu)造個一個function復(fù)制給A,這個function是
復(fù)制代碼 代碼如下:
function() {
this.initialize.apply(this , arguments);
}
并且后面這個方法是用來做構(gòu)造函數(shù)的。當(dāng)使用這個構(gòu)造函數(shù)來構(gòu)造對象的時候,會讓構(gòu)造出來的這個對象的initialize變量執(zhí)行apply()方法,apply()的用途后面在說,繼續(xù)說initialize。這樣在初始化對象的時候會聯(lián)系到initialize(怎么聯(lián)系就要看apply的了)。
那么
復(fù)制代碼 代碼如下:
A.prototype={
initialize:function(v){
this .value=v;
}
showValue:function(){
alert(this.value);
}
}
是什么意思呢?
Prototype是“原型”的意思。A是一個function(),那么A. prototype,就是function中的一個變量,其實是個對象。這個對象擁有什么方法,那么function產(chǎn)生的對象就擁有什么方法,故
var a = new A(‘helloWord!');
a. showValue();//彈出對話框helloWord!
所以a對象也會有initialize方法,不只如此,每一個有A構(gòu)造出來的對象都會有一個initialize方法,而在前面說過,構(gòu)造的時候會調(diào)用構(gòu)造函數(shù),構(gòu)造函數(shù)里面會讓initialize去調(diào)用apply方法,于是在new A(‘helloWord!')的時候initialize回去調(diào)用apply方法。這也就是調(diào)用了一個初始化的方法。
三、 call()和apply()
下面開始研究apply(),在網(wǎng)上找了幾個資料,并結(jié)合自己的研究,了解了call()和apply()的功能。功能基本一樣,function().call(object,{},{}……)或者function().apply (object,[……])的功能就是對象object調(diào)用這里的funciton(),不同之處是call參數(shù)從第二個開始都是傳遞給funciton的,可以依次羅列用“,”隔開。而apply只有兩個參數(shù),第二個是一個數(shù)組,其中存儲了所有傳遞給function的參數(shù)。
this.initialize.apply(this , arguments);
是什么意思?
這里的第一個this,是指用new調(diào)用構(gòu)造函數(shù)之后生成的對象,也就是前面的a,那么第二個this也當(dāng)然應(yīng)該是指同一個對象。那這句話就是this(也就是a)調(diào)用initialize方法,參數(shù)是arguments對象(參數(shù)的數(shù)組對象),所以在構(gòu)造函數(shù)執(zhí)行的時候,對象a就會去執(zhí)行initialize方法來初始化,這樣就和單詞“initialize”的意思對上了。
那么執(zhí)行initialize方法的參數(shù)怎么傳遞進(jìn)去的呢?
四、 Arguments對象
這段代碼能說明一切了:
復(fù)制代碼 代碼如下:
function test(){
alert(typeof arguments);
for(var i=0; i<arguments.length; i++){
alert(arguments[i]);
}
}
test("1","2","3");
test("a","b");
執(zhí)行后alert(typeof arguments);會顯示object,說明arguments是對象。然后會依次打出1、2、3。說明arguments就是調(diào)用函數(shù)的實參數(shù)組。
復(fù)制代碼 代碼如下:
var Class = {
create: function() {
return function() {
this.initialize.apply(this , arguments);
}
}
}
arguments 就是create返回的構(gòu)造函數(shù)的實參數(shù)組,那么在
var a = new A(‘helloWord!');
的時候‘helloWord!'就是實參數(shù)組(雖然只有一個字符串),傳遞給方法apply,然后在調(diào)用initialize 的時候作為參數(shù)傳遞給初始化函數(shù)initialize。
您可能感興趣的文章:
- JavaScript中的apply()方法和call()方法使用介紹
- js中繼承的幾種用法總結(jié)(apply,call,prototype)
- javascript中apply和call方法的作用及區(qū)別說明
- 詳解js中的apply與call的用法
- JS中改變this指向的方法(call和apply、bind)
- JavaScript中的apply和call函數(shù)詳解
- js中call與apply的用法小結(jié)
- js apply/call/caller/callee/bind使用方法與區(qū)別分析
- JavaScript學(xué)習(xí)點滴 call、apply的區(qū)別
- 詳解JS中的this、apply、call、bind(經(jīng)典面試題)
- 淺談javascript中call()、apply()、bind()的用法
- JavaScript中apply與call的用法意義及區(qū)別說明
- js中apply()和call()的區(qū)別與用法實例分析
- 跟我學(xué)習(xí)javascript的call(),apply(),bind()與回調(diào)
- JavaScript中的this,call,apply使用及區(qū)別詳解
- javascript call和apply方法
- 深入理解JavaScript中的call、apply、bind方法的區(qū)別
- 再談JavaScript中bind、call、apply三個方法的區(qū)別與使用方式
相關(guān)文章
JavaScript使用FileReader實現(xiàn)圖片上傳預(yù)覽效果
這篇文章主要為大家詳細(xì)介紹了JavaScript使用FileReader實現(xiàn)圖片上傳預(yù)覽效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-09-09js/jquery控制頁面動態(tài)加載數(shù)據(jù) 滑動滾動條自動加載事件的方法
下面小編就為大家?guī)硪黄猨s/jquery控制頁面動態(tài)加載數(shù)據(jù) 滑動滾動條自動加載事件的方法。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2017-02-02用JavaScript和注冊表腳本實現(xiàn)右鍵收藏Web頁選中文本
用JavaScript和注冊表腳本實現(xiàn)右鍵收藏Web頁選中文本...2007-01-01小程序開發(fā)實現(xiàn)access_token統(tǒng)一管理
本文主要介紹了小程序開發(fā)實現(xiàn)access_token統(tǒng)一管理,文中通過示例代碼介紹的非常詳細(xì),需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-07-07