Путаница относительно прохождения параметра в Javascript

<html> 
    <head> 
    </head> 
    <body onload=> 
     <button></button> 
     <script> 
     function give_show(value) { 
      return function() { 
       console.log(value); 
      } 
     } 

     var button_element =document.getElementsByTagName('button')[0]; 
     button_element.addEventListener('load',give_show('bong!'),false) 
     </script> 
    </body> 
</html>

Приведенный выше код работает. в консоли я получил:Путаница относительно прохождения параметра в Javascript

bong!

Однако, если я изменю эту часть:

function give_show(value) { 
    return function() { 
     console.log(value); 
    }

function give_show(value) { 
    return function(value) { 
     console.log(value); 
    }

я получил что-то вроде

mouse.event

Что вызывает, что случиться?

FYI: Я использую консоль Safari, чтобы получить результат.

источник

2012-02-08 mko

Это происходит потому, что в то время, когда вы звоните console.log(value);, переменная value ссылается на параметр самой внутренней функции. Этот параметр переопределяет значение параметра, которое вы передали в give_show, поскольку оно имеет то же имя. Когда эта функция вызывается в результате события щелчка, браузер передает фактический объект события клика в качестве первого параметра в эту внутреннюю функцию, поэтому вы видите mouse.event, когда вы делаете console.log.

источник

2012-02-08 17:29:44 ggreiner

Вложенные функции имеют доступ ко всему, что определено в области, в которой они созданы. Итак:

function give_show(value){ 
    return function(){ console.log(value); } 
}

при ссылке value в вложенной функции переменная определена в give_show находится в области видимости и используется.

Однако, когда вы делаете это:

function give_show(value){ 
    return function(value){ console.log(value); } 
}

вы возвращаете функцию, которая принимает аргумент value, так что имя переменной скрывает один определенный give_show.

Чтобы сделать то, что происходит во втором случае более очевидным, этот код делает то же самое, не скрывая переменную value от внешней области:

function give_show(value){ 
    return function(event){ console.log(event); } 
}

Метод console.log использует аргумент передается вашей возвращенной функции и полностью игнорирует значение, переданное give_show. Вот почему вы получаете «mouse.event», а не «bong!». в вашем втором случае - обработчики событий передаются событием в качестве аргумента.

источник

2012-02-08 17:32:46 Herms

но значение '' '' '' '' '' 'mouse.event' ... – gdoron

@gdoron:' 'bong! '' - это начальное значение, переданное функции 'give_show()' и назначенное ' значение '. Таким образом, функция, возвращаемая 'give_show()', всегда будет иметь доступ к этому параметру. :) –

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

Вы можете представить себе это так ...

function give_show(value) { // <-- 1. You passed 'bong!' 

    return function(value) { // <-- 2. Browser passes the Event object <--------+ 
//                    | 
     console.log(value); // <-- 3. Will use the nearest "value" it finds ----+ 
    }; 
}

Так возвращаемая функция используется в качестве обработчика события. Когда происходит событие, браузер передает объект Event этой функции. Поскольку вы назвали параметр value, console.log будет использовать это.

Если вы не дали имя value функции обработчика, следующий value будет один определенный в вашей give_show функции ...

function give_show(value) { // <-- 1. You passed 'bong!' <----------------------+ 
//                    | 
    return function(foo) { // <-- 2. Browser passes the Event object   | 
//                    | 
     console.log(value); // <-- 3. Will use the nearest "value" it finds ----+ 
    }; 
}

источник

2012-02-08 17:48:01

меняю load для click на listners и добавить console.log до возврата внутренней функции:

<html> 
    <head> 
    </head> 
    <body> 
     <button></button> 
     <script> 
      function give_show(value) { 
       console.log(value); 

       return function(value) { 
        console.log(value); 
       }    
      } 

      var button_element =document.getElementsByTagName('button')[0]; 
      button_element.addEventListener('click',give_show("bong!"),false); 
     </script> 
    </body> 
</html>

con слияние происходит, когда give_show передается addEventListner. В примере give_show запустите перед тем, как вы нажмете кнопку, и Bong! записывает на консоль. addEventListner признает только функция:

function(value) { 
    console.log(value); 
}

и события (нажмите) перейти на value положение щелкнул мышью. Это же, чтобы сделать это:

button_element.addEventListener('click',function(value) { 
              console.log(value); 
             }, 
           false);

Если вы подавляете value параметр value используется от передается give_show функции.

источник

2012-02-08 18:06:12 Jones

@yozloy Дайте другое решение. – Jones

Путаница относительно прохождения параметра в Javascript

ответ

Смежные вопросы