js this 请教 - V2EX
V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
推荐关注
Meteor
JSLint - a Javascript code quality tool
jsFiddle
D3.js
WebStorm
推荐书目
Javascript 权威指南第 5 版
Closure: The Definitive Guide
datadump
V2EX    Javascript

js this 请教

  •  
  •   datadump 2022 年 7 月 26 日 3071 次点击
    这是一个创建于 1288 天前的主题,其中的信息可能已经有所发展或是发生改变。
    代码:


    为什么输出的是 person2 呢
    18 条回复    2022-07-27 17:33:09 +08:00
    SilentDepth
        1
    SilentDepth  
       2022 年 7 月 26 日
    看一下 JS API ,call 方法的第一个参数是啥
    crs0910
        2
    crs0910  
       2022 年 7 月 26 日
    The `call()` method calls the function with a given `this` value and `arguments` provided individually.
    AV1
        3
    AV1  
       2022 年 7 月 27 日
    调用 person1.foo4.call(person2)时,foo4 里的 this 指向 person2 对象,它返回的箭头函数里的 this 也指向 person2 对象。
    dcsuibian
        4
    dcsuibian  
       2022 年 7 月 27 日
    js 方法里其实有个叫 this 的参数,如果你使用
    person1.foo4()这么调用,那么这个 this 会被赋值为 person1 。
    但如果你使用了 call()、apply()、bind()这几个方法,那么你就是在强制指定这个 this 是谁。
    shakaraka
        5
    shakaraka  
    PRO
       2022 年 7 月 27 日
    你 call 了 person2 的 this 进去 person1.foo4 这个方法,那么这个方法的 this 自然就是 person2 咯
    autoxbc
        6
    autoxbc  
       2022 年 7 月 27 日
    从 person1 上找到 foo4 ,再把 foo4 上的隐参数 this 绑定为 person2 ,一直到这里,那个箭头函数都还没有生成
    datadump
        7
    datadump  
    OP
       2022 年 7 月 27 日
    感谢各位大佬解答

    @autoxbc 最适合理解的答案,更新大佬半夜回帖
    datadump
        8
    datadump  
    OP
       2022 年 7 月 27 日
    var name = 'window'

    var person1 = {
    name: 'person1',
    foo2: () => console.log(this.name),
    }

    var person2 = { name: 'person2' }


    person1.foo2.call(person2)


    打印结果是‘window’,如果按照上面理解,执行 foo2.call 的时候,箭头函数已经生成了,里面的 this 绑定的是全局 window ,这样对吗?

    也就是说如果返回箭头函数的闭包,直到调用箭头函数的时候 this 才绑定;而赋值箭头函数时,箭头函数的 this 就直接绑定了。这个说法对吗?

    感谢大家
    datadump
        10
    datadump  
    OP
       022 年 7 月 27 日
    @ymcz852 babel 转之后的确是很清楚了。谢谢
    kevin1
        11
    kevin1  
       2022 年 7 月 27 日
    1. 箭头函数不会创建自己的 this ,它只会从自己的作用域链的上一层继承 this 。
    2. 上层 this 被 call 修改成了 person2 。
    datadump
        12
    datadump  
    OP
       2022 年 7 月 27 日


    @kevin1 感谢答复

    按照你说的“上层 this 被 call 修改成了 person2 ”,那这个箭头函数 this 没有被 call 修改成 B 对象。
    是不是第 11 行函数执行后,箭头函数被实例化,在这个时间点绑定 this ?
    johnkiller
        13
    johnkiller  
       2022 年 7 月 27 日 via iPhone
    后面的例子,可以参考:函数的作用域是在什么时候确定的
    Curtion
        14
    Curtion  
       2022 年 7 月 27 日
    @wjx0912 #12 你在执行第 11 行时就确定了 this 为 A ,而箭头函数 this 无法被修改。 你把第 11 行移动到 B 对象定义之后,然后使用 A.sayHello.call(B),那么后续箭头函数 this 就固定为 B 了。
    datadump
        15
    datadump  
    OP
       2022 年 7 月 27 日
    @johnkiller 谢谢
    @Curtion 谢谢
    kevin1
        16
    kevin1  
       2022 年 7 月 27 日
    @wjx0912 12# 你图上左边代码里的箭头函数 s 确实是在第 11 行的时候绑定了。

    箭头函数的 this 是在创建时就已经确定了,不会再改变。
    kevin1
        17
    kevin1  
       2022 年 7 月 27 日
    @wjx0912 12# 右边 babel 转码后的代码也能很好的解释这一点。

    左边 11 行代码运行后,实际上用闭包的方式声明了一个局部变量 _this ,这个变量从外部无法改变,所以一旦创建了以后这个值都不会再变了。
    datadump
        18
    datadump  
    OP
       2022 年 7 月 27 日
    @kevin1 是的。基本上理解了。感谢各位
    关于     帮助文档     自助推广系统     博客     API     FAQ     Solana     4675 人在线   最高记录 6679       Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 25ms UTC 06:36 PVG 14:36 LAX 22:36 JFK 01:36
    Do have faith in what you're doing.
    ubao msn snddm index pchome yahoo rakuten mypaper meadowduck bidyahoo youbao zxmzxm asda bnvcg cvbfg dfscv mmhjk xxddc yybgb zznbn ccubao uaitu acv GXCV ET GDG YH FG BCVB FJFH CBRE CBC GDG ET54 WRWR RWER WREW WRWER RWER SDG EW SF DSFSF fbbs ubao fhd dfg ewr dg df ewwr ewwr et ruyut utut dfg fgd gdfgt etg dfgt dfgd ert4 gd fgg wr 235 wer3 we vsdf sdf gdf ert xcv sdf rwer hfd dfg cvb rwf afb dfh jgh bmn lgh rty gfds cxv xcv xcs vdas fdf fgd cv sdf tert sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf shasha9178 shasha9178 shasha9178 shasha9178 shasha9178 liflif2 liflif2 liflif2 liflif2 liflif2 liblib3 liblib3 liblib3 liblib3 liblib3 zhazha444 zhazha444 zhazha444 zhazha444 zhazha444 dende5 dende denden denden2 denden21 fenfen9 fenf619 fen619 fenfe9 fe619 sdf sdf sdf sdf sdf zhazh90 zhazh0 zhaa50 zha90 zh590 zho zhoz zhozh zhozho zhozho2 lislis lls95 lili95 lils5 liss9 sdf0ty987 sdft876 sdft9876 sdf09876 sd0t9876 sdf0ty98 sdf0976 sdf0ty986 sdf0ty96 sdf0t76 sdf0876 df0ty98 sf0t876 sd0ty76 sdy76 sdf76 sdf0t76 sdf0ty9 sdf0ty98 sdf0ty987 sdf0ty98 sdf6676 sdf876 sd876 sd876 sdf6 sdf6 sdf9876 sdf0t sdf06 sdf0ty9776 sdf0ty9776 sdf0ty76 sdf8876 sdf0t sd6 sdf06 s688876 sd688 sdf86