为什么在 JavaScript 嵌套函数中使用 `var that = this;`？-js教程-PHP中文网

为什么在 JavaScript 嵌套函数中使用 `var that = this;`？

Barbara Streisand

发布： 2024-12-02 10:51:11

原创

286 人浏览过

Why Use `var that = this;` in JavaScript Nested Functions?

'var that = this;' 的作用是什么？语法在 JavaScript 中完成？

在 JavaScript 中，经常会遇到类似于以下的代码块：

function Somefunction(){
   var that = this; 
   ... 
}

登录后复制

此语法将 this 的值分配给名为 that 的变量。这个习惯用法的目的是在嵌套函数中保留对正确 this 上下文的引用。

为了说明这一点的必要性，请考虑以下示例：

var colours = ['red', 'green', 'blue'];
document.getElementById('element').addEventListener('click', function() {
    // this is a reference to the element clicked on

    var that = this;

    colours.forEach(function() {
        // this is undefined
        // that is a reference to the element clicked on
    });
});

登录后复制

在匿名函数中传递给 forEach 时，this 关键字不再引用单击的元素，因为它的范围已更改。将 this 分配给 that 可以让我们在嵌套函数中保留所需的引用。

$('#element').click(function(){
    // this is a reference to the element clicked on

    var that = this;

    $('.elements').each(function(){
        // this is a reference to the current element in the loop
        // that is still a reference to the element clicked on
    });
});

登录后复制

实际上，为此使用更具描述性的别名有利于增强代码可读性。例如，在上面的例子中，clickedEl将是一个更合适的选择。

以上是为什么在 JavaScript 嵌套函数中使用 `var that = this;`？的详细内容。更多信息请关注PHP中文网其他相关文章！