JS class中函数this指向问题

示例

let a = {
    name: 'A',
    hehe: function () {
        let f1 = function () {
            console.log('f1', this)
        }
        let f2 = () => {
            console.log('f2', this)
        }
        f1()
        f2()
    }
}
a.hehe()
// 输出结果
// f1 window对象
// f2 a对象


class A {
    constructor () {
        this.name = 'A'
    }
    hehe () {
        let f1 = function () {
            console.log('f1', this)
        }
        let f2 = () => {
            console.log('f2', this)
        }
        f1()
        f2()
    }
}
let a = new A()
a.hehe()
// 输出结果
// f1 undefined
// f2 a对象

对于f2,由于是箭头函数,this相当于普通变量,本身没有时向父级作用域获取,因此获取到对象a

对于f1,结果确实应该是undefined,但由于代码并未采用严格模式,因此输出的应当是window对象。经查阅MDN(https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Classes),class中默认采用严格模式,因此即使我不显示地声明严格模式,f1中仍会输出undefined

严格模式

类声明和类表达式的主体都执行在严格模式下。比如,构造函数,静态方法,原型方法,getter和setter都在严格模式下执行。

最后编辑于 :
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 1.立即执行函数表达式是什么?有什么作用 立即执行函数表达式就是 声明一个匿名函数 马上执行这个匿名函数 典型写法...
    海山城阅读 776评论 1赞 2
  • 参考文章:函数 1.概述 1.1函数的声明 JavaScript 有三种声明函数的方法。 (1)function ...
    chrisghb阅读 1,386评论 0赞 0
  • 函数是一段可以反复调用的代码块。函数还能接受输入的参数,不同的参数会返回不同的值。 概述 函数的声明 JavaSc...
    oWSQo阅读 1,524评论 0赞 4
  • 本节课主要讲解函数对象,JS的第二座大山this 其它1.对象:object对象、数组对象、函数对象(函数是一种特...
    珍惜时间小李阅读 353评论 0赞 0
  • 本文地址:http://www.cnblogs.com/dongcanliang/p/7054176.html 前...
    过期猫粮_45f1阅读 874评论 0赞 0

友情链接更多精彩内容