call、apply区别

相同点:都是重定向this指针的方法。
不同点:call和apply的第二个参数不相同,call是若干个参数的列表。apply是一个数组

手写一个call方法


// 在这之前需要重新认识一下call方法的执行操作
let mock = { value : 1 };
function mockNum(){
 console.log('value',this.value)
}
mockNum.call(mock) // 改变了函数中this的指向,当前this指向了mock对象

转换一下实现方法就是

let mock = {
  value:1;
  mockNum:function(){
     console.log('value',this.value)
  }
}
mock.mockNum();
所以经过上面这个操作的演化而来的结果就是如下步骤:
1. 将函数设为一个对象的属性
2. 并将这个函数的属性调用
3. 删除该函数

Function.prototype.Mycall = function(context){
  let obj = context || window;
  obj.fn = this; //   这一步可以看做是this其实就指的当前函数。
  let args = [...arguments].slice(1); // 返回删除第一个元素的数组;
  let result = obj.fn(...args); // 调用函数
  delete obj.fn;
  return result;
}

// 操作一下
let mock = { value : 1 };
function mockNum(){
  console.log('value',this.value);
}
mockNum.Mycall(mock) // value 1

然后根据上面的方法再手写一个apply方法

Function.prototype.Myapply = function (context){
    let obj = context || window;
    obj.fn = this;
    let result = arguments[1] ? obj.fn(arguments[1]) : obj.fn([]);
    delete obj.fn;
    return result;
}
let mock3 = {
  arr: [1, 2, 3, 4, 5],
};
function arrx2(arr) {
  return this.arr.concat(arr).map((x) => x * 2);
}
console.log("arrx2", arrx2.myApply(mock3));

bind方法

bind方法是直接返回一个新的函数,需要手动去调用才能执行。

创建一个新函数,当这个新函数被调用时,bind()方法的第一个参数将作为运行他的this,之后的一系列参数将会在传递的实参传入作为他的参数;
特点:1. 返回一个函数。 2. 可以传入参数;
手写一个bind方法

例如:
let foo = { value : 1 };
function bar() {
  console.log('bindFoo',this.value);
  // return this.value // 考虑到函数可能有返回值
}
let bindFoo = bar.bind(foo);
bindFoo() // 1  // 如果有返回值的情况下 bindFoo() === 1;

Function.prototype.Mybind = function(obj){
  if(typeof this !== 'function') throw new Error('not a function');
  let self = this;
  let args = [...arguments].clice(1);
  return function F(){
    if(this instanceof F){
      return new self(...args,...arguments);
    }
    return self.apply(obj,args.concat([...arguments]));
  }
}


原文地址:https://www.cnblogs.com/Fairy-Tail-blogs/p/14943066.html