JSLint：用于三元变量集的范围之外答案

【问题标题】：JSLint: used out of scope for ternary variable setJSLint：用于三元变量集的范围之外
【发布时间】：2015-03-17 21:23:49
【问题描述】：

我有一个这样的代码块：

/*global MYAPP: true*/
var MYAPP = MYAPP || {};

JSLint 在等号后突出显示“MYAPP”，并带有消息“MYAPP used out of scope”。

这有什么问题？

【问题讨论】：

var MYAPP = window.MYAPP || {};，否则表达式总是将MYAPP 保留为{}，因为由于 var 提升，'MYAPP' 将是 undefined。
其实可以，但是 JSLint.
但是我们将在 node.js 中使用什么？没有window。
我找到了另一种方式：var MYAPP; MYAPP = MYAPP || {};
嗯。我猜你需要一个不同名称的临时变量，我之前没有意识到......

标签： javascript ternary-operator jslint

【解决方案1】：

如果您使用var，那么您就是在声明一个局部变量。如果您使用MYAPP || {}，那么您通常会尝试为全局变量或之前声明的变量设置默认值。

MYAPP 的范围应该是什么？如果它是全局的，那么类似于

MYAPP = window.MYAPP || {};

window. 阻止它抱怨它未定义

如果它不是全局的但之前声明过，那么

MYAPP = MYAPP || {};

如果它是该行所属函数的局部新变量，则

var MYAPP = {};

如果您在脚本的顶层定义了一个变量（即不在函数中），那么它是一个全局变量。如果您在两个不同的脚本标签（或 javascript 文件）中具有相同名称的全局变量，那么它们就是同一个变量。如果您想对其他脚本标签（或 javascript 文件）隐藏变量，请考虑使用 IIFE（立即调用的函数表达式）。例如

(function() {
    var MYAPP = {};
    //code that uses MYAPP;
})();
//MYAPP is not visible out here, or in other script tags/files.

【讨论】：

感谢您的回答！但是你怎么看var MYAPP; MYAPP = MYAPP || {};？
MYAPP || 部分不是必需的，因为如果您使用 var MYAPP，则声明了一个名为 MYAPP 的新变量。如果您还有其他名称为MYAPP，那么这是一个不同的变量，因为您使用了var。 var MYAPP; MYAPP = MYAPP || {}; 和 var MYAPP = {}; 之间的最终结果没有区别
是的，我和你一样想。 :) 但尝试测试：<script> var MY = MY || {aa:'aa'}; </script> <script> var MY; MY = MY || {aa:'bb'}; console.log(MY.aa); </script>
那里发生的事情是它们都在同一个范围内，所以它只有一个var。顶级变量（即不在函数内部）是 javascript 中的全局变量，并且可以相互冲突。因此，即使它们位于不同的脚本标签中，它们仍然是同一个全局变量。如果您想让它们仅对包含它们的脚本标签可见，请考虑使用 IIFE，例如<script>(function() {var MY = MY || {aa:'aa'}; /*other code*/})();</script>

【解决方案2】：

对于 jshint、jslint、sonarqube 等，如果没有使用 var（let 或 const）显式声明，则无法使用任何变量。

如果要将它们设置为全局，则必须在第一次定义当前全局关键字是什么，因为它在浏览器中是 window，但在其他上下文中，可能不是这样！

所以请看下面如何避免您的警告（JSDoc 注释不是解决方案的一部分，但解释了为什么有用）。

/**
 * @fileOverview Starting point for Front-end [Your Project Name]'s JavaScript.
 * @author {@link http://www.lesieur.name/|Bruno Lesieur}
 * @version 1.0.0
 * @module Common
 * @requires {@link external:jQuery}
 */

var window = this,

    /**
     * Container for all function of website.
     * @namespace website
     * @global
     * @type {Object}
     */
    website = window.website || {},

    /**
     * Write less, Do more.
     * @external jQuery
     * @global
     * @see {@link https://jquery.com/|jQuery}
     */
    $ = window.$,

    /**
     * Shortcut for $(window).
     * @global
     * @type {jQuery}
     */
    $window = window.$window || $(window);

/**
 * All components (modules) avaiable on all pages.
 * @namespace components
 * @alias components
 * @type {Object}
 * @memberOf website.
 */
website.components = website.components || {};

所以在你的例子中，它的简单方法是：

var window = this,
    MYAPP = window.MYAPP || {};

或

var global = this,
    MYAPP = global.MYAPP || {};

或

var MYAPP = this.MYAPP || {};

【讨论】：