关于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的理解了。

原文地址:https://www.cnblogs.com/wushenjiang/p/13917548.html