call,apply和bind的用法及区别

例1

  var name = '小王', age = 17
  var obj = {
    name: '小张',
    objAge: this.age,
    myFun: function() {
      console.log(this.name + '年龄：' + this.age);
    }
  }

  console.log(obj.objAge); //17
  obj.myFun() //  小张年龄：undefined

例2

  var fav = '盲僧'
  function shows() {
    console.log(this.fav);
  }
  shows() //盲僧

比较一下这两者 this 的差别，第一个打印里面的 this 指向 obj，第二个全局声明的 shows() 函数 this 是 window ；

1.call()、apply()、bind()都可以用来改变this指向

  var name = '小王', age = 17
  var obj = {
    name: '小张',
    objAge: this.age,
    myFun: function () {
      console.log(this.name + '年龄：' + this.age);
    }
  }

  var dm = {
    name: '德玛',
    age: 99
  }

  obj.myFun() //小张年龄：undefined
  obj.myFun.call(dm)  //德玛年龄：99
  obj.myFun.apply(dm) //德玛年龄：99
  obj.myFun.bind(dm)()  //德玛年龄：99

call和apply都是对函数的直接调用

bind方法返回的是一个新的函数，因此后面还需要()来进行调用才可以

2.对比call 、bind 、 apply 传参情况下

  var name = '小王', age = 17
  var obj = {
    name: '小张',
    objAge: this.age,
    myFun: function(from, to) {
      console.log(this.name + '年龄：' + this.age, '来自' + from + '去往' + to);
    }
  }

  var dm = {
    name: '德玛',
    age : 99
  }
  obj.myFun('成都','上海') //小张年龄：undefined 来自成都去往上海
  obj.myFun.call(dm, '成都', '上海')  //德玛年龄：99 来自成都去往上海
  obj.myFun.apply(dm, ['成都', '上海']) //德玛年龄：99 来自成都去往上海
  obj.myFun.bind(dm, '成都', '上海')()  //德玛年龄：99 来自成都去往上海

第一个参数都是this要指向的对象,都可以利用后续参数传参

　　call:以逗号分割传入的参数

　　apply:以数组形式传入参数

　　bind:同call方法

3.当第一个参数为null或undefined时，this指向window

  var name = '小王', age = 17
  var obj = {
    name: '小张',
    objAge: this.age,
    myFun: function(from, to) {
      console.log(this.name + '年龄：' + this.age, '来自' + from + '去往' + to);
    }
  }

  var dm = {
    name: '德玛',
    age : 99
  }
  obj.myFun('成都','上海') //小张年龄：undefined 来自成都去往上海
  obj.myFun.call(null, '成都', '上海')  //小王年龄：17 来自成都去往上海
  obj.myFun.call(undefined, '成都', '上海')  //小王年龄：17 来自成都去往上海
  obj.myFun.apply(null, ['成都', '上海'])  //小王年龄：17 来自成都去往上海
  obj.myFun.apply(undefined, ['成都', '上海'])  //小王年龄：17 来自成都去往上海
19   obj.myFun.bind(null, '成都', '上海')()  //小王年龄：17 来自成都去往上海
20   obj.myFun.bind(undefined, '成都', '上海')()  //小王年龄：17 来自成都去往上海

引用文章：https://www.runoob.com/w3cnote/js-call-apply-bind.html