Js中的this上下文问题_new obj.fn-优快云博客

代码示例展示了在JavaScript中，箭头函数与普通函数的this指向差异，以及new运算符如何影响函数调用。在严格模式下，箭头函数的this捕获其上下文的this，而在普通函数中，this在运行时绑定。使用new创建实例时，对箭头函数会引发错误，因为它没有自己的构造函数。

看下面代码的输出

"use strict";
function test(info=''){
    console.log(this,info,'开启严格模式')
}
test()
test.call(this,'使用call解决严格模式this指向报错问题')
const obj  = {
    fn1 : (info) => console.log(this,info),
    fn2 : function(info){ console.log(this,info) }
}
obj.fn1('obj直接调用fn1')
obj.fn2('obj直接调用fn2')
const x = new obj.fn2('使用new运算符，将fn2看为类')
const y = new obj.fn1('使用new运算符，将fn1看为类')
console.log(x)
console.log(y)

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

对于箭头函数，它没有自己的this值，它会捕获上下文中的this，因此fn1中的this指向的是全局对象window（当开启严格模式时，指向的是undefined）。
对于普通函数，它的this值是在运行时动态绑定的。因此，当我们调用obj.fn2()时，输出结果是obj，因为是obj调用的这个函数。

对于const x = new obj.fn2()，因为fn2是一个普通函数，new运算符可以正确的创建实例，并且this值指向新创建的实例对象（即是一个包含fn2方法的对象）；
对于const y = new obj.fn1()，因为fn1是一个箭头函数，它没有自己的构造函数，也没有自己的this值，素以在使用new运算符创建实例会报错。运行结果如下图所示：