Javascript“this”through different scope

请阅读并尝试下面的代码。点击“foo”段落。看着浏览器控制台，我看不到预期的结果，而如果我点击“栏”，我就可以。Javascript“this”through 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

来源

2013-03-26 Danilo Maccioni

请问一个问题，不要只说你不希望的结果。 – 2013-03-26 14:42:03

创建一个jsfiddle – robasta 2013-03-26 14:42:56

欢迎来到[SO];如果您还没有，请查看[faq]。对于这些问题，通常在jsfiddle（http://jsfiddle.net）上创建[简化测试用例]并描述您的预期结果是很有帮助的。 – zzzzBov 2013-03-26 14:43:17

你只是缺少一个return语句进行else条款。它应该是：

... 

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

请注意，您使用的是递归函数（调用自身的函数），所以很可能需要添加额外的预防措施，使其返回在特殊情况下的东西（比如，不存在节点与类“根”），否则你会得到一个无限的递归和堆栈溢出错误。

来源

2013-03-26 14:43:34 bfavaretto

是的，我试图故意使用递归函数，但我确信我不需要返回自己。谢谢。现在我可以处理例外情况。 – 2013-03-26 15:37:07

内部调用确实返回了一个值，但是你的代码忽略了它。添加return语句使得外部调用返回内部调用的值。每个值只返回到从中调用它的上下文。 – bfavaretto 2013-03-26 15:55:44

这是你的错误。你应该返回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); 
    } 
    }

来源

2013-03-26 14:51:40 sachinjain024

你错过了<div>和</div>标签，请检查：

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

来源

2013-03-26 14:53:45

Javascript“this”through different scope

回答

相关问题