JavaScript 变量 scope/hoisting 问题

Question

在原始文件中本地设置变量后，我遇到了一些非常令人困惑的问题，即从另一个文件获取变量。我知道这与提升有关，但经过一段时间的研究但没有成功，我认为在这里值得一问。

我正在尝试从我的文件 sequencer.js 中获取集合 element，如下所示：

var nxloader = require('../../helpers/nxloader');                                     

// Load matrix
var matrix = nxloader.load('matrix').getElement(); 
console.log(matrix);

从文件 nxloader.js 中设置变量如下：

var $ = require('jquery');                                                            

/**
 * Variable to hold the element that is loaded.                                       
 */
var element = 'test';                                                                  

/**
 * Constructor                                                                        
 *
 * @returns {nxloader} instance of itself                                             
 */
var nxloader = function () {
    return this;
};

/**
 * Loads the element passed in
 *
 * @param {string} element  The element type to load
 */
nxloader.load = function (element) {

     // Switch on the element type
     switch (element) {
         // Is matrix
         case 'matrix':

            // load matrix
            nx.onload = loadMatrix;

            break;

        default:
            break;
    }

    // Implement fluent interface
    return this;
};

/**
 * Load the matrix element
 */
var loadMatrix = function () {

    // Colours
    nx.colorize("accent", "#ffbb4c");
    nx.colorize("fill", "#1D2632");

    // Specified size
    matrix1.col = 16;
    matrix1.row = 1;
    matrix1.init();
    matrix1.resize($(".step-sequencer-container").width(), $(".step-sequencer-container").height());

    // Set the element
    setElement(matrix1);

    // Implement fluent interface
    return this;
}

/**
 * Get the element
 * @return {nxelement} element
 */
nxloader.getElement = function () {
     return element;
}

/**
 * Local setter
 */
function setElement (elementToSet) {
     element = elementToSet;
};

module.exports = nxloader;

正如某些人可能猜测的那样，当 sequencer.js 文件中的 console.log(matrix); returns 'test' 而不是我希望的元素时。我知道它与 JavaScript 中的提升有关，但我很困惑如何解决它。我想要一个本地 setter 以便它不能从其他文件设置。我希望在加载元素后将元素设置为全局 element 变量，以便其他文件可以检索此 element 并按需要使用它。

我正在使用 NexusUI 库，该库具有 UI 特定于网络音频编程的元素。

任何帮助将不胜感激，我认为这是一个非常简单而烦人的问题！

编辑： 为清楚起见，将实际代码放在方法 loadMatrix 中。 EDIT-2:包含link到NexusUI库

Answer 1

该值设置正确，但在您的 console.log 运行后调用了 onload 函数。因此，在记录时尚未设置该值。您可以通过将日志放入 setTimeout 函数来证明这一点。

setTimeout(function { 
    console.log(matrix); 
}, 0);

这会将日志推送到调用堆栈的末尾，在之后 onchange 函数被库调用，这意味着您的矩阵已准备就绪。

根据您想要构建应用程序的方式，您可以使用回调或 Promise 来处理此类异步问题。或者您可以简单地将您的 console.log 移动到您知道可以安全访问该元素的 loadMatrix 函数。

JavaScript 变量 scope/hoisting 问题

JavaScript variable scope/hoisting issues

javascript

scope

getter-setter

node.js

hoisting