Question

你好我正在训练使一些断言套装库，但我在一个代码部分理解javascript行为有一个大问题。这里的代码。

(function(){
    var results;
    this.assert = function(value, desc){
        var li = document.createElement('li');

        // I got two CSS classes "pass" and "fail"
        li.className = value ? 'pass' : 'fail';

        var txt = document.createTextNode(desc);

        li.appendChild(txt);
        results.appendChild(li);

        if(!value){
            li.parentNode.parentNode.className = 'fail';
        }
        return li;
    }
    this.test(name, fn){
        //I have an UL element with ID "results"
        results = document.getElementById('results');

        //but i will create another UL element
        var ul = document.createElement('ul');

        /*and here my trouble, I don't understand the sense of change
        the value of "results" variable, and why the reference to "results" ul element
        still serves, could you explain me that please?*/
        results = assert(true, name).appendChild(ul);
        fn();
    }
})();
//and here my library working
window.onload = function(){
    test('first test', function(){
        assert(2 + 2 == 4, 'True assertion');
    });
}

我最大的问题是理解变量＆＃34;结果＆＃34;的变化是如何工作的。

发件人

//I have an UL element with ID "results"
results = document.getElementById('results');

要

results = assert(true, name).appendChild(ul);

我了解断言方法会创建 li 元素，但我不明白为什么对结果 ul元素的引用仍然有效。请解释一下。

Answer 1

你想追加断言返回的li结果吗？

results = ul.appendChild(assert(true,name));

Answer 2

紧接着调用函数表达式（IIFE）后面的行：

(function(){
    var results;

在函数的执行上下文中创建变量 results 。这个功能：

   this.test(name, fn){
        //I have an UL element with ID "results"
        results = document.getElementById('results');

在其范围链上有该执行上下文。外部函数完成后，关系仍然存在，从而创建一个闭包。

因此，每次调用 test 时，都会访问相同的结果变量。

我建议您阅读有关IIFE和闭包的更多信息。

NB

您不能将UL附加到UL，因为它们只能将LI作为元素子节点。另外，假设IIFE中的 this 在严格模式下不合理，它将是未定义的。要解决此问题，请将全局对象传递给IIFE并使用它：

(function (global) {
    var results;

    global.assert = function(value, desc){

 ...

}(this));

Answer 3

结果在函数内声明为var results，Javascript使用 ~~block~~ 函数作用域，因此在~~块引用~~函数中给出了引用在函数本身内创建的新ul。您应该阅读有关闭包和执行上下文的更多信息。这个链接应该有很大的帮助。

Closures

每次调用函数时，它都会创建一个新的执行上下文，在其中放置函数，执行函数，将变量结果声明为私有，然后在新块中为相同的私有变量赋予新的引用创建范围并将ul附加到结果变量。

调用results = assert(true, name).appendChild(document.createElement('ul'));时，this.test()范围内的结果变量会更新，并且this.assert()返回li元素，ul会附加到results(which now is document.getElementById('results')) ul因此在li创建的this.assert()内部提供了新的{{1}}。

我不懂JavaScript代码段

3 个答案:

NB