【问题标题】:javascript - How to make this code work? [duplicate]javascript - 如何使这段代码工作? [复制]
【发布时间】:2013-05-04 13:35:51
【问题描述】:

代码给了我: 一种 乙 C

当我点击 A B C 时,它总是显示最后一个“伏特加”。 我想要“martin”(A)、“lindsay”(B)、“vodka”(C)
请帮我举个例子。

myArray = [
    {
        letter: "A",
        brand: "martin"
    },
    {
        letter: "B",
        brand: "lindsay"
    },
    {
        letter: "C",
        brand: "vodka"
    }
];
    var list = '';
    for (var i = 0; i < myArray.length; i++) {
    list += "<br>" + myArray[i].letter;

    new_info = myArray[i].link;
    (function(new_info) {
         $(this).click(function(){        //this - refers to A or B or C
                 $('#box2').text(new_info);
                 });
    }).call(this, myArray[i])
}

$('#box1').append(list);

【问题讨论】:

标签: javascript jquery closures


【解决方案1】:

编辑:
我说过我不会为你编写代码......好吧,我做到了:this fiddle 完全符合你的要求。我通过上下文 (this)、关闭问题和隐含的全局变量解决了这个问题。它仍然需要大量工作,但小提琴显示了每个人一直在说的内容:$(this) 不会、不能也永远不会指向像 "A", or "B" 这样的字符串常量。

很抱歉这么说,但您的代码充满问题,但我会在这里解决您询问的具体问题。
在循环内部,您分配了一个点击处理程序,基本上看起来像这样:

function()
{
    $('#box2').text(new_info);
}

其中new_info 是在更高范围内声明的变量。到目前为止,一切都很好。问题是,您正在创建的函数对象没有自己的 copy 变量 (new_info) 在创建该函数时碰巧持有的任何值。相反,该函数引用该变量。因此,当任何这些函数被调用时,$('#box2').text(new_info) 将被解析为$('#box2').text("whatever value new_info holds when function is called"),而不是$('#box2').text("whatever value new_info was holding when function was created")。您只需在代码中添加第二个函数,即可让每个回调访问副本

$(this).click((function(currentNewInfo)
{
    return function()
    {
        $('#box2').text(currentNewInfo);
    }
}(new_info)));

我在这里所做的是创建一个函数,它接受一个参数,并立即调用它。我将new_info 作为参数传递,所以currentNewInfo 的值将是new_info 当时持有的值(又名副本)
我调用的函数(IIFE - 或立即调用函数表达式)返回实际的回调。在这个回调中,我没有引用new_info,而是引用了IIFE的参数:currentNewInfo

因为每个函数都有自己的作用域,该变量被封闭(因此得名closure),并且不能从外部。唯一仍然可以访问 currentNewInfo 变量的是 IIFE 返回的函数。
也许您担心名称冲突(您创建的每个回调都使用引用 currentNewInfo),但情况并非如此:每个回调都是由单独的函数创建的,因此可以访问不同的范围。不能相互访问的作用域之间不可能发生名称冲突...只是为了让事情非常简单易于理解:

Where  /\            and      /\
       ||                     ||
  is return function()      is scope of IIFE

所以闭包在函数返回后可以访问函数的作用域。在将表达式解析为值时,该范围具有优先权。为了更好地理解这一点,这里有一个类似的图表来向您展示 JS 如何解析表达式:


其中每个粉红色的“外部环境记录”是一个函数的范围(已经返回的函数的闭包范围或当前正在调用的函数)。最后一个环境要么是全局对象,要么是 null(在严格模式下)。仅此而已。

老实说,闭包一开始很难理解,但一旦你掌握了我在这里解释的内容,它们就会非常有趣。
Check this link我可以继续解释用例和好处以及嵌套闭包的工作方式,但我最终会写一本书。我发布的链接很好地解释了封闭是如何使用相当愚蠢的图纸工作的。这可能看起来很幼稚,但当我试图掌握 lambda 函数、闭包和作用域的概念时,它们实际上帮助了我很多,而不是函数调用。上面的图表取自我链接到的页面,它更深入地解释了这些概念,但我仍然认为简单、粗略的绘图非常不言自明。

其他问题:
正如有人指出的那样:“你希望this 引用什么”。查看 sn-p,this 将仅引用全局对象 (window),如果您问我,将相同/相似的事件处理程序附加到 window 根本没有意义。
全局变量是邪恶的隐含全局变量更是如此。我看不到new_info,也看不到myArray 在任何地方被声明。 JS 解析表达式的方式有点令人遗憾,并且回退到创建全局变量,而不是窥视:

var bar = 666;//global, always evil
function createGlobal()
{
    var local = 2;
    foo = bar * local;
}
createGlobal();

我们来看看foo

JS is in createGlobal scope: var local is declared, and assigned 2.
   foo is used, and assigned bar*local
    ||                       ||   \\=>found in current scope, resolves to 2
    ||                       ||
    ||                       \\=>found in global scope, resolves to 666
    ||
    ||
    ||=> JS looks for foo declaration in function scope first, not found
    ||
    ||=> moves up 1 scope (either higher function, or global scope)
    ||
    \\=>Global scope, foo not found, create foo globally! - hence, implied global
             \\
              \\=>foo can now be resolved to global variable, value undefined

过多的 DOM 查询:您的事件处理程序回调看起来都像这样:

$('#box2').text(new_info);

这个($('#box2'))其实和写document.getElementById('#box2')是一样的。这实际上是英语。可以这样想:每次客户端点击$(this) - 无论是什么,您都在访问DOM,并扫描它以查找具有给定ID 的元素。为什么不这样做一次并使用保存在内存中的引用来更改文本。这节省了无数的 DOM 查询。您可以使用一个变量,或者(根据我对闭包的解释),一个闭包:

var list = (function(box2, list, i)
{//list & i are arguments, so local to scope, too
    for (i = 0; i < myArray.length; i++)
    {
        list += "<br>" + myArray[i].letter;//<-- don't know why you use this
        //new_info = myArray[i].link; no need for this var
        $(this).click((function(new_info)
        {//new_info is closure var now
            return function ()
            {//box2 references DOM element, is kept in memory to reduce DOM querying
                box2.text(link);
            };
        }(myArray[i].link));//instead of new_info, just pass value here
    }
    return list;//return string, assign to outer variable
}($('#box2'), ''));//query dom here, pass reference as argument

【讨论】:

  • 一个糟糕问题的优秀答案...+1
  • @Doorknob:谢谢。我可能很天真,但我真诚地相信,即使是最明显的问题也可以为人们服务,如果你在答案上付出一些努力......我只是希望 OP 也有同样的感觉:P
  • 能否修改我的代码。这是我关闭的最好方法。通过阅读其他示例(我已经尝试过)我没有得到它。谢谢。
  • @BenDelton:你现在可能代码使用了闭包,但是很遗憾你没有得到它,直到你可以自己创建/使用它们。我已经编辑了您的 sn-p,解决了最明显的问题(全局变量、过多的 DOM 查询和没有自己独特行为的回调),但我无法解决 this 的问题,因为我不知道您希望this 参考的内容
  • “this”指的是“字母”,点击时是A或B或B。希望能帮助到你。如果您对闭包非常了解,可以帮助我编写代码。谢谢
猜你喜欢
  • 2014-09-20
  • 1970-01-01
  • 2022-01-23
  • 1970-01-01
  • 1970-01-01
  • 2012-08-31
  • 1970-01-01
  • 1970-01-01
  • 2015-11-27
相关资源
最近更新 更多