萌新关于 js 箭头函数 this 的问题,头好晕

2019-02-28 16:53:19 +08:00
 waibunleung

萌新想问一个关于箭头函数 this 的问题,看了好多例子还是理解不了。

代码:

var obj = {
    a : 12,
    b : () => {console.log(this)},
    c : {
        d: () => {console.log(this)},
        f: function(){console.log(this)}
    },
    e : function(){console.log(this)}
}

obj.b();
obj.c.d();
obj.c.f();
obj.e();

问题:obj.c.f();处打印出来的为什么是 window 对象而不是 obj 对象 ?

4893 次点击
所在节点    JavaScript
41 条回复
SilentDepth
2019-02-28 19:48:41 +08:00
Lexical this,是说这段代码的在文法(源码)所在位置是什么 this 就是什么 this。它不是没有 this,只是无法手动 bind。
loy6491
2019-02-28 20:09:21 +08:00
父级指的是父级函数,不是父级对象。d 那个函数的外层没有其他函数了,直接到顶层就完事了
waibunleung
2019-02-28 21:03:13 +08:00
@dmjob2015222 你来你来,我发现来这里的有一部分回复不将焦点集中在问题上面,而是关注别的问题,解释一下又能怎样,我也不至于是伸手党啊,每个回复我都有好好研究,我连 MDN 都翻了,你跟我说这些对我完全没有意义,以前这种都是不回的,可是见多了真的忍不住....就像是我语气重了一点,依然跟你说多多担待一样,其实也没差~
auroraccc
2019-02-28 21:17:29 +08:00
你要理解对象本身是没有 this 的,箭头函数不会创建自己的 this, 它只会从自己的作用域链的上一层继承 this。那执行 obj.c.d()的时候,由于 c 和 obj 都没有 this,再沿着作用域链往上,console 出来的 this 就是 windows 了
waibunleung
2019-02-28 21:17:54 +08:00
@loy6491 听你这么说,我将代码转成 es5 试了一下,这样是能解释通的,暂时结案吧。欢迎反驳这个回复😯~
waibunleung
2019-02-28 21:19:12 +08:00
@auroraccc 你的解释跟 @loy6491 差不多,我大概理解了,感谢
auroraccc
2019-02-28 21:21:47 +08:00
打错,window
waibunleung
2019-02-28 21:23:25 +08:00
@auroraccc 就喜欢你这种严谨的小机灵鬼
autoxbc
2019-02-28 21:46:26 +08:00
注意箭头函数中 this 的上溯,不是沿着作用域链,不是函数调用链,不是成员访问链,是执行上下文
waibunleung
2019-02-28 21:52:50 +08:00
@autoxbc 我要怎么理解你这句话呢?能否详细一些...谢谢你的提点
waibunleung
2019-02-28 21:55:27 +08:00
@autoxbc 而且我翻 MDN 文档,里面有一句话:“箭头函数不会创建自己的 this,它只会从自己的作用域链的上一层继承 this。"
那这不是沿着作用域链来上溯吗....?
rabbbit
2019-02-28 22:13:05 +08:00
暂时不要去抠作用域 执行上下文这些本来就容易混淆的东西,知道 this 在不同场合指向哪就行
每代 Es 标准都在变,不一定过一段时间又加了啥新东西

例如 Es3 的 scope chain(作用域),到 Es5 里就没这个东西了,取而代之的是 Declarative Environment Record(声明式环境记录)
http://ecma-international.org/ecma-262/5.1/#sec-D

还有什么 AO/VO ,es5 里根本就,没这些东西
autoxbc
2019-02-28 23:05:04 +08:00
@waibunleung #31 抱歉,是我想当然了,是作用域
xieranmaya
2019-02-28 23:08:49 +08:00
看箭头函数里的 this 时,你就当在看 if 语句里的 this,这么说懂了吧
posebear1990
2019-03-01 03:37:10 +08:00
简单的说就是函数中 this 的值,如果显式绑定了的话(比如用 bind/call,或者箭头函数),就是绑定的值。否则没有显式绑定,那 this 等于调用对象。
rodjl
2019-03-01 08:45:37 +08:00
https://github.com/mqyqingfeng/Blog/issues/7 this 这里面解释得挺好的
a4854857
2019-03-01 10:23:04 +08:00
在查找楼主的问题过程中查漏补缺了不少东西...感谢楼主...
amumu666
2019-03-01 10:34:44 +08:00
两句话,函数 this 指向运行时的作用域,箭头函数 this 指向定义时的作用域。
wxsm
2019-03-01 11:41:26 +08:00
@waibunleung 绝大多数人在提问之前不会搜索,但是搜索确实可以解决这种问题。我相信我的回答在大部分时候是能提供帮助的。当然,这些题外话就没必要深入讨论了。
waibunleung
2019-03-01 18:30:38 +08:00
@autoxbc 我在网上找到了很多想当然的例子和文章,真心希望大家可以严谨求证,不然就真的很悲哀

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/539691

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX