This 指向

this 指向概述

在全局作用域下，this 指向 window 对象。在实际开发中我们几乎不会在全局作用于下使用 this，通常都是在函数中使用 this。

所有函数在被调用时，都会创建一个执行上下文，这个执行上下文会包含函数执行时所需的所有信息。this 也是其中的一个信息。

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

fn(); // window

const person = {
  name: "张三",
  sayName: fn
};

person.sayName(); // person

从上面的案例中我们可以看到，函数在调用时，JavaScript 会默认为 this 绑定一个值。this 的值取决于调用方式以及调用的位置。并且 this 的值在函数执行时（运行时）才能确定，不是在函数定义时确定的。

绑定规则

默认绑定

在独立调用函数，即函数没有被绑定到某个对象上进行调用，通常会默认绑定 this，并且函数中的 this 指向全局对象 window

普通函数调用

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

函数调用链

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

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

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

fn(); // window

将函数作为参数传递

function fn(callback) {
  callback();
}

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

function fn(fun) {
    fun()
}
const person = {
    name: "张三",
    say: function () {
        console.log(this); // window
    }
}

fn(person.say);

上述示例中，在真正调用函数的位置，并没有进行任何的对象绑定，只是一个独立函数的调用，因此 this === windiw

隐式绑定

在隐式绑定中，函数的调用通常是某个对象发起的。

const person = {
    say: function () {
        console.log(this); // person 对象s
    }
}

function say() {
    console.log(this); // person 对象
}

const person = {
    name: "person",
    say: say
}

const user = {
    name: "user",
    person: person
}

user.person.say();

显式绑定

call、apply

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

say.call(window); // wwindow
say.call({name: "张三"}); // {name: "张三"}
say.call(20);  // Number 对象，存放 20

bind

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

const person = {};

const _say() = say.bind(person);

_say();  // person 对象

内置函数

有些时候，我们会调用一些 JavaScript 内置的函数，或者一些第三方库中的内置函数。

这些内置函数要求我们传入另外一个函数，我们自己并不会显示的调用这些函数，而是 JavaScript 内部去自动调用。

setTimeout(function() {
  console.log(this); // window
}, 1000);

在上述示例中，this 是 window，在 setTimeout 内部是通过 apply 进行绑定的 this 对象，并且绑定的是全局对象。

new 绑定

JavaScript 中的函数可以当作一个类的构造函数来使用，在使用 new 关键字调用函数时，会执行如下操作：

1. 创建一个全新的对象；

2. 这个新对象会被执行 Prototype 连接；

3. 这个新对象会绑定到函数调用的 this 上；

4. 如果函数没有返回其它对象，表达式会返回这个新对象；

function Person(name){
    console.log(this); // Person {}
    this.name = name; // Person {name: "张三"}
}

const person = new Person("张三");

规则优先级

默认规则的优先级最低

显示绑定优先级高于隐式绑定

new 绑定优先级高于隐式绑定

new 绑定优先级高于bind

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

const person = {
    name: "张三",
    say: 
}

const fun = say.bind(person);
const foo = new fun();  // 输出 person

总结：new 绑定 > 显示绑定（bind）> 隐式绑定 > 默认绑定

this 绑定规则之外

忽略显示绑定

如果在显示绑定中，我们传入一个 null 或者 undefined，那么这个显示绑定会被忽略，使用默认绑定规则：

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

const person = {}

say.call(person); // person 对象
say.call(null); // window
say.call(undefined); // window

say.bind(null)(); // window

间接函数引用

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

const person = {
    name: "per",
    say
}

const user = {
    name: "user",
}

person.say();  // person 对象
(user.say = person.say)() // window

箭头函数

箭头函数不遵循 this 的四种绑定规则，箭头函数没有自己的 this，它的 this 继承自父级执行上下文。

const object = {
  data: [],
  getData: function () {
    const _this = this;
    setTimeout(function () {
      _this.data.push(...[1, 2, 3]);
    }, 1000);
  }
};

object.getData();

在上面的示例中，在 setTimeout 中拿到的 this 是 window，因此我们需要在上层作用于定义额外的变量来绑定this。

const object = {
  data: [],
  getData: () => {
    setTimeout(() => {
      this.data.push(...[1, 2, 3]);
    }, 1000);
  }
};

object.getData();

上面的代码中，箭头函数并不绑定 this 对象，那么 this 对象就会引用上层作用域中对应的 this。