阅读 1652

手写call、apply、bind

说到call、apply、bind首先是改变this指向的问题(ES5中),其次它们之间的区别,最后光说不练假把式,手写call、apply、bind!

this指向

在 ES5 中,其实 this 的指向,始终坚持一个原理: this 永远指向最后调用它的那个对象(也就是说:this取什么值是在函数执行时确定的,不是在函数定义时确定的)

  • 看个例子:
var name = "如来佛祖";
function a() {
  var name = "孙悟空";
  console.log(this.name); // 如来佛祖
  console.log("inner:" + this); //inner:[object Window]
}
a();
console.log("outer:" + this); //outer:[object Window]
复制代码

很简单,像上面说的 this取什么值是在函数执行时确定的,最后k看调用 a 的地方 a(),前面没有调用的对象那么就是全局对象 window,这就相当于是 window.a()这里我们没有使用严格模式,如果使用严格模式的话,全局对象就是 undefined,那么就会报错 Uncaught TypeError: Cannot read property 'name' of undefined。

  • 再来一个:
var name = "如来佛祖";
var a = {
  name: "孙悟空",
  fn: function() {
    name: "猪八戒",
    console.log(this.name); //孙悟空
  }
};
window.a.fn();
复制代码

为什么,这里会是孙悟空,而不是猪八戒呢,或者为什么不是如来佛祖呢,因为如上面的那句话:this取什么值是在函数执行时确定的,因为,window.a.fn()就表示,调用 fn 的是 a 对象,也就是说 fn 的内部的 this 是对象 a,所以name是孙悟空。

改变this 的指向

  • 使用 ES6 的箭头函数
  • 在函数内部使用 _this = this
  • 使用 apply、call、bind

使用 ES6 的箭头函数

    var name = "如来佛祖";
    var a = {
      name: "孙悟空",
      func1: function() {
        console.log(this.name);
      },
      func2: function() {
        setTimeout(() => {
          this.func1();
        }, 100);
      }
    };
    a.func2(); //孙悟空
复制代码

在函数内部使用 _this = this

    var name = "如来佛祖";
    var a = {
      name: "孙悟空",
      func1: function() {
        console.log(this.name);
      },
      func2: function() {
        var _this = this;
        setTimeout(function() {
          _this.func1();
        }, 100);
      }
    };
    a.func2(); //孙悟空
复制代码

使用 apply、call、bind

使用 apply
    var a = {
        name: "孙悟空",
        func1: function() {
          console.log(this.name);
        },
        func2: function() {
          setTimeout(
            function() {
              this.func1();
            }.apply(a),
            100
          );
        }
      };
    a.func2(); 

复制代码
使用 call 
    var a = {
        name: "孙悟空",
        func1: function() {
          console.log(this.name);
        },
        func2: function() {
          setTimeout(
            function() {
              this.func1();
            }.apply(a),
            100
          );
        }
      };
    a.func2(); //孙悟空

复制代码
使用bind 
    var a = {
        name: "孙悟空",
        func1: function() {
          console.log(this.name);
        },
        func2: function() {
          setTimeout(
            function() {
              this.func1();
            }.bind(a)(),
            100
          );
        }
      };
    a.func2(); //孙悟空
复制代码

call、apply、bind的区别

  • call语法

    fun.call(thisArg[, arg1[, arg2[, ...]]])

  • apply语法

    fun.apply(thisArg, [argsArray])

  • bind语法

    bind() 方法创建一个新的函数,在 bind() 被调用时,这个新函数的 this 被指定为 bind() 的第一个参数,而其余参数将作为新函数的参数,供调用时使用。

手写call、apply、bind

以下内容部分来自来自 Medium

  • 手写call
Function.prototype.myOwnCall = function(someOtherThis) {
    someOtherThis = someOtherThis || global;
    var uniqueID = "00" + Math.random();
    while (someOtherThis.hasOwnProperty(uniqueID)) {
      uniqueID = "00" + Math.random();
    }
    someOtherThis[uniqueID] = this;
    const args = [];
    
    // arguments are saved in strings, using args
    for (var i = 1, len = arguments.length; i < len; i++) {
      args.push("arguments[" + i + "]");
    }

    // strings are reparsed into statements in the eval method
    // Here args automatically calls the Array.toString() method.
    var result = eval("someOtherThis[uniqueID](" + args + ")");
    delete someOtherThis[uniqueID];
    return result;
  };


复制代码
  • 手写apply
Function.prototype.myOwnApply = function(someOtherThis, arr) {
  someOtherThis = someOtherThis || global;
  var uniqueID = "00" + Math.random();
  while (someOtherThis.hasOwnProperty(uniqueID)) {
    uniqueID = "00" + Math.random();
  }
  someOtherThis[uniqueID] = this;

  var args = [];
  var result = null;
  if (!arr) {
    result = someOtherThis[uniqueID]();
  } else {
    for (let i = 1, len = arr.length; i < len; i++) {
      args.push("arr[" + i + "]");
    }
    result = eval("someOtherThis[uniqueID](" + args + ")");
  }

  delete someOtherThis[uniqueID];
  return result;
};
复制代码
  • 手写bind
// 模拟 bind
  Function.prototype.bind1 = function() {
    //arguments获取一个函数所有的参数,它是一个列表
    // 将参数拆解为数组
    const args = Array.prototype.slice.call(arguments);

    // 获取 this(数组第一项)
    const t = args.shift();

    // 好比fn1.bind(...) 中的 fn1 或者下面的_this=this
    // const self = this;
    _this=this
    
    // 返回一个函数(bind本来是返回一个函数)
    return function() {
      // apply的第一个参数就是this
      return _this.apply(t, args);
    };
  };

复制代码

待更新❤️,后续继续补充

文章分类
前端
文章标签