JavaScript变量范围/提升问题

时间:2017-02-27 15:41:37

标签: javascript node.js scope getter-setter hoisting

在原始文件中本地设置变量后,从一个不同的文件中获取变量时,我遇到了一些非常令人困惑的问题。我知道它与吊装有关,但经过一段时间的研究没有运气,我认为这里值得问。

我正试图从我的文件element中获取sequencer.js集,如下所示:

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;

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

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

任何帮助将不胜感激,我认为这是一个非常简单和恼人的问题!

编辑:为了清楚起见,将实际代码放在方法loadMatrix中。 EDIT-2:包含NexusUI库链接

1 个答案:

答案 0 :(得分:1)

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

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

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

根据您希望如何构建应用程序,您可以使用回调或Promise来处理这样的异步问题。或者您只需将console.log移动到您知道可以安全访问该元素的loadMatrix函数。