6 条简单规则助您全面理解 JavaScript 中的“this”关键字

规则

嘿！👋
我是丹尼斯。

JavaScript 面试中最热门的话题之一就是this关键字。虽然这个概念很基础，但很多开发者并不真正了解关键字的规则this。

其实没什么复杂的。我想和大家分享6条简单的规则，让你在众多面试者中脱颖而出。

规则

1.new关键词

第一个也是最重要的规则是，如果new在调用函数时使用了关键字，则该函数内部this引用的是由构造函数创建并返回的新对象。此规则在使用 ES6 类时也适用。

例子

function Person() {
  console.log(this)
  this.age = 23
  console.log(this)
}
const p = new Person()

/* Output */
// {}
// { age: 23 }

2. apply//call​bind

我们可能都知道的规则是，我们可以强制函数调用使用特定对象，例如使用以下 3种this方法之一：apply//callbind

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

const  thisObject = {
  someValue: 23
}

myFunction.call(thisObject)   // { someValue: 23 }
myFunction.apply(thisObject)  // { someValue: 23 }

const myBoundFunction = myFunction.bind(thisObject )
myBoundFunction()             // { someValue: 23 }

3. 函数作为一种方法

这个在面试中很常见。规则很简单。当函数作为方法调用时（即，通过前面的点来调用函数），this是该函数所属对象的属性（this是点之前的对象）。

const thisObject = {
  someValue: 23,
  itsMethod: function() {
    console.log(this)
  }
}

thisObject.itsMethod('John') // { someValue: 23, itsMethod: ƒ }

4. 最简单的情况

这是最简单的一个，但很多人忘记了（或者不知道）它。规则是：如果函数调用时不满足上述任何条件，this则为浏览器global对象 ( )。window

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

f() // Window (global object)

5.订单

如果可以同时应用多个规则，则列表中较高的规则将决定该this值。

6.箭头函数

this箭头函数是面试中最受欢迎的。每个人都知道箭头函数有什么特别之处，但真正能说出其中规律的人却很少。

因此，规则是箭头函数忽略所有规则并this在创建时获取其周围范围的值。

就这么简单！我们可以通过找到创建箭头函数的那一行，并查看那里this的值来确定箭头函数的值。this

测试一下自己！

让我们测试一下您是否理解规则：）

const obj = {
  value: 'abc',
  createFn: function() {
    return function() {
      console.log(this)
    }
  },
}
const fn = obj.createFn()
fn()

this那么，您能告诉我在这种情况下会打印什么吗？您能清楚地说明原因吗？

要测试它，您只需在 Chrome 控制台中运行此代码即可。

但是你能回答如何“修复”这个代码吗？

如果答案是“是”，恭喜你！🎉你离通过 JavaScript 面试又近了一步！

结论

规则this非常简单，但了解它们肯定可以向面试官展示你对基本原理的理解。

非常感谢你阅读我的文章。欢迎在 DEV 和 Twitter 上关注我@DenisVeleaev。

和平！