Функции Javascript, возвращающие функции с параметрами

Question

Существует несколько сообщений о функции, возвращающей другую функцию, например this post. Однако что происходит, когда возвращаемая функция содержит параметры?

Я смущен относительно того, как вызывается функция возврата, и откуда она получает свои входные аргументы. Это пример взят из d3 collision feature.

Например,

force.on("tick", function(e) { 
    var q = d3.geom.quadtree(nodes), //q is a quadtree factory 
     i = 0, //counter variable 
     n = nodes.length; //number of nodes 

    while (++i < n) 
    q.visit(collide(nodes[i])); ///////// collide function called here ///////// 

); }); 


function collide(node) { 
    var r = node.radius + 25, 
     nx1 = node.x - r, 
     nx2 = node.x + r, 
     ny1 = node.y - r, 
     ny2 = node.y + r; 

/////// How does the below function work? 
/////// Arguments quad, x1, y1, x2, y2 are not passed, 
////// but the code works 

    return function(quad, x1, y1, x2, y2) { 

    if (quad.point && (quad.point !== node)) { 
      //do something 

     } 
     return x1 > nx2 || x2 < nx1 || y1 > ny2 || y2 < ny1; 
     }; 
} 

Answer 1

Функция возвращаемый вызовом collide(nodes[i]) является функцией обратного вызова для функции visit , Функция обратного вызова выполняется внутри функции visit. Функция visit обеспечивает правильные параметры.

Однако мы не можем свободно выбирать параметры здесь. Параметр, который должен использоваться, был предопределен автором функции visit (Параметры для функции visit задокументированы here).

Например:

//arguments of calc function are a function and two numbers 
 
    function calc(callback,x,y){ 
 
     callback(x,y); //the callback function is called with 2 parameters here. 
 
         //So the 1st argument to the calc function (callback) should also accept two arguments 
 
    } 
 
    
 
    calc(function(a,b){ //calling calc function with arg1 = "function to calculate sum", arg2 = 1, arg3 = 2 
 
     document.write(a+b); 
 
    },1,2);

Answer 2

Вы просто использовать это так:

collide(node)(quad, x1, y1, x2, y2); 

Answer 3

Возвращаемый функция просто, что функция. Поэтому аргументы для quad определяются при его вызове. Внешняя функция служит лишь в качестве «обертки» для значений nx и ny

простой, очень надуманный пример:

function wrapName (personName) { 
    return function greet (greeting) { 
    return greeting + ' ' + personName; 
    }; 
} 

// greetBobWith is now the returned function, which accepts a `greeting` param 
// but still has a reference to `personName` 
var greetBobWith = wrapName('bob'); 

greetBobWith('Hello!'); // "Hello! Bob" 
greetBobWith('Happy Holidays'); // "Happy holidays, Bob" 

Answer 4

функция возвращает сталкиваются анонимную функцию. Эта анонимная функция не вызывается сразу. Он будет вызываться только в том случае, если возвращаемая функция сохраняется как переменная, и затем вызывается эта переменная.

Пример:

//declare quad, x1, y1, x2, y2 here or in a parent scope 
var returnedFunction = collide(someNode); 
var returnedBool = returnedFunction(quad, x1, y1, x2, y2); 

function collide(node) { 
    var r = node.radius + 25, 
    nx1 = node.x - r, 
    nx2 = node.x + r, 
    ny1 = node.y - r, 
    ny2 = node.y + r; 

    /////// How does the below function work? 
    /////// Arguments quad, x1, y1, x2, y2 are not passed, 
    ////// but the code works 

     return function(quad, x1, y1, x2, y2) { 

     if (quad.point && (quad.point !== node)) { 
      //do something 

     } 
     return x1 > nx2 || x2 < nx1 || y1 > ny2 || y2 < ny1; 
     }; 
    } 

Answer 5

Значение выражения collide(nodes[i]) функция возвращается из collide. Он не называется прямо там, но функция передается в метод visit.

Позже на visit будет вызываться функция, созданная в collide, вот когда параметры предоставляются функции. Что-то вроде:

visit: function(collideFunc){ 

    // ... 

    var collided = collideFunc(quad, x1, y1, x2, y2); 

    // ... 

} 

Answer 6

Понимание закрытия Javascript помогло мне разобраться в процессе функции, возвращающей функцию. Для тех, кто до сих пор путают, проверить эти две ссылки, которые объясняет понятие очень хорошо:

http://www.w3schools.com/js/js_function_closures.asp

http://bost.ocks.org/mike/chart/