每日挑战，从Javascript面试题目了解一些你可能忽略的概念 - Day15

tags: ItIron2021 Javascript

前言

前两天我们把重点放在by reference & by value的差别，并利用阵列与物件的复制作为实例讲解，今天我们继续看新的主题吧!

本日题目与解释

请解释在javascript中什麽是this

来了...让许多初学者为之却步、进阶者含糊不清的东西终於出现了! 很多人一提到这玩意就开始慌不然就是会用但不太确定这玩意是啥，但其实并没有这麽复杂! 如果要用一句话来解释的话

• this就是目前指向的execution context(我找不到贴切的翻译，还是用英文吧)

execution context你也不用想得太复杂，你可以想像成一个将你程序码包裹起来的执行环境，每一次的执行都会创造一个新的execution context，而这个执行环境会随着你目前所在的地方、设置而有所不同，以上是最最最简略的说明，若有兴趣的朋友可以自行探究(关於这个部分我强烈推荐一套课程:Understanding Javascript the weird parts，我当时是看这个课程学到这个概念的)。

听了这麽多你可能还是觉得...我刚刚看了什麽，没事，这感觉我可以理解，我们就用一个题目来看看吧!(执行环境为浏览器)

var name = '全域阿婆'
var auntie = {
  name: '漂亮阿姨',
  callName: function () { 
    console.log('2:此时的this指向', this);
    console.log('2:callName', this.name);
  }
}

function callName() {
  console.log('1:此时的this指向', this);
  console.log('1:callName', this.name);
}

callName()
auntie.callName()
console.log('3:此时的this指向', this)

// 输出结果

1:此时的this指向 Window
1:callName 全域阿婆

2:此时的this指向 {name: '漂亮阿姨', callName: f()}
2:callName 漂亮阿姨

3:此时的this指向 Window

以上的结果可以归纳成两个结论，绝大多数的情况你只要依赖这两个结论就可以应付问题了!

1. 若直接呼叫this，this会指向目前的execution context，在浏览器中就是window，在nodejs中则是global object
2. 若this在函数中呼叫，this会指向执行这个函数的物件

把这个两结论记在心里，我们回头来看一下题目的三种情况

1: this在函数内执行，但这个函数还是挂在window下方，所以执行这个函数的是window物件，因此this指向全域的windows。
2: this在函数内执行，但这个函数挂在auntie物件下方，执行这个函数的是auntie物件，所以this指向auntie物件。
3: this在全域执行，它指向目前的execution context，在浏览器中就是window，所以最後this指向全域的windows。

如何? 其实没这麽复杂对吗? 那为什麽我说绝大多数情况呢? 原因在於还是有一些方法会影响this的指向，常见的方法/情况有

1. 箭头函数
2. call、bind & apply
3. strict mode

在严格模式下this会指向undefined

第1&第2点则会在之後的文章带到，暂时你先知道这些就可以罗!

本日核心观念与总结

核心观念

this、execution context

总结

• 了解什麽是this
• 了解不同情况下this的指向可能会改变

本文章同步发布於个人部落格，有兴趣的朋友也可以来逛逛~!