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

這裏排版不是太好，詳情看個人簡書

通過網上的大量搜索，漸漸明白了apply()和call方法的使用，爲此寫一篇文章記錄一下。

定義

• apply()方法：

Function.apply(obj,args)
obj：這個對象將代替Function類裏this對象

args：這個是數組，它將做爲參數傳給Function(args-->arguments）

• call()方法：

Function.call(obj,[param1[,param2[,…[,paramN]]]])
obj：這個對象將代替Function類裏this對象

params：這個是一個參數列表

---

相同點與不一樣點

1. 相同點

   做用是同樣的，call 和 apply 都是爲了改變函數體內部 this 的指向，也就是把Function(即this)綁定到obj，這時候obj具有了Function的屬性和方法，說白一點就是obj繼承了Function的屬性和方法。

2. 不一樣點

   相信你們也已經發現了，他們惟一區別就是接受參數的方式不太同樣，apply接受的是數組參數，call接受的是連續參數。

---

方法使用

咱們來看下面一個例子：

定義一個函數mul

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

接着咱們在控制檯上打印出

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

可能你會發現到，第一行 console.log(mul.call(null,2,3)) 沒什麼變化，call()的第一個參數就是改變的 this 指向，若是爲 null 則函數的 this 不變，注意，若是在嚴格模式下（函數體或全局的開頭有這句話：'use strict'），this 會變成 null。若是函數自己有參數，則從 call 的第二個參數開始寫起。
第二行 console.log(mul.call('s',2,3)) 將函數的 this 指向一個字符串 's'. ===>> 's'+2 * 3=s6
第三行 console.log(mul.call(3,2,3)) 將函數的this指向一個數字3

===>>   3+2 \* 3=9

以此類推。

再舉一個例子

學js的都知道 Math.max() 方法,好比有三個參數2,3,4那麼咱們要找出最大值能夠這麼寫 Math.max(2,3,4) 那要是有 100 個或更多參數呢？這時候就能夠結合 apply 和數組輕鬆實現了。

好比定義一個數組

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

接着咱們打印出

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

這樣一來就很簡潔明瞭。

再舉一個例子實現對象繼承

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就實現了繼承（用apply也相似）