一句话解释 this

如何一句话解释 this：它就是一个变量，指向了某个对象保存在堆中的数据。

从原理角度理解 this

我们知道在 JS 中，对象的变量名保存在栈(Stack)中，对象的数据保存在堆(Heap)中，像这样：

一句话解释 this，它就是一个变量，引用了某个对象保存在堆中的数据，就这么简单。 比如在上图中，personA 的 this 引用了 {name: "LB", age:20}

this 有什么用？

既然 this 指向的堆中某个对象的数据，那我们可以通过 this 来灵活的操作对象在堆中的数据呀。

比如下面的代码，可以把一个sayHi函数放在两个对象身上使用，代码可复用性这不就上来了么：

const user = { name: "john" };const admin = { name: "admin" };function sayHi() {  console.log(this.name); // this 可以指向 user，也可以指向 admin}user.f = sayHi;admin.f = sayHi;user.f();  // johnadmin.f();  // admin

只有掌握好 this 的指向规则，才能让我们使用 this 的时候可以指哪打哪。

如何操纵普通函数的 this ？

普通函数的 this 的指向可以通过下面几种规则来判断，优先级从高到低：

看是不是 new 调用。函数是否在 new 中调用? 如果是的话 ，this 绑定的是新创建的对象。

var bar = new foo()

 var bar = foo.call(obj2)

var bar = obj1.foo()

 var bar = foo()

普通函数的 this 绑定是动态的，也就是在运行时才知道 this 绑定的是谁的 context，再具体一点来说，this 所在的函数被谁调用了，this 就绑定了谁的上下文。如果这个谁也没有上下文，就再往上看上一层调用者，直到找到有上下文的函数 (最顶层就是拥有全局上下文的全局函数)。

从调用栈的角度来说，一个普通函数出栈后，就有一个新的栈顶函数，然后被调用，这个函数的 this 绑定的是新的栈顶函数的上下文。

如何操纵箭头函数的 this ？

箭头函数可以理解为轻量级的普通函数，它压根就没有 this，所以普通函数的 this 规则不适用于它。它的 this 在创建函数的时候，从外层的 this 继承而来，而且一旦继承了 this，就不会再变了。

在创建箭头函数的时候，this 继承自外部，而且 this 确定之后不会变：

function foo() {  return (a) => {    // this 继承自 foo()    // this 继承之后不会变    console.log(this.a);  };}var obj1 = { a: 2 };var obj2 = { a: 3 };var bar = foo.call(obj1); // 调用 foo，foo 的 this 指向 obj1bar.call(obj2); // 2

因为不用担心 this 的指向会被三方库修改，所以常用在创建回调函数：

function foo() {  setTimeout(() => {    // 这里的 this 继承自 foo，不用担心 setTimeout 会修改它    console.log(this.a);  }, 100);}var obj = { a: 2 };foo.call(obj); // 2

下面的代码和上面的一样，把回调函数的声明抽出来了，更好理解：

function foo() {  const cb = () => {    // 这里的 this 继承自 foo    console.log(this.a);  };  setTimeout(cb, 100);}var obj = { a: 2 };foo.call(obj); // 2

下面的例子，如果没有额外说明 use strict，都是没有 use strict 的。 推荐你配合着上面的 this 绑定规则一起看下面的代码。

默认绑定：

function makeUser() {  return {    name: "John",    ref: this  };}// this 的指向只和 function 在哪里 call 有关系let user = makeUser();console.log( user.ref.name ); // Error: Cannot read property 'name' of undefinedoo

隐式绑定：

"use strict";function makeUser() {  return {    name: "John",    ref() {      return this;  // 拿的是 makeUser 的 this    },  };}let user = makeUser();// user 是一个对象，user.ref() 相当于隐式绑定了 thisconsole.log(user.ref().name); // John

箭头函数的 this 继承自外层:

obj = {  count: 0,  cool: function coolFn() {    if (this.count < 1) {      setTimeout(() => {   // 箭头函数的 this 就是 coolFn() 的 this        console.log("awesome");      }, 100);    }  },};obj.cool(); // awesome// 下面代码是一样的obj = {  count: 0,  cool: function coolFn() {    if (this.count < 1) {      let foo = () => {	    // 箭头函数的 this 就是 coolFn() 的 this        console.log("awesome");      };      setTimeout(foo, 100);    }  },};obj.cool(); // awesome