下面代码的输出是什么？

const obj = {
 fn1: () => console.log(this),
 fn2: function() {console.log(this)}
}

obj.fn1();
obj.fn2();

const x = new obj.fn1();
const y = new obj.fn2();

参考答案：

在上面的代码中，obj 对象包含两个方法 fn1 和 fn2。fn1 使用箭头函数定义，而 fn2 使用普通函数定义。

对于箭头函数，它没有自己的 this 值，也就是说它会捕获上下文中的 this 值，因此 fn1 中的 this 指向的是全局对象 window（或者 undefined，如果运行环境是严格模式）。因此，当我们调用 obj.fn1() 时，输出结果为 window（或 undefined）。

对于普通函数，它的 this 值是在运行时动态绑定的。因此，当我们调用 obj.fn2() 时，输出结果为 obj 对象本身。

接下来，代码中分别使用 new 运算符创建了 obj.fn1 和 obj.fn2 的实例 x 和 y。

**由于箭头函数没有自己的 this 值，所以尝试使用 new 运算符创建实例会导致 TypeError 错误。**也就是 new obj.fn1() 会报错。

而对于普通函数，new 运算符可以正确地创建实例，并且 this 值指向新创建的实例对象。但因为上面执行 new obj.fn1() 时 js 已经报错，new obj.fn2(); 并不会执行。

题目要点：

题目解析

关键点： 箭头函数不能作为构造函数来调用，即不能使用 new 来调用箭头函数！

1. obj.fn1()：

   • 输出: undefined
   • 解释: fn1 是一个箭头函数。箭头函数没有自己的 this 上下文，它们会从定义它们的词法环境中继承 this。在这个例子中，定义环境是全局作用域（或者是 ES 模块的模块作用域）。在严格模式或模块中，this 是 undefined，因此输出是 undefined。

2. obj.fn2()：

   • 输出: { fn1: [Function: fn1], fn2: [Function: fn2] }
   • 解释: fn2 是一个常规函数。常规函数有自己的 this 上下文，this 的值取决于函数的调用方式。当作为对象的方法调用时，this 指向该对象。在这个例子中，obj 是调用 fn2 的对象，因此 this 在 fn2 中指向 obj。

3. new obj.fn1()：

   • 输出: TypeError: obj.fn1 is not a constructor
   • 解释: 箭头函数不能作为构造函数使用。箭头函数没有 [[Construct]] 方法，这是构造函数所必需的。尝试使用箭头函数作为构造函数会导致 TypeError 错误。

4. new obj.fn2()：

   • 输出: { fn1: [Function: fn1], fn2: [Function: fn2] }
   • 解释: fn2 是一个常规函数，可以作为构造函数使用。使用 new 关键字调用它时，会创建 fn2 的新实例。由于 fn2 是 obj 的一个方法，新实例的原型是 obj。因此，新实例具有与 obj 相同的属性，并且 this 在 fn2 中指向新创建的实例。输出反映了创建的新实例。