JS基礎之call（）和apply（）函數的應用

前言

        在js中，每個函數的原型都指向Function.prototype對象（js基於原型鏈的繼承）。因此，每個函數都會有apply，call，和bind方法，這些方法繼承於Function。它們的作用是一樣的，都是用來改變函數中this的指向。

介紹

        今天接觸了兩個關於改變this指向的函數，說實話在一開始學習JS的時候就對this的使用不是很清楚，不是很明白this指的是哪一個對象，要在什麼時候使用this調用才合適。當碰到改變this指向的函數，自然也是有點興趣。今天就簡單的做一個小小的總結和分享。

        call()函數：

字面意思就是調用的意思。在C#和VB中，也經常使用call函數來調用一些經常用到的類。此處使用也是調用的意思。使用一個小例子來解析一些關於call()函數調用時候的一些特點：

        首先是關於call函數無參的調用。

var person = {
    fullName: function() {
        return this.firstName + " " + this.lastName;
    }
}
var person1 = {
    firstName:"John",
    lastName: "Doe",
}
var person2 = {
    firstName:"Mary",
    lastName: "Doe",
}
person.fullName.call(person2);  // 將返回 "Steve Jobs"

通過此實例的運行結果，可以看出，call函數在無參數時，調用的就是括號中的內容，當我們傳入參數之後在進行一次對比：

var person = {
  fullName: function(city, country) {
    return this.firstName + " " + this.lastName + "," + city + "," + country;
  }
}
var person1 = {
  firstName:"Bill",
  lastName: "Gates"
}
person.fullName.call(person1, "Seattle", "USA");

返回結果：Bill Gates Seattle USA

        兩個實例的結果可以看出：我們調用的事person實例的方法，但是實際上person中的this都是代表的person1（2）；很明顯的改變了this指向。

        apply()函數

        接下來是apply函數，其實兩者在使用上是沒有很大區別的，但是在傳參方面有一點點的區別：apply函數傳的是數組中的參數。如果要使用數組而不是參數列表，則 apply() 方法非常方便。

var person = {
  fullName: function(city, country) {
    return this.firstName + " " + this.lastName + "," + city + "," + country;
  }
}
var person1 = {
  firstName:"John",
  lastName: "Doe"
}
person.fullName.apply(person1, ["Oslo", "Norway"]);
返回結果：John Doe Oslo Norway

    bind()函數

       除此之外還有一個bind函數，和兩者的用途差不多，就順便就此做一個小總結。

       bind函數和call很相似，第一個參數是this的指向，從第二個參數開始是接收的參數列表。區別在於bind方法返回值是函數以及bind接收的參數列表的使用。

var name = "佚名";
var age = 20;
//global.name
//global.age

var p1 = {
    name: "張三",
    age: 12,
    func: function(){
        console.log(`姓名:${this.name},年齡:${this.age}`)
    }
}

var p2 = {
	name: "李四",
	age: 15
}
p1.func.bind(p2)(); //姓名:李四,年齡:15

      call，apply，bind 在用法上的異同

相同點：

        call，apply，bind 這三個方法的第一個參數，都是this。如果你使用的時候不關心 this是誰的話，可以直接設置爲 null

不同點：

        函數調用 call，apply方法時，返回的是調用函數的返回值。而bind是返回一個新的函數，你需要再加一個小括號來調用。call和apply的區別就是，call接受的是一系列參數，而apply接受的是一個數組。但是有了 ES6引入的 ...展開運算符，其實很多情況下使用 call和apply沒有什麼太大的區別。

舉個例子，找到數組中最大的值

        const arr = [1, 2, 3, 5];Math.max.call(null, ...arr);Math.max.apply(null, arr);複製代碼Math.max 是數字的方法，數組上並沒有，但是我們可以通過 call, apply 來使用 Math.max 方法來計算當前數組的最大值。

參考鏈接：

https://baijiahao.baidu.com/s?id=1661453842078025203&wfr=spider&for=pc

https://www.cnblogs.com/starry-skys/p/11901677.html