詳解改變this指向的三種方法call apply bind及重寫（模擬）

call方法

• 語法：函數.call([context],[params1],....)
• 函數基於原型鏈找到Function.prototype.call這個方法，而且把它執行，在call方法執行的時候完成了一些功能
• 首先讓當前函數執行
• 把函數中的THIS指向改成第一個傳遞給CALL的實參
• 把傳遞給CALL其他的實參，當作參數信息傳遞給當前函數
• 若是執行CALL一個實參都沒有傳遞，非嚴格模式下是讓函數中的THIS指向WINDOW，嚴格模式下指向的是UNDEFINED

window.name = 'WINDOW';

let obj = {name: 'OBJ'};

function fn(n,m) {
	console.log(this.name);
}
fn(10,20); //=>this:window 嚴格下是undefined
fn.call(obj); //=>this:obj n/m=undefined
fn.call(obj,10,20); //=>this:obj n=10 m=20
fn.call(10,20); //=>this:10 n=20 m=undefined

fn.call(); //=>this:window 嚴格下是undefined
fn.call(null); //=>this:window 嚴格下是null（第一個參數傳遞的是null/undefined/不傳，非嚴格模式下this指向window，嚴格模式下傳遞的是誰this就是誰，不傳this是undefined）

還能夠基於call讓類數組使用數組方法
function sum(){
   //=>把ARGUMENTS轉換爲數組：借用數組原型上的SLICE方法，只要讓SLICE中的THIS指向ARGUMENTS，就至關於把ARGUMENTS轉換爲新數組
   //let arg=Array.prototype.slice.call(arguments,0);
   let arg=[].slice.call(arguments,0);
   //=>數組求和
   return eval(arg.join('+'));
}
let total=sum(10,20,30,40); //100
或這樣循環元素類數組
[].forEach.call(listArr,(item,index)+>{
    console.log(item,index);
})
複製代碼

apply

• apply方法和call方法做用同樣，修改函數中的this，而且讓這個修改this以後的函數執行；
• 可是傳參方式不一樣；call方法是一個一個的傳遞實參給sum的，apply是把實參都放到一個數組中，數組項是傳遞給sum的實參

騷操做 求數組最大值 Math.max 只能傳一組數但不能傳遞數組
let ary = [12,23,13,24,10,25]，
   n = Math.max.apply(null,ary);
   n //25
   其中apply第一個參數是誰並不重要，只是想基於它傳值的方式傳給Math.max
複製代碼

bind

• 做用：預先改變函數中的this，不讓函數執行，返回一個修改this後的新函數。

window.name='WIN';
   function fn() {
       console.log(this.name);
    }
    var obj = {
        name: "OBJ",
        fn: () => {
            console.log(this.name);
        }
    };
    fn.bind(obj); //不會執行
    fn.bind(obj)(); //=>會執行bind OBJ
    let shark = fn.bind(obj);
    shark(); //=>也會執行 OBJ
    obj.fn.bind(obj)(); // 這個結果是WIN
    // 由於箭頭函數沒有this！！！不懂請看前一篇文章
複製代碼

重寫（模擬）這些方法

·模擬一個call方法·
~function () {
    /*生成隨機函數名：時間戳的方式*/
    function queryRandomName () {
        let time = new Date().getTime();
        return '$zhufeng' + time;
    }
    // 模擬CALL方法改變函數中的THIS
    function changeThis(context = window,...arg){
        let _this = this,
            result = null,
            ran = queryRandomName();
        context[ran] = _this;
        result = context[ran](...arg);
        delete context[ran];
        return result;
  };
    Function.prototype.changeThis = changeThis;
}();



·模擬一個apply方法·
~function(){
    /*生成隨機函數名：時間戳的方式*/
    function queryRandomName () {
        let time = new Date().getTime();
        return '$zhufeng' + time;
    }
    function changeThis (context = window, arg = []) {
        let _this = this,
            result = null,
            ran = queryRandomName();
        context[ran] = _this;
        result = context[ran](...arg);
        delete context[ran];
        return result;
  };
    Function.prototype.changeThis = changeThis;
}();

·模擬一個bind方法·
~function(){
   function changeThis(fn,...ary) {
      var that = this;
      return function (...arr) {
       that.apply(fn,ary.concat(arr));
       }
    }
    Function.prototype.changeThis = changeThis;
}();

最後來道題吧
// 阿里的面試題
function fn1(){console.log(1);}
function fn2(){console.log(2);}
fn1.call(fn2);
fn1.call.call(fn2);
Function.prototype.call(fn1);
Function.prototype.call.call(fn1);

複製代碼

call圖解

• 小白掃盲自我修煉，新人定有不足的還請大佬不吝賜教。
• 以爲文章還不錯的話就點個贊吧~~
• 友善發言的人運氣不會太差哦
• 師承周嘯天是也