loading...
Javascript严格模式以及this指向
Published in:2023-07-14 | category: Typescript
Words: 360 | Reading time: 1min | reading:

看下面代码的输出

"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运算符创建实例会报错。运行结果如下图所示:
运行结果

Prev:
ES5如何实现继承
Next:
手写Promise及其API