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

回答

相關問題