var 和 let 在 jQuery中的区别

下面通过代码案例来进一步解释 var 和 let 在 jQuery link 函数中的区别：

(function ($) {
    $.fn.link = function () {
        // Example using 'var'
        var exampleVar = 'This is a var variable';
 
        // Example using 'let'
        let exampleLet = 'This is a let variable';
 
        // Function body...
    };
})(jQuery);

　　在这个例子中，link 是一个定义在 jQuery 对象上的扩展方法。我们分别使用 var 和 let 在该函数内部声明了两个变量：exampleVar 和 exampleLet。接下来，我们将针对前面提到的关键区别，通过具体的场景来展示它们的差异。

作用域限制

(function ($) {
    $.fn.link = function () {
        var globalVar = 'Accessible in the entire function';
         
        if (true) {
            var localVar = 'Accessible everywhere due to var';
            let blockLet = 'Only accessible within this block';
             
            console.log(globalVar); // "Accessible in the entire function"
            console.log(localVar); // "Accessible everywhere due to var"
            console.log(blockLet); // "Only accessible within this block"
        }
         
        console.log(globalVar); // "Accessible in the entire function"
        console.log(localVar); // "Accessible everywhere due to var"
        console.log(blockLet); // ReferenceError: blockLet is not defined
    };
})(jQuery);

　　在此代码中，globalVar 和 localVar（使用 var 声明）在整个 link 函数内都是可访问的，包括在 if 语句外部。而 blockLet（使用 let 声明）仅在其所在的 if 代码块内有效，尝试在该块外部访问会抛出 ReferenceError。

重复声明

(function ($) {
    $.fn.link = function () {
        var sameVar = 'First var declaration';
        var sameVar = 'Second var declaration'; // Overwrites the first without error
         
        console.log(sameVar); // "Second var declaration"
         
        let sameLet = 'First let declaration';
        let sameLet = 'Second let declaration'; // SyntaxError: Identifier 'sameLet' has already been declared
 
        // ...
    };
})(jQuery);

　　这段代码展示了 var 允许在同一作用域内重复声明同名变量，而 let 则不允许，后者会导致 SyntaxError。

变量提升和暂时性死区

(function ($) {
    $.fn.link = function () {
        console.log(exampleVar); // undefined
        console.log(exampleLet); // ReferenceError: exampleLet is not defined
         
        var exampleVar = 'Declared with var';
        let exampleLet = 'Declared with let';
         
        // ...
    };
})(jQuery);

　　尽管 exampleVar 和 exampleLet 都在它们的打印语句之后声明，但 exampleVar 因变量提升现象而打印出 undefined，而 exampleLet 由于暂时性死区的存在，导致在声明前访问时抛出 ReferenceError。

全局对象绑定

(function ($) {
    $.fn.link = function () {
        var globalVarInLink = 'Var in link function';
        let globalLetInLink = 'Let in link function';
         
        console.log(window.globalVarInLink); // "Var in link function"
        console.log(window.globalLetInLink); // undefined
    };
})(jQuery);

　　在全局作用域中调用 link 函数时，globalVarInLink（使用 var 声明）作为全局对象（这里是 window）的一个属性被访问到，而 globalLetInLink（使用 let 声明）则未成为全局对象的属性，因此访问结果为 undefined。

综上所述，这些代码案例直观地展示了 var 和 let 在 jQuery link 函数内部使用时在作用域、重复声明、变量提升与暂时性死区以及全局对象绑定方面的差异。在实际开发中，推荐使用 let（或 const）以获得更精确的作用域控制和避免一些潜在的问题。

原文链接：https://www.cnblogs.com/flzs/p/18143693