无法从书中了解这些例子javascript,好的部分

时间:2013-06-18 01:15:55

标签: javascript function object

我正在阅读javascript:Douglas Crockford的优点。我很难理解一个特定的例子和作者提供的解释。

例1 :(第38页)

var quo=function (status) {
    return {
        get_status:function() {
           return status;
       }
    };
};

var myQuo=quo("amazed");
document.writeln(myQuo.get_status());

书中的解释(我不明白这一点。请解释这一部分):

  

此quo函数设计为在没有 new 前缀的情况下使用,因此名称不是大写的。当我们调用quo时,它返回一个包含get_status方法的新对象。对该对象的引用存储在myQuo中。 即使quo已经返回,get_status方法仍然具有对quo状态属性的特权访问权限。 get_status无权访问参数的副本。它可以访问参数本身。这是可能的,因为该函数可以访问创建它的上下文。这叫做封闭。

示例2(第39页):

//make a function that assigns event handler function to array of nodes
//when you click on a node, an alert box will display the ordinal of the node

var add_the_handlers=function (nodes) {
    var helper=function(i) {
        return function(e) {
            alert(i);
        }
    };
    var i;
    for (i=0;i<nodes.length;i++) {
        nodes[i].onclick=helper(i);
    }
};

我很难理解这段代码是如何工作的,而且函数(e)是做什么的? 为什么辅助函数返回函数反过来又不返回任何东西。这让我非常困惑。如果有人能用简单的语言解释,那将会非常有帮助。非常感谢

EDIT:
According to the book is the bad example for the above(example 2):
  var add_the_handlers=function(nodes) {
    var i;
    for (i=0;i<nodes.length;i++) {
     nodes[i].onclick=function(e) {
     alert(i);
     };
   }
};

作者认为这是一个糟糕的例子,因为它总是显示节点数。

2 个答案:

答案 0 :(得分:5)

我相信,他在示例中暗示的是,您不必复制status参数并将其传递给get_status函数,因为{{1隐式访问包含在定义它的上下文中的所有内容(在本例中为get_status

同样,在例2中

enter image description here

答案 1 :(得分:4)

  

为什么辅助函数返回函数反过来又不返回任何内容。

在javascript中,函数不必显式返回值。如果省略返回值,则隐式return undefined;为。

此外,功能是对象。因此,helper()是一个javascript函数,它返回一个函数:

function(e) {
   alert(i);
}

稍后在for循环中,nodes[i].onclick=helper(i);此行执行helper()函数,该函数返回一个函数对象,然后将该函数对象分配给节点的onclick处理程序。

在Bad示例中,作者说明了一个常见的问题,即新手javascript开发人员绊倒了。

//According to the book is the bad example for the above(example 2):
 var add_the_handlers=function(nodes) {
  var i;
  for (i=0;i<nodes.length;i++) {
   nodes[i].onclick=function(e) {
   alert(i);
   };
 }

在这种情况下,新手程序员希望每个节点都显示其索引。但是,因为onclick处理程序在i周围创建了一个闭包,所以i的值设置为外部作用域的值,当函数为0时,最终为i的值。 执行,而不是新手程序员所期望的分配功能。因此,对于单击的每个节点,它最终会打印相同的数字,即nodes.length或数组中的节点数。

根据评论:

  

此外,你能解释一下功能(e)中的e是什么吗?

在DOM Api中,事件处理程序都传入一个包含事件信息的事件对象。所以在这种情况下,e是click事件对象。此函数未使用e,因此可能已将其省略。