Skip to content

下面代码的输出是什么?

Posted on:2024年8月10日 at 17:07
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(); 并不会执行。

原文转自:https://fe.ecool.fun/topic/49ab4d36-c9e1-42c9-9df1-a610dc9dac8e