使用bind，apply，call改变函数中this的指向

首先先举个例子

var a = 20

function test(){
  console.log(this.a); // 20
}

test()

向上面这样直接执行函数，函数内部的this默认是指向全局的，在浏览器中这个this就指向window，所以this.a = 20

通过call，apply，bind方法可以改变函数内部this的指向

• call ， apply

var obj1 = {
  name: "obj1"
}

var obj2 = {
  name: "obj2"
}

var name = "全局的name"

function printName(a, b) {
  console.log(this.name, a, b);
}


printName.call(obj1, 1, 2) // obj1 1 2
printName.call(obj2, 3, 4) // obj2 3 4

printName.apply(obj1, [5, 6]) // obj1 5 6
printName.apply(obj2, [7, 8]) // obj2 7 8

call和apply的区别就在于传递参数的形式不同，第一个参数都是你想为函数指定的this，call的参数就直接以逗号隔开的方法直接写参数，而apply是以数组的形式进行传参

// call
function.call(thisArg, arg1, arg2, ......)

// apply
function.apply(thisArg, [arg1, arg2, ......])

两者的返回值都是调用call或者apply方法的函数的返回值结果，没有返回值那就是undefined

function test(){
  return "哈哈哈"
}

function test1(){
  return true
}

console.log(test.apply()); // 哈哈哈
console.log(test1.call()); // true

不过在指定this的时候，也可以指定是null或者undefined，不过只有在严格模式下才是真正将this指定为null或者undefined，非严格模式下，自动替换成全局对象

function test() {
  console.log(this);
}

test.call(null) // window

var a = "haha"

function test() {
  console.log(this.a); // haha
}

test.call(null)

• bind 方法

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

它的参数同call方法

function.bind(thisArg, arg1, arg2, ......)

不同的就是返回值了，bind调用后返回一个原函数的拷贝，并拥有指定的 this 值和初始参数。

说白了，就是返回了一个新的函数，这个函数中才被绑定了你指定的this和参数，call和apply调用就执行了，bind需要手动调用返回的函数才行

var name = "全局的"
var obj = {
  name: "obj的"
}

function test(n, m) {
  console.log(this.name, n, m);
}

var newFn = test.bind(obj, 1, 4)

console.log(newFn);
// ƒ test(n, m) {
//   console.log(this.name, n, m);
// }

newFn() // obj的 1 4

注意：bind只能绑定一次，不能再给bind返回的函数再执行bind，结果始终是以第一次绑定为准

var name = "全局的"
var obj = {
  name: "obj的"
}

var obj2 = {
  name: "obj2的"
}

function test(n, m) {
  console.log(this.name, n, m);
}

var newFn = test.bind(obj, 1, 4)
newFn() // obj的 1 4

var newFn1 = newFn.bind(obj2, 2, 3)
newFn1() // obj的 1 4

this在箭头函数中的指向

箭头函数比较特殊，其内部并没有this绑定，它能访问到的this其实是
该函数所在的作用域指向的对象，所以大家要对作用域有所了解。箭头函数也不可以做构造函数

• 全局下

var test = () => {
  console.log(this); // window
}

test()

function test() {
  var innerTest = () => {
    console.log(this); // window
   }

  innerTest()
}

test()

• 对象

var name = "全局下的name"
var obj = {
  name: "obj的name",
  logName: function(){
     console.log(this.name); // obj的name
  },
  printName: () => {
    console.log(this.name); // 全局下的name
  }
}
obj.printName()

看到这个结果，部分同学们是不是有点小意外，箭头函数printName的this还是指向window，不是谁绑定他就指向谁。现在改一下：

    var name = "全局下的name"
    var obj = {
      name: "obj的name",
      outFn: function () {
        console.log(this);  // {name: 'obj的name', outFn: ƒ}
        var printName = () => {
          console.log(this.name); // obj的name
        }

        printName()
      }
    }

    obj.outFn()

此时箭头函数printName在普通函数outFn里面，outFn的作用域的this就是指向调用它的对象

• 静态this指向

    var a = 1
    var obj = {
      a: 2
    }

    var test = () => {
      console.log(a);
    }

    test() // 1
    test.call(obj) // 1
    test.apply(obj) // 1
    test.bind(obj)() // 1

箭头函数里面的this就是指向其当前作用域指向的this，不接受通过call等方法进行this修改。

我觉得也可以这样理解，箭头函数它在找this的时候，从里向外找，找到非箭头函数的作用域

若理解有误，希望大家批评指正