this指向與call,apply,bind

this問題對於每個前端同學來說相信都不陌生，在平時開發中也經常能碰到，有時候因為this還踩過不少坑，並且this問題在面試題中出現的概率也非常高，我們一起來了解一下this的指向與call，apply，bind

this的指向

ES5中的this

在ES5中，this一般指向函數調用時所在的執行環境，與函數定義的位置無關。也可以理解成this永遠指向最后調用它的對象

• 在普通函數中的this總是指向它的直接調用者，默認情況下指向全局對象（瀏覽器為window）
• 在嚴格模式下，沒有直接調用者的函數中的this為undefined
• Call, apply,bind函數，this指向的是綁定的對象
• 對象函數調用，this指向調用它的那個對象
• 構造函數中的this，指向該構造函數new出來的實例對象

var obj = {
    a:function(){
        console.log(this)
        console.log(this.b)
        console.log(this.c)
        console.log(this.a)
    },
    b:2,
    c:3
}
var b = obj.a
b()
// 結果：window,f(){...},undefined,undefined
obj.a()
// 結果：{a:..,b:2,c:3},2,3,f(){...}

/**
 * 解析：
 * b()調用，此時b函數所處的執行環境是全局環境，this指向window
 * obj.a()調用，此時a是作為對象方法進行調用，this指向調用對象obj
 */

ES6中的this

在ES6中新增了一種箭頭函數，箭頭函數的this始終指向它定義時的this，而非執行時

• 箭頭函數沒有自己的this，它的this是繼承來的，默認指向它定義時所在的對象，即箭頭函數中的this指向外層代碼的this
• 不可以當作構造函數，也就是說，不可以用new命令調用，否則會拋出一個錯誤
• 箭頭函數內沒有arguments對象，可以用rest參數代替
• 不可以使用yield命令，因此箭頭函數不能用作generator函數
• 箭頭函數沒有自己的this，所以不能用call，apply，bind這些方法改變this指向

var obj = {
            hi: function(){
                console.log(this);
                return ()=>{
                    console.log(this);
                }
            },
            sayHi: function(){
                return function() {
                    console.log(this);
                    return ()=>{
                        console.log(this);
                    }
                }
            },
            say: ()=>{
                console.log(this);
            }
        }
        const hi = obj.hi()   //this->obj對象
        hi()   // this->obj對象
        const sayHi = obj.sayHi()
        const sayHiBack = sayHi()  //this->window
        sayHiBack() //this->window
        obj.say() //this->window

輸出結果依次為obj對象，obj對象，window，window，window

解析：

1.第一個obj.hi()很好理解，hi為普通函數，this指向調用它的那個對象，即obj

2.第二個執行hi()，它其實是上一個執行后返回的函數，並且是箭頭函數，箭頭函數本身沒有this，我們往他的上一級去查找，我們剛剛得出上一級的this為obj，所以這里的this也指向obj

3.第三個執行obj.sayHi()，這里沒有打印this，而是返回了一個普通函數

4.第四個執行sayHi()，其實執行的是剛剛返回的那個普通函數，這里的this則指向調用它的那個對象，沒有則指向window

5.第五個執行sa yHiBack()，指向的是剛剛第四次執行返回的箭頭函數，OK，箭頭函數我們往上一層找，也是window

5.第六個執行obj.say()，這里這個say()是一個箭頭函數，當前代碼塊obj不存在this，只能往上一層查找，指向window

call, apply,bind的區別

我們都知道call，apply，bind都可以用來改變this指向，但這三個函數稍稍有些不同。

• call與apply唯一的區別就是它們的傳參方式不同，call從第二個參數開始都是傳給函數的，apply只有兩個參數，第二個參數是一個數組，傳給函數的參數都寫在這個數組里面
• call與apply改變了函數的this指向后會立即執行，而bind是改變函數的this指向並返回這個這個函數，不會立即執行
• call與apply的返回值是函數的執行結果，bind的返回值是改變了this指向的函數的拷貝

call

call() 方法使用一個指定的 this 值和單獨給出的一個或多個參數來調用一個函數。（來自MDN）

語法： fun.call(thisArg,arg1[,arg2,arg3...])

解釋： call方法用來為一個函數指定this對象，第一個參數是你想要指定的那個對象，后面都是傳給該函數的參數，之間用逗號隔開

var person = {
  name:'南玖',
  gender: 'boy',
}
var speak = function(age,hobbit){
  console.log(`我是${this.name}，今年${age}歲，愛好${hobbit}，歡迎優秀的你關注～`)
}
speak.call(person,18,'前端開發') // 我是南玖，今年18歲，愛好前端開發，歡迎優秀的你關注～

apply

apply() 方法調用一個具有給定this值的函數，以及以一個數組（或類數組對象）的形式提供的參數。（來自MDN）

語法： fun.apply(thisArg,[arg1,arg2,arg3...])
解釋： apply方法與call方法基本類似，不同的是，兩者的參數形式，apply方法傳遞的是一個由若干個參數組成的數組。

var person = {
  name:'南玖',
  gender: 'boy',
}
function speak(age,hobbit){
  console.log(`我是${this.name}，今年${age}歲，愛好${hobbit}，歡迎優秀的你關注～`)
}
speak.apply(person,[18,'打籃球⛹️']) //我是南玖，今年18歲，愛好打籃球⛹️，歡迎優秀的你關注～

bind

bind() 方法會創建一個新函數。當這個新函數被調用時，bind() 的第一個參數將作為它運行時的 this，之后的一序列參數將會在傳遞的實參前傳入作為它的參數。(來自於 MDN )

語法： fun.bind(thisArg,arg1[,arg2,arg3...])()
解釋： bind方法用來為方法指定this對象並返回一個新的函數，它的參數與call函數一樣。它本身是不會調用的，需要自己手動調用。

var person = {
  name:'南玖',
  gender: 'boy',
}
function speak(age,hobbit){
  console.log(`我是${this.name}，今年${age}歲，愛好${hobbit}，歡迎優秀的你關注～`)
}
speak.bind(person,18,'旅游⛱️')() //我是南玖，今年18歲，愛好旅游⛱️，歡迎優秀的你關注～

注意這里需要自己再調用一次，因為bind只會返回這個改變了this指向的函數，並不會自己執行

call，apply該用哪個？

• 參數數量，順序確定就用call，參數數量，順序不確定就用apply
• 參數數量少用call，參數數量多用apply
• 參數集合已經是一個數組的情況，最好用apply

bind的應用場景

1.保存參數

我們先來看一道經典面試題

for(var i=1;i<6;i++){
  setTimeout(()=>{
    console.log(i)  // 6,6,6,6,6
  },i*1000)
}

相信大家都知道這里會打印出五個6，因為在執行settimeout回調函數時，i已經變成了6

那么如何讓它打印出1，2，3，4，5呢？

當然方法有很多，比如閉包、將var改成let使它形成塊級作用域，這里先不講，后面單獨講閉包會提出來

我們也可以用bind來解決

for(var i=1;i<6;i++){
  setTimeout(function(i){
    console.log(i) // 1,2,3,4,5
  }.bind(null,i),i*1000)
}

2.回調函數this丟失問題

var student = {
  subject:['JS','VUE','REACT'],
  study: function(){
    setTimeout(function(){
      console.log(`我是南玖，我在學習${this.subject.join('、')}`)
    }.bind(this),0)
  }
}
student.study() //我是南玖，我在學習JS、VUE、REACT

想一想這里settimeout的回調如果不用bind綁定this，結果會怎樣？

結果是報錯，因為不給settimeout回調函數綁定this的話，那它的this應該指向的是全局window，全局沒有subject，調用join會報錯

模擬call

思路：

1. 根據call的規則設置上下文對象,也就是this的指向。
2. 通過設置context的屬性,將函數的this指向到context上
3. 通過隱式綁定執行函數並傳遞參數。
4. 刪除臨時屬性，返回函數執行結果

Function.prototype.myCall = function(context){
    // context指的是那個想要借方法的對象，並為它指定默認值，沒傳就是window
    var context = context || window
    // 將要借用的那個方法綁定在當前要使用該方法的對象的fn屬性上
    context.fn = this
    // 這里的this指向你想要借用的那個方法也就是.myCall前面的調用者(這里的this指的是一個函數)
    console.log(this)
    //獲取參數，也就是相當於call的參數列表
    var args = [...arguments].slice(1)
    // 將參數傳給該函數並執行
    var res = context.fn(...args)
    // 刪除該方法
    delete context.fn
    // 返回執行結果
    return res
}

模擬apply

思路：

• 與call類似，主要區別是參數的處理

/* 
實現原理與call類似，主要是參數不同，apply接受一個參數數組
*/
Function.prototype.myApply = function (context){
    var context = context || window
    context.fn = this
    // 判斷第二個參數是否為數組，不為數組需提示用戶(報錯提示)
    console.log(arguments.length)
    if(arguments.length > 2){
        throw new Error('只能傳遞兩個參數')
    }else if(!(arguments[1] instanceof Array)){
        throw new Error('第二個參數需要是數組類型')
    }
    var res = context.fn(...arguments[1])
    delete context.fn
    return res
}

模擬bind

Function.prototype.myBind = function(context){
    var context = context || window
    var _this = this
    var args = [...arguments].slice(1)
//    這里返回的是一個函數
    var res = function(){
        return _this.apply(context,...args)
    }
    return res
}