前端學(xué)習(xí)筆記之js中apply()和call()方法詳解

經(jīng)過(guò)網(wǎng)上的大量搜索,漸漸明白了apply()和call方法的使用,為此寫一篇文章記錄一下。

定義

  • apply()方法

    Function.apply(obj,args)
    obj:這個(gè)對(duì)象將代替Function類里this對(duì)象
    args:這個(gè)是數(shù)組,它將作為參數(shù)傳給Function(args-->arguments)

  • call()方法

Function.call(obj,[param1[,param2[,…[,paramN]]]])
obj:這個(gè)對(duì)象將代替Function類里this對(duì)象
params:這個(gè)是一個(gè)參數(shù)列表


相同點(diǎn)與不同點(diǎn)

  1. 相同點(diǎn)

    作用是一樣的,call 和 apply 都是為了改變函數(shù)體內(nèi)部 this 的指向,也就是把Function(即this)綁定到obj,這時(shí)候obj具備了Function的屬性和方法,說(shuō)白一點(diǎn)就是obj繼承了Function的屬性和方法。

  2. 不同點(diǎn)

    相信大家也已經(jīng)發(fā)現(xiàn)了,他們唯一區(qū)別就是接受參數(shù)的方式不太一樣,apply接受的是數(shù)組參數(shù),call接受的是連續(xù)參數(shù)。


方法使用

我們來(lái)看下面一個(gè)例子:

定義一個(gè)函數(shù)mul

function mul(a,b){
    return this+(a*b);
}

接著我們?cè)诳刂婆_(tái)上打印出

console.log(mul.call(null,2,3));
console.log(mul.call('s',2,3));
console.log(mul.call(3,2,3));
console.log(mul.apply(null,[2,5]));
console.log(mul.apply(2,[2,5]));

分別為:

[object Window]6
s6
9
[object Window]10
12

可能你會(huì)發(fā)現(xiàn)到,第一行 console.log(mul.call(null,2,3)) 沒(méi)什么變化,call()的第一個(gè)參數(shù)就是改變的 this 指向,如果為 null 則函數(shù)的 this 不變,注意,如果在嚴(yán)格模式下(函數(shù)體或全局的開頭有這句話:'use strict'),this 會(huì)變成 null。如果函數(shù)本身有參數(shù),則從 call 的第二個(gè)參數(shù)開始寫起。
第二行 console.log(mul.call('s',2,3)) 將函數(shù)的 this 指向一個(gè)字符串 's'. ===>> 's'+2 * 3=s6
第三行 console.log(mul.call(3,2,3)) 將函數(shù)的this指向一個(gè)數(shù)字3
===>> 3+2 * 3=9
以此類推。

再舉一個(gè)例子

學(xué)js的都知道 Math.max() 方法,比如有三個(gè)參數(shù)2,3,4那么我們要找出最大值可以這么寫 Math.max(2,3,4) 那要是有 100 個(gè)或更多參數(shù)呢?這時(shí)候就可以結(jié)合 apply 和數(shù)組輕松實(shí)現(xiàn)了。

比如定義一個(gè)數(shù)組

var arr=[2,3,4,5,6,7,8,9,10,23,45,66,22,11];

接著我們打印出

console.log(Math.max.apply(null,arr));

這樣一來(lái)就很簡(jiǎn)潔明了。

再舉一個(gè)例子實(shí)現(xiàn)對(duì)象繼承

function Person(name,age) {
    this.name=name;
    this.age=age;
}

var Student=function(name,age,gender) {
    Person.call(this,name,age);//this繼承了person的屬性和方法
    this.gender=gender;
}
var student=new Student("陳安東", 20, "男");
alert("姓名:"+student.name+"\n"+"年齡:"+student.age+"\n"+"性別:"+student.gender);

輸出

姓名:陳安東
年齡:20
性別:男

這樣用call就實(shí)現(xiàn)了繼承(用apply也類似)

最后編輯于
?著作權(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)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

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