前端this指向总结

前端this指向总结

使用 JavaScript 开发的时候，很多开发者多多少少会被 this 的指向搞蒙圈，但是其实它一点都不难，记住最核心的一句话：哪个对象调用函数，函数里面的this指向哪个对象。看了这篇文章，你一定会彻底明白this这个概念的。

我们先来看几个函数调用的场景

function foo() {
  console.log(this.a);
}
var a = 1;
foo();

const obj = {
  a: 2,
  foo: foo
}
obj.foo();

const c = new foo();

接下来我们一个个分析上面几个场景

• 对于直接调用 foo 来说，不管 foo 函数被放在了什么地方，this 一定是window(普通/声明函数调用，这个情况没特殊意外，就是指向全局对象window)
• 对于 obj.foo() 来说，我们只需要记住，谁调用了函数，谁就是 this，所以在这个场景下foo函数中的 this 就是obj对象。（对象函数调用，这个相信不难理解，就是那个函数调用，this指向哪里）
• 对于 new的方式来说，this 被永远绑定在了c 上面，不会被任何方式改变this。
• 但是有一个坑，虽然一般不会出现，但是有必要提一下。在构造函数里面返回一个对象，会直接返回这个对象，而不是执行构造函数后创建的对象
  
  说完了以上几种情况，其实很多代码中的this应该就没什么问题了，下面让我们看看箭头函数中的this

function a() {
  return () => {
    return () => {
      console.log(this);
    }
  }
}
console.log(a()()());

首先箭头函数其实是没有 this的，箭头函数中的this 只取决包裹箭头函数的第一个普通函数的 this。在这个例子中，因为包裹箭头函数的第一个普通函数是 a，所以此时的 this是 window。另外对箭头函数使用bind 这类函数是无效的。

最后种情况也就是 bind这些改变上下文的API了，对于这些函数来说，this取决于第一个参数，如果第一个参数为空，那么就是 window。

那么说到 bind，不知道大家是否考虑过，如果对一个函数进行多次 bind，那么上下文会是什么呢？

let a = {};
let fn = function () { 
	console.log(this);
}
fn.bind().bind(a)(); // => ?

如果你认为输出结果是 a，那么你就错了，其实我们可以把上述代码转换成另一种形式

// fn.bind().bind(a) 等于
let fn2 = function fn1() {
  return function() {
    return fn.apply();
  }.apply(a)
}
fn2();

可以从上述代码中发现，不管我们给函数bind 几次，fn 中的this 永远由第一次 bind 决定，所以结果永远是 window。

let a = { name: 'yck' };
function foo() {
  console.log(this.name);
}
foo.bind(a)();// => 'yck'

以上就是 this 的规则了，但是可能会发生多个规则同时出现的情况，这时候不同的规则之间会根据优先级最高的来决定 this 最终指向哪里。

首先，new 的方式优先级最高，接下来是 bind这些函数，然后是 obj.foo() 这种调用方式，最后是 foo这种调用方式，同时，箭头函数的this 一旦被绑定，就不会再被任何方式所改变。

如果你还是觉得有点绕，那么就看以下的这张流程图吧，图中的流程只针对于单个规则。