详解改变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图解

• 小白扫盲自我修炼，新人定有不足的还请大佬不吝赐教。
• 觉得文章还不错的话就点个赞吧~~
• 友善发言的人运气不会太差哦
• 师承周啸天是也