揭秘new箭头函数的面试题，彻底搞清始末！

一、题目与执行结果

1. 题目

const obj = {
  name: 'obj',
  getName: () => {
    return this.name;
  }
};

console.log(obj.getName()); // undefined

2. 执行结果

输出结果为：

undefined

二、拨云见日，逐层剖析

1. 初窥端倪：执行流程与箭头函数

首先，我们从最外层开始逐步剖析。代码执行流程是从console.log(obj.getName())开始的。这行代码调用了obj对象上的getName()方法，并把其返回值打印到控制台。

值得注意的是，getName()方法是一个箭头函数。箭头函数不同于普通函数，它没有自己的this，而是继承外层函数的this关键字。这意味着，当getName()方法被调用时，它的this关键字将指向obj对象。

2. 深入探究：this关键字与执行上下文

然而，执行结果却出乎意料，控制台打印出了undefined。这是为什么呢？

要理解这个问题，我们需要深入研究this关键字的执行上下文。this关键字的执行上下文是由调用代码决定的。在本文的例子中，getName()方法是被console.log()方法调用的，因此getName()方法的执行上下文是console.log()方法。

console.log()方法是一个全局方法，它的执行上下文是全局对象。因此，当getName()方法被调用时，它的this关键字指向的是全局对象，而不是obj对象。

3. 柳暗花明：箭头函数与this关键字

至此，我们已经找到了问题所在：箭头函数继承了外层函数的this关键字，但外层函数的执行上下文是全局对象，因此getName()方法的this关键字指向的是全局对象，而不是obj对象。

现在，我们知道为什么console.log(obj.getName())输出的结果是undefined了。这是因为全局对象没有name属性，因此getName()方法返回了undefined。

三、彻底搞清，牢记于心

现在，我们已经彻底搞清了new箭头函数面试题的始末。我们了解到，箭头函数没有自己的this关键字，而是继承外层函数的this关键字。此外，this关键字的执行上下文是由调用代码决定的。

希望通过本文的剖析，你能对new箭头函数的执行逻辑有更深刻的理解。祝你在JavaScript的学习道路上不断进步，更上一层楼！