一起手写吧！call、apply、bind！

apply,call,bind都是js给函数内置的一些api,调用他们可以为函数指定this的执行,同时也可以传参。

call

call 接收多个参数，第一个为函数上下文也就是this，后边参数为函数本身的参数。

let obj = {
    name: "一个"
}

function allName(firstName, lastName) {
    console.log(this)
    console.log(`我的全名是“${firstName}${this.name}${lastName}”`)
}
// 很明显此时allName函数是没有name属性的
allName('我是', '前端') //我的全名是“我是前端”  this指向window
allName.call(obj, '我是', '前端') //我的全名是“我是一个前端” this指向obj

apply

apply接收两个参数，第一个参数为函数上下文this，第二个参数为函数参数只不过是通过一个数组的形式传入的。

allName.apply(obj, ['我是', '前端'])//我的全名是“我是一个前端” this指向obj

bind

bind 接收多个参数，第一个是bind返回值是一个函数上下文的this，不会立即执行。

        let obj = {
            name: "一个"
        }

        function allName(firstName, lastName, flag) {
            console.log(this)
            console.log(`我的全名是"${firstName}${this.name}${lastName}"我的座右铭是"${flag}"`)
        }
        allName.bind(obj) //不会执行
        let fn = allName.bind(obj)
        fn('我是', '前端', '好好学习天天向上')

        // 也可以这样用，参数可以分开传。bind后的函数参数默认排列在原函数参数后边
        fn = allName.bind(obj, "你是")
        fn('前端', '好好学习天天向上')

 

实现call

1.call主要都做了些什么。

• 更改this指向
• 函数立刻执行

2.简单实现

Function.prototype.myCall = function(context) {
  context.fn = this;
  context.fn();
}

const obj = {
  value: 'hdove'
}

function fn() {
  console.log(this.value);
}

fn.myCall(obj); // hdove

3.出现的问题

• 1.无法传值
• 2.如果fn()有返回值的话，myCall 之后获取不到

Function.prototype.myCall = function (context) {
    context.fn = this;
    context.fn();
}

const obj = {
    value: 'hdove'
}

function fn() {
    return this.value;
  }

console.log(fn.myCall(obj));

• 3.call其实就是更改this指向，指向一个Object，如果用户传的是基本类型又或者干脆就不传呢？
• 4.myCall执行之后，obj会一直绑着fn()

4.统统解决

Function.prototype.myCall = function(context) {
  // 1.判断有没有传入要绑定的对象，没有默认是window，如果是基本类型的话通过Object()方法进行转换（解决问题3）
  var context = Object(context) || window;
  
  /**
    在指向的对象obj上新建一个fn属性，值为this，也就是fn()
    相当于obj变成了
    {
        value: 'hdove',
        fn: function fn() {
          console.log(this.value);
        }
    }
  */
  context.fn = this;
  
  // 2.保存返回值
  let result = '';
  
  // 3.取出传递的参数 第一个参数是this， 下面是三种截取除第一个参数之外剩余参数的方法（解决问题1）
  const args = [...arguments].slice(1);
  //const args = Array.prototype.slice.call(arguments, 1);
  //const args = Array.from(arguments).slice(1);
  
  // 4.执行这个方法，并传入参数 ...是es6的语法用来展开数组
  result = context.fn(...args);
  
  //5.删除该属性（解决问题4）
  delete context.fn;
  
  //6.返回 （解决问题2）
  return result;
}


const obj = {
  value: 'hdove'
}

function fn(name, age) {
  return  {
      value: this.value,
      name,
      age
  }
}

fn.myCall(obj, 'LJ', 25); // {value: "hdove", name: "LJ", age: 25}

二、手动实现Apply

实现了call其实也就间接实现了apply，只不过就是传递的参数不同

Function.prototype.myApply = function (context, args) {
    var context = Object(context) || window;

    context.fn = this;

    let result = '';

    //4. 判断有没有传入args
    if (!args) {
        result = context.fn();
    } else {
        result = context.fn(...args);
    }

    delete context.fn;

    return result;
}


const obj = {
    value: 'hdove'
}

function fn(name, age) {
    return {
        value: this.value,
        name,
        age
    }
}

fn.myApply(obj, ['LJ', 25]); // {value: "hdove", name: "LJ", age: 25}

三、实现Bind

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

bind和apply的区别在于,bind是返回一个绑定好的函数,apply是直接调用.其实想一想实现也很简单,就是返回一个函数,里面执行了apply上述的操作而已.

不过有一个需要判断的点,因为返回新的函数,要考虑到使用new去调用,并且new的优先级比较高,所以需要判断new的调用,还有一个特点就是bind调用的时候可以传参,调用之后生成的新的函数也可以传参,效果是一样的,所以这一块也要做处理

因为上面已经实现了apply,这里就借用一下,实际上借用就是把代码copy过来

Function.prototype.myBind = function (context, ...args) {
    const fn = this
    args = args ? args : []
    return function newFn(...newFnArgs) {
        if (this instanceof newFn) {
            return new fn(...args, ...newFnArgs)
        }
        return fn.apply(context, [...args,...newFnArgs])
    }
}