JavaScript之call()、apply()、bind() 详解！

 作为一名合格的前端开发者，大家都知道JavaScript中的this指向问题是一件很苦恼的事情，因为你稍不留意他就跳来跳去 很多Bug就是在不经意间this上下文出错导致。call()、apply()、bind()的作用也恰恰与this有关，因为在项目开发中很少用到，大家只知道他们是为了：“改变this指向”，但是这样草草了事的答案，只会暴露出你对它们“根本不了解”！！OK，先来看一段简单的代码：

  //  window
  var name, age, love;
  function Create(name, age, love) {
      this.name = name
      this.age = age
      this.love = love
  }
  Create('王二牛', '18岁', '唱歌') //调用函数 Create()
  console.log(name, age, love)    //输出结果 王二牛 18岁 唱歌

再此之前先了解call()函数的定义:

call()：它可以用来调用所有者对象作为参数的方法。通过 call()，能够使用属于另一个对象的方法。

首先，在window中定义了name age love三个变量，当执行Create()函数时 函数内部的this毫无疑问指向window，因为他没有具体指向调度者是谁，所以只能是window对象，其实此处调用相当于下面的写法：

 Create.call(window, '王二牛', '18岁', '唱歌') //编译器默认加上了call、并且指向window

然后，我们使用call()、()apply()函数改造一段改变this指向的代码：注意第一个参数此刻不是window对象，而是Person对象，故this不再指向winodw。

  //  call 
  var name, age, love;
  var Person = {} //创建新对象

  function Create(name, age, love) {
      this.name = name
      this.age = age
      this.love = love
  }
  Create.call(Person, '王二牛', '18岁', '唱歌') //第一个参数指向Person对象
  console.log(Person) // 输出结果 {name: "王二牛", age: "18岁", love: "唱歌"}

语法：call()、apply()函数的第一个参数都是this的指向，即调用者。第二个参数及其以后的所有参数都是Create函数的实参；

区别：call()第二个以及之后的若干参数可以是string、function、Array、object等，且可以有多个参数；

          apply()只能有两个参数，并且实参只能以数组类型传递到调用函数内部，这也是两者唯一的区别；

---

接着我们来看看bind()函数的作用:

bind():将函数绑定到某一个特定的对象上，调用函数内的this指向的值会被绑定到传入bind()第一个参数的值，例如，f.bind(obj)，实际上可以理解为obj.f()；

  //  bind
  var name = '张三疯', age = 88;
  var obj = {
      name: '杨过',
      age: 18,
      sex: '男',
      fun: function () {
          console.log(this.name + " 今年" + this.age + "岁," + "性别:" + this.sex)
      }
  }
  var Girl = {
      name: "小龙女",
      age: 16,
      sex: "女"
  }
  obj.fun()   // 输出结果 杨过 今年18岁,性别:男
  obj.fun.bind(window)() // 输出结果 张三疯 今年88岁,性别:undefined
  obj.fun.bind(Girl)()   // 输出结果 小龙女 今年16岁,性别:女

上述代码，直接调用 obj.fun() 函数、内部的this指向了 obj 自身对象，因为调度者是obj自身。

扫描二维码关注公众号，回复： 8677663 查看本文章

当使用 bind 函数调用时 bind的第一个参数指向了 window 对象，即改变了 this 指向  window 中只定义了变量 name、age ，sex未定义，所以输出结果为“张三疯 今年88岁,性别:undefined”。

第三次调用改变了this指向为Girl对象，那么她的小龙女就上场了。

注意： bind()除了返回是函数以外，它的参数和 call 一样。

---

 如果我的博客帮助你解决了开发问题，请不要吝啬你的小红心哦！❤

---