js中this的指向问题

        this在js中必不可少，在很多地方都会用到，然而在使用的时候，经常会困扰this到底是指向谁？为什么会指向这个地方？今天根据自己的理解，记录一下this指向的几个规则。

默认绑定

function foo() {
    console.log(this);  // window
}
foo();

function foo() {
    console.log(this); // window
}

function bar() {
    foo();
}
bar();

console.log(this); // window

• 在全局作用域下面打印this，那么this的指向是指向window的；
• 而我们在浏览器中测试打印this时，也是指向的window；
• 通过运行bar函数执行 foo函数，其实在运行的时候并没有任何对象的绑定，这个时候this的指向还是 window，所以在下面这种情况下也是指向的window

function foo(fn) {
  fn()
}

var obj = {
  message: “Hello This”,
  bar: function() {
    console.log(this); // window
  }
}

foo(obj.bar);

隐式绑定

通过对象去调用函数：

function foo() {
    console.log(this); // obj对象
}

var obj = {
    message: "Hello This";   
    foo: foo
}

obj.foo(); 

由上图我们可以看到foo的调用位置是通过 obj.foo()去调用的，所以这个时候 this会隐式的被绑定到obj对象上面去。

显示绑定

可以通过call、apply、bind进行显示绑定，下面简单举三个例子分别说明

• call

function foo() {
    console.log(this); // object {message: "Hello This"}
}

foo.call({message: "Hello This"})

• apply

function foo() {
    console.log(this); // object {message: 'Hello This'}
}

foo.apply({message: 'Hello This'})

         通过上面我们可以看到通过call和apply的使用方法都差不多；而它们的不同点是传递参数方式不同，下面我们通过例子看看：

function foo() {
    console.log(arguments); // [1, 2, 3]
    console.log(this); // obj对象
}

var obj = {
    message: 'Hello This'
}
foo.call(obj, 1, 2, 3);
foo.apply(obj, [1, 2, 3]);

        从上面可以看出，call 和 apply 的第一个参数作为绑定的 this；而call 后面分别接上参数，apply则需要在数组里写上参数；而这两个的共同点都是会立即执行。

• bind

         bind和上面两个比起来稍微特殊些，其实就是闭包的一个方式实现的，下面举个例子

function foo() {
    console.log(arguments); // [1, 2, 3]
    console.log(this);  // obj对象
}

var obj = {
    message: 'Hello This';
}
const fn = foo.bind(obj, 1, 2, 3)
fn();

        可以看到，通过bind来绑定this，它会返回一个新的函数，而后面的参数会作为新函数的参数，这个时候fn就会永久的绑定obj这个对象上，无论何时执行，this的指向都会指向 obj对象。

new关键词绑定

        在js中函数可以作为构造函数来使用，那么这个时候相当于创建了一个全新的对象，而这个新对象会绑定到函数的this上，下面举个例子：

function foo(message) {
  console.log(this); // foo {}
  this.message = message; // foo {message: "Hello This"}
}

var obj = new Foo("Hello This");
console.log(obj);

箭头函数this指向问题

        在箭头函数中，this的指向永远指向父级作用域的，那么即使是通过 call 、apply去改变this指向也是无效的，箭头函数都会去上级作用域去找。

其他：

         像我们经常使用的settimeout 里面的this指向基本上是指向window 的。

总结：

        this的绑定规则就是上面这几种，而这些规则的优先级为 ： new绑定 > 显示绑定（bind）> 隐式绑定 > 默认绑定。

        简单的记录一下，不够全面，哈哈哈哈！