Question

我正在学习JavaScript并且对代码示例的逻辑感到困惑。来自codecademy。为什么在函数调用中有函数设置？我很困惑。我正在从简化的类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的操作

我确实意识到我的C样例子是错误的和奇怪的。我意识到我的术语错误或者使用不当。

这种设计的外观似乎我必须在每次拨打.click()的时候在现场编写扩展功能，所以if-then .click()在3个不同的项目上运行，I＆＃39; m为每个对象创建不同的扩展功能。但我通常会创建一个函数，根据对象或条件click()调用它来改变它的内部执行。

如果代码相对简单或短暂，但现场功能看起来像过度使用更长的代码和代码，其中功能重复但对象发生变化，这个设置似乎没问题。

我是否正确考虑了JavaScript函数的in-in函数，这是langue的设计目标，可以在函数中添加长重复的扩展函数吗？

Answer 1

在这里，您应该了解两件事：

将函数作为参数传递
匿名函数

第一个概念特别重要，因为回调在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 param中，如下所示：

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

如果我们取processStuff的值并将其直接放到onSuccess的参数（这就是所谓的匿名函数），它就像完全一样。而且我们还摆脱了getStuffFromWeb的额外论点。

基本就是这样。

Answer 2

简单回答是click()的第二个参数需要回调函数。

这可以是在p_obj.click(do_click);示例中作为引用传递的命名函数，也可以是具有自包含逻辑的匿名函数。匿名函数在javascript中非常常见

只有两种不同的方式来声明回调，这是一回事。

请注意，从事件处理函数返回任何内容的唯一时间是return false，它有效地阻止了默认的浏览器事件（从href打开url或者为示例提交表单）并停止向DOM传播的事件树

Answer 3

main是一个函数名，返回类型为var。

没有。 main是一个赋予匿名函数的变量。函数名称将介于关键字function和包含参数列表的()之间。

它没有return语句，因此返回undefined。

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

使用一个参数调用函数$。返回值是一个jQuery对象。

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

差不多。在JavaScript中，我们将任何作为对象属性值的函数称为方法。

这似乎是一个新当场创建的功能

function () { }是一个函数表达式。它创建一个函数，就像之前用于为main赋值的函数一样。 This question is worth reading了解有关此主题的更多信息。

当/如果点击（）被激活或运行。

立即调用click函数。新函数作为参数传递。

click函数的目的是绑定一个click事件处理程序，这样当click事件稍后点击该元素时，它将触发作为参数传递的函数。

我确实认识到我的c式例子是错误的和奇怪的。我意识到我的术语错误或者使用不当。

抛开语法的变幻莫测。这里的主要区别是click事件处理函数是事件处理函数存储在中间变量中。

您可以轻松地在JavaScript中执行此操作，然后在代码中的其他位置重用该函数。

var main = function(){

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

    $('.article').click(show_specific_description);
    show_specific_description.call($(".article").last()[0]);
};

main();

这是langue的设计目标，用于添加长重复扩展函数的函数吗？

没有。将函数表达式作为参数传递是一种方便的方法，当您不想重用该函数时更简洁。这不是传递函数的唯一方法。

Answer 4

main目前是一个功能可以被覆盖（甚至是不同的类型）。 var不是返回类型，它是main是变量的声明。
所有值都应声明为变量，在您打算使用它们的最高范围内（在JS中，范围通常表示函数，而不是块）。
你有正确的想法，怀疑函数被传入，并在稍后的时间点调用（这实际上是人们从某些其他语言获得的难度较大的部分之一）。您将通过JS看到这种行为。
用这种语言记住一个关键的事情（你还没有想到它，但你会这么做）是JS是词法范围的。
```
function getInnerX () {
  var x = 5;
  function getX () {
    return x;
  };
  return getX;
}

var x = 10;
var getX = getInnerX();
console.log(getX()); // 5  
```
getX内的函数getInnerX可以访问它周围的引用，在它被定义的位置（不是它被调用的地方），因此有生命访问内部x，即使其值随时间变化这将是了解您在语言中看到的内容的另一个重要部分，特别是在回调的情况下。

JavaScript示例，阐明函数with-in函数的{langue模式设计

4 个答案: