2013-03-26 2 views
0

Пожалуйста, прочтите и попробуйте код ниже. Нажмите на пункт «foo». Глядя на консоль браузера, я не вижу ожидаемых результатов, а если я нажму на «бар», я это сделаю.Javascript «this» via different scope

Почему это происходит?

<!DOCTYPE HTML PUBLIC 
    "-//W3C//DTD HTML 4.01//EN" 
    "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
    <head> 
    <meta http-equiv="content-type" content="text/html; charset=utf-8"> 
    </head> 
    <body> 
    <div class="root"> 
     <div> 
     <p id="foo">foo</p> 
     </div> 
     <p id="bar">bar</p> 
    </div> 
    <script type="text/javascript"> 
     var p_list = document.getElementsByTagName('P'); 
     for (var n=0; n<p_list.length; n++) { 
     p_list[n].onclick = function() { 
      console.log('ONCLICK - id: ' + this.id + ' - ' + getC(this) + '\n'); 
     }; 
     } 
     function getC(P) { 
     if (P.parentNode.className === 'root') { 
      console.log('INSIDE FUNCTION - id: ' + P.id + ' - ' + P.parentNode); 
      return P.parentNode; 
     } else { 
      getC(P.parentNode); 
     } 
     } 
    </script> 
    </body> 
</html> 

Живой код: http://jsbin.com/izuleg/1/edit

+4

Пожалуйста, задавайте вопросы, не просто сказать, что вы не ожидаете результата. –

+1

Создать jsfiddle – robasta

+0

Добро пожаловать в [SO]; пожалуйста, просмотрите [faq], если вы еще этого не сделали. Для таких вопросов обычно полезно создать [уменьшенный тестовый пример на jsfiddle] (http://jsfiddle.net) и описать, каковы ожидаемые результаты. – zzzzBov

ответ

2

Вы просто отсутствует return заявление, в вашей статье else. Это не должно быть:

... 

} else { 
    return getC(P.parentNode); 
} 

Обратите внимание, что вы используете рекурсивную функцию (функция, которая называет себя), так что вы, вероятно, следует добавить дополнительные меры предосторожности, чтобы сделать что-то вернуть в исключительных случаях (например, есть нет узел с классом «root»), в противном случае вы получите бесконечную рекурсию и ошибку переполнения стека.

+0

Да, я пытался использовать рекурсивную функцию намеренно, но я был уверен, что мне не нужно возвращаться. Спасибо. Теперь я могу работать над исключениями. –

+0

Внутренний вызов действительно возвращал значение, но ваш код игнорировал его. Добавление этого оператора return заставил внешний вызов вернуть значение внутреннего вызова. Каждое значение возвращается только к контексту, из которого он был вызван. – bfavaretto

0

Это ваша ошибка. Вы должны вернуть результат getC, а не просто называть его.

function getC(P) { 
    if (P.parentNode.className === 'root') { 
     console.log('INSIDE FUNCTION - id: ' + P.id + ' - ' + P.parentNode); 
     return P.parentNode; 
    } else { 
     return getC(P.parentNode); 
    } 
    } 
0

Вы пропустили <div> и </div> теги, пожалуйста, проверьте:

<div class="root"> 
      <div> 
      <p id="foo">foo</p> 
      </div> 
      <div> 
      <p id="bar">bar</p> 
      </div> 
    </div>