JavaScript实例，阐明函数with-in函数的语言模式设计

Question

我正在学习 JavaScript，对代码示例的逻辑感到困惑。来自代码学院。为什么函数调用中会有函数设置？我很困惑。我正在从简化的类 C 语言转移。

JavaScript 示例

var main = function(){
    $('.article').click(function(){
        $('.description').hide();

        $(this).children('.description').show();
    });
};

我的理解: - main 是一个返回类型为 var 的函数名。

• $('.article') 是元素/对象/或类对象。

• .click()是对成员函数的调用

• 但是:

？？？:

.click(function(){
    $('.description').hide();
    $(this).children('.description').show();
});

这似乎是一个新创建的函数，当/如果 click() 被激活或运行时运行。

我以前的想法是这样的:

 var *p_obj = $('.article');
 var *p_obj = $('.description');

 var do_click()
 {
     p_obj2.hide();
     p_obj.children(p_obj2).show();
 }

 var main(){
     p_obj.click(do_click);
 }

函数 main() 查看 p_obj 并调用 click()。

Click() 评估为 true/false 并运行 pointer_to 函数 do_click()。

函数 do_click() 查看 p_obj2 并调用 hide()，它执行隐藏 p_obj2< 的操作.

函数 do_click() 也会查看 p_obj 并使用子项将焦点范围限定到 p_obj2，然后运行 ​​show() ，执行显示p_obj2的 Action 。

我确实意识到我的类 C 示例是错误和奇怪的。我意识到我的术语有误或使用不当。

这种设计看起来像是我必须在每次调用 .click() 时现场编写扩展功能，所以 if-then .click() 在 3 个不同的项目上运行，我正在为每个对象创建不同的扩展功能。但我通常会创建一个函数，该函数根据 click() 调用它的对象或条件来改变其内部执行。

如果代码相对简单或较短，此设置似乎没问题，但现场功能似乎对较长的代码和功能重复但对象发生变化的代码过度工作。

我是否正确地考虑了 JavaScript 函数 with-in 函数，这是语言的设计目标是添加长重复的扩展函数 with-in 函数吗？

Answer 1

在这里，你应该明白两件事:

1. 将函数作为参数传递
2. 匿名函数

第一个概念特别重要，因为回调在 JavaScript 中很流行，所以让我为回调解释一下。假设我们有 2 个函数 getStuffFromWeb 和 processStuff。您可能希望它们像这样使用:

var result = getStuffFromWeb();
processStuff(result);

但这里的问题是等待 getStuffFromWeb 可能需要一些时间(服务器繁忙)，因此通常以“完成后调用此函数”的方式使用它们，即:

var getStuffFromWeb = function(params,callback) {
    ...
    callback(result);
};
getStuffFromWeb(someParams,processStuff);

嗯，事实上 getStuffFromWeb 的结构会有所不同，很可能是这样的:

var getStuffFromWeb = function(params,callback) {
    requestObject.make_request(params)
                 .onSuccess(callback);
};

所以当 getStuffFromWeb 被调用时，它开始监听响应，而 getStuffFromWeb(someParams,processStuff); 之后的代码继续评估。当响应到来时，它调用回调函数使用我们定义的过程 (processStuff) 进一步处理数据。

第二个概念很简单:你当然可以这样写

var processStuff = function() {...};
var getStuffFromWeb = function(params,callback) {
    requestObject.make_request(params)
                 .onSuccess(callback);
};
getStuffFromWeb(someParams,processStuff);

但是如果你只使用一次processStuff，为什么要定义一个命名函数呢？相反，您可以将完全相同的表达式放在 onSuccess 参数中，如下所示:

var getStuffFromWeb = function(params) {
    requestObject.make_request(params)
                 .onSuccess(function() {...});
};
getStuffFromWeb(someParams);

如果我们获取 processStuff 的值并将其直接放入 onSuccess 的参数(这称为匿名功能)。我们还去掉了 getStuffFromWeb 的额外参数。

基本上就是这样。