JavaScript 中的 call 和 apply

JavaScript 中通過(guò)call或者apply用來(lái)代替另一個(gè)對(duì)象調(diào)用一個(gè)方法,將一個(gè)函數(shù)的對(duì)象上下文從初始的上下文改變?yōu)橛?thisObj 指定的新對(duì)象。簡(jiǎn)單的說(shuō)就是改變函數(shù)執(zhí)行的上下文,這是最基本的用法。兩個(gè)方法基本區(qū)別在于傳參不同。

用法:

  • call(obj,arg1,arg2,arg3);call第一個(gè)參數(shù)傳對(duì)象,可以是null。參數(shù)以逗號(hào)分開(kāi)進(jìn)行傳值,參數(shù)可以是任何類(lèi)型。
  • apply(obj,[arg1,arg2,arg3]);apply第一個(gè)參數(shù)傳對(duì)象,參數(shù)可以是數(shù)組或者arguments 對(duì)象。

使用

這兩個(gè)方法通常被用來(lái)類(lèi)的繼承和回調(diào)函數(shù)

作用一、類(lèi)的繼承:

apply示例1:

/*定義一個(gè)人類(lèi)*/   
function Person(name,age) {   
    this.name=name; this.age=age;   
}   
 /*定義一個(gè)學(xué)生類(lèi)*/   
functionStudent(name,age,grade) {   
    Person.apply(this,arguments); this.grade=grade;   
}   
//創(chuàng)建一個(gè)學(xué)生類(lèi)   
var student=new Student("qian",21,"一年級(jí)");   
//測(cè)試   
alert("name:"+student.name+"\n"+"age:"+student.age+"\n"+"grade:"+student.grade);   
//大家可以看到測(cè)試結(jié)果name:qian age:21 grade:一年級(jí)   
//學(xué)生類(lèi)里面我沒(méi)有給name和age屬性賦值啊,為什么又存在這兩個(gè)屬性的值呢,這個(gè)就是apply的神奇之處.   

分析:
Person.apply(this,arguments);
this:在創(chuàng)建對(duì)象在這個(gè)時(shí)候代表的是student
arguments:是一個(gè)數(shù)組,也就是[“qian”,”21”,”一年級(jí)”];

也就是通俗一點(diǎn)講就是:用student去執(zhí)行Person這個(gè)類(lèi)里面的內(nèi)容,在Person這個(gè)類(lèi)里面存在this.name等之類(lèi)的語(yǔ)句,這樣就將屬性創(chuàng)建到了student對(duì)象里面

call示例1:

在Studen函數(shù)里面可以將apply中修改成如下:

Person.call(this,name,age);

這樣就ok了

call示例2

    function Person(name, age) {
        this.name = name;
        this.age = age;
        this.alertName = function () {
            alert(this.name);
        }
        this.alertAge = function () {
            alert(this.age);
        }
    }
     
    function webDever(name, age, sex) {
        Person.call(this, name, age);
        this.sex = sex;
        this.alertSex = function () {
            alert(this.sex);
        }
    }
     
    var test = new webDever("愚人碼頭", 28, "男");
    test.alertName();//愚人碼頭
    test.alertAge();//28
    test.alertSex();//男

這樣 webDever類(lèi)就繼承Person類(lèi),Person.call(this,name,age) 的 意思就是使用 Person構(gòu)造函數(shù)(也是函數(shù))在this對(duì)象下執(zhí)行,那么 webDever就有了Person的所有屬性和方法,test對(duì)象就能夠直接調(diào)用Person的方法以及屬性了

作用二、回調(diào)函數(shù):

call 和 apply在回調(diào)行數(shù)中也非常有用,很多時(shí)候我們?cè)陂_(kāi)發(fā)過(guò)程中需要對(duì)改變回調(diào)函數(shù)的執(zhí)行上下文,最常用的比如ajax或者定時(shí)什么的,一般情況下,Ajax都是全局的,也就是window對(duì)象下的。

來(lái)看這個(gè)例子:

    function Album(id, title, owner_id) {
        this.id = id;
        this.name = title;
        this.owner_id = owner_id;
    }
     
    Album.prototype.get_owner = function (callback) {
        var self = this;
        $.get('/owners/' + this.owner_id, function (data) {
            callback && callback.call(self, data.name);
        });
     
    };
    var album = new Album(1, '生活', 2);
    album.get_owner(function (owner) {
        alert('The album' + this.name + ' belongs to ' + owner);
    });

在這:

    album.get_owner(function (owner) {
        alert('The album' + this.name + ' belongs to ' + owner);
    });

中的 this.name就能直接取到album對(duì)象中的name屬性了。

什么情況下用apply,什么情況下用call

在給對(duì)象參數(shù)的情況下,如果參數(shù)的形式是數(shù)組的時(shí)候,比如apply示例里面?zhèn)鬟f了參數(shù)arguments,這個(gè)參數(shù)是數(shù)組類(lèi)型,并且在調(diào)用Person的時(shí)候參數(shù)的列表是對(duì)應(yīng)一致的(也就是Person和Student的參數(shù)列表前兩位是一致的) 就可以采用 apply , 如果我的Person的參數(shù)列表是這樣的(age,name),而Student的參數(shù)列表是(name,age,grade),這樣就可以用call來(lái)實(shí)現(xiàn)了,也就是直接指定參數(shù)列表對(duì)應(yīng)值的位置(Person.call(this,age,name,grade));

apply的一些其他巧妙用法

細(xì)心的人可能已經(jīng)察覺(jué)到,在我調(diào)用apply方法的時(shí)候,第一個(gè)參數(shù)是對(duì)象(this), 第二個(gè)參數(shù)是一個(gè)數(shù)組集合,

在調(diào)用Person的時(shí)候,他需要的不是一個(gè)數(shù)組,但是為什么他給我一個(gè)數(shù)組我仍然可以將數(shù)組解析為一個(gè)一個(gè)的參數(shù),

這個(gè)就是apply的一個(gè)巧妙的用處,可以將一個(gè)數(shù)組默認(rèn)的轉(zhuǎn)換為一個(gè)參數(shù)列表([param1,param2,param3] 轉(zhuǎn)換為 param1,param2,param3) 這個(gè)如果讓我們用程序來(lái)實(shí)現(xiàn)將數(shù)組的每一個(gè)項(xiàng),來(lái)裝換為參數(shù)的列表,可能都得費(fèi)一會(huì)功夫,借助apply的這點(diǎn)特性,所以就有了以下高效率的方法:

  • Math.max 可以實(shí)現(xiàn)得到數(shù)組中最大的一項(xiàng)
    因?yàn)镸ath.max 參數(shù)里面不支持Math.max([param1,param2]) 也就是數(shù)組 。
    但是它支持Math.max(param1,param2,param3…),所以可以根據(jù)剛才apply的那個(gè)特點(diǎn)來(lái)解決 var max=Math.max.apply(null,array),這樣輕易的可以得到一個(gè)數(shù)組中最大的一項(xiàng)
    (apply會(huì)將一個(gè)數(shù)組裝換為一個(gè)參數(shù)接一個(gè)參數(shù)的傳遞給方法)
    這塊在調(diào)用的時(shí)候第一個(gè)參數(shù)給了一個(gè)null,這個(gè)是因?yàn)闆](méi)有對(duì)象去調(diào)用這個(gè)方法,我只需要用這個(gè)方法幫我運(yùn)算,得到返回的結(jié)果就行,.所以直接傳遞了一個(gè)null過(guò)去
  • Array.prototype.push 可以實(shí)現(xiàn)兩個(gè)數(shù)組合并
    同樣push方法沒(méi)有提供push一個(gè)數(shù)組,但是它提供了push(param1,param,…paramN) 所以同樣也可以通過(guò)apply來(lái)裝換一下這個(gè)數(shù)組,即:
vararr1=new Array("1","2","3");   
 vararr2=new Array("4","5","6");   
Array.prototype.push.apply(arr1,arr2);   

也可以這樣理解,arr1調(diào)用了push方法,參數(shù)是通過(guò)apply將數(shù)組裝換為參數(shù)列表的集合.

通常在什么情況下,可以使用apply類(lèi)似Math.min等之類(lèi)的特殊用法:
一般在目標(biāo)函數(shù)只需要n個(gè)參數(shù)列表,而不接收一個(gè)數(shù)組的形式([param1[,param2[,…[,paramN]]]]),可以通過(guò)apply的方式巧妙地解決這個(gè)問(wèn)題!

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀(guān)點(diǎn),簡(jiǎn)書(shū)系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

友情鏈接更多精彩內(nèi)容