JS中this指向问题

首先，this的绑定和定义的位置无关，它的指向只和调用方式有关，this只有在运行时才知道指向谁。

一，默认绑定

默认绑定，也可以说是独立函数调用，这时this指向window。

function foo() {
  console.log(this)
}
foo()

二，隐式绑定

隐式绑定，可以认为是函数被绑定到某个对象，通过对象来调用，此时this指向该对象。

let obj = {
  test: function () {
    console.log(this)
  }
}

obj.test()//隐式绑定

this的指向只有在最后才能确定，即使是对象的方法赋给变量，该变量的this在该函数调用前是未知的。

let obj = {
  test: function () {
    console.log(this)
  }
}
let func = obj.test
func()

//-----------------------------------

function superfunc(func) {
  func()
}

superfunc(obj.test)

func的调用形式为独立调用，那么即使它是由对象方法赋值而来，this的指向也是window，符合默认绑定。 或者使用高阶函数来调用，只要形式不变，那么this仍旧指向window。

三，显式绑定

显式绑定涉及三个方法，apply,call,bind。在之前使用this时，如果我们想要让this指向一个对象就只能在对象中添加方法来实现，但这样会污染对象，我们是可以借用函数来对某个对象作用的，当然，你也可以理解为我们将函数的this指向改变为某个对象，而这个过程就是显式绑定。

function foo() {
  console.log(this)

}

let obj = {
  name: "Mike"
}
//apply的参数传递使用数组形式
foo.apply(obj, ["a", "b", "c"])
//call的参数传递使用列表形式
foo.call(obj, "a", "b", "c")
foo.call("hello")
foo.call(1234)

//调用foo时总是绑定到obj上，但不希望对象中有函数
let test = foo.bind(obj)
test()//这里的函数是独立调用，但是指向的对象却是obj，这涉及到优先级的问题

使用的方法很简单，第一个参数为this指向的对象，其余的参数为函数传参，apply和call的区别在于函数传参的方式不同，前者为数组形式，后者为列表形式。对于bind，这个属于一劳永逸的方法，只要绑定对象后，后续独立调用this仍然指向先前绑定的对象，相当于this被持续的改变为绑定对象。而apply和call是一次性的。bind实际开发中用的不多，在一些特殊情况下会被使用。

 

四，new绑定

new在执行时会返回一个空对象，函数的this指向也会相应的改变为该空对象，如果函数没有对象返回，那么就默认返回该空对象。如下图，constructor构造函数的函数体内创建了this.name = "Mike"，但此时是无法确认this指向的（因为不明确函数调用方式，如果为独立调用this指向window），我们创建一个实例对象来接收这个空对象，因为函数调用方式为new，所以this指向空对象，所以结果也显而易见了。

function constructor() {
  this.name = "Mike"//this指向现在还不能确定
}
const instance = new constructor()//this指向new产生的空对象，然后返回这个对象
console.log(instance)

绑定的优先级

这个可以自己测试一下，优先级为：

new > bind > apply = call > 隐式绑定 > 默认绑定