• 关于JavaScript中的Lambda表达式中的this对象的问题记录


    写在前面

    在今天写一段js代码时,发现无论如何也得不到想到的效果,示例代码如下:

            $('#body tr').mouseover(() => {
                let index=$(this).prevAll().length
                myChart.dispatchAction({ type: 'highlight', name:formatData[index].name});
            });
    

    解释一下,这里首先获取了当前tr元素,然后去计算了之前有多少个tr元素从而准确的获得当前tr的索引。最后针对索引的tr元素进行高亮处理。但我的index的值一直是0,即前面的元素一直是0,这显然是不和常理的。

    发现问题

    当我死马当做活马医的时候,输出了$(this)对象。发现是一个Window对象。这就让人费解了,按说这里的this应该是一个tr元素才对啊,于是我把lambda表达式换成了最基本的写法:

            $('#body tr').mouseover(function(){
                let index=$(this).prevAll().length
                myChart.dispatchAction({ type: 'highlight', name:formatData[index].name});
            });
    

    发现这样就可以了。这么神奇的么,遂上网搜索了一下。

    解释问题

    最后,翻阅了一些资料与文档后,发现了这样一句话:

    内部类的声明会创建一个新的命名作用域,在这个作用域中,this与super指的是内部类本身的当前实例;相反,lambda表达式并不会引入任何新的命名环境。这样就避免了内部类名称查找的复杂性,名称查找会导致很多小错误,例如想要调用外围实例方法时却错误地调用了内部类实例的Object方法。

    这就可以很好的解释这里的this指向的问题了,lambda表达式不会引入内部类,所以这里的this指向的其实是外部,有的资料说是最近scope的对象,这也就是为什么在使用lambda表达式的时候输出的是window对象了。

    总结

    总的来说,出现这种情况还是我自己对lambda表达式的理解不够深刻,以后要加强对于js的理解了。

  • 相关阅读:
    利用DllPlugin性能优化
    Shimming 的作用
    用webpackPrefetch:true提升性能
    webpack打包分析学习笔记
    分块打包学习笔记
    tree shaking学习笔记
    Map与实体类相互转换
    项目可以run但不能debug
    jeecg-boot框架默认create_time Desc去掉
    List<实体类>根据多个字段去重
  • 原文地址:https://www.cnblogs.com/wushenjiang/p/13917548.html
Copyright © 2020-2023  润新知