<button>一</button> <button>二</button> <button>三</button> <button>四</button><div id="output"></div><script>var buttons = document.querySelectorAll('button')var output = document.querySelector('#output')for (var i = 0; i < buttons.length; i++) {buttons[i].addEventListener('click', function() {output.innerText = buttons[i].innerText})} </script>
從直觀角度看 這段代碼沒有語義上的錯誤,但是當我們點擊任意一個按鈕時,就會報出這樣的錯誤信息:

Uncaught TypeError: Cannot read property 'innerText' of undefined

出現(xiàn)這個錯誤的原因是因為button[i]不存在,即為undefined

每次我們點擊按鈕時,事件監(jiān)聽回調函數(shù)中得到的變量i都會等于button.length,也就是4 而button[4]恰恰不存在,所以導致錯誤發(fā)生

導致i得到的值都是button.length的原因是因為JavaScript中沒有塊兒級作用域,而使對i的變量引用(Reference)一直保持在上一層作用域(循環(huán)語句所在層)上,而當循環(huán)結束時i正好是buttons.length

做一個小改動如下:

?

// ... for (/* var */ let i = 0; i < buttons.length; i++) {// ... } // ...

?

通過 把for語句中對計數(shù)器i的定義語句從var換成let ,因為let語句會使該變量處于一個塊兒級作用域中,從而讓事件監(jiān)聽回調函數(shù)中的變量引用得到保持,

?

?

　　出現(xiàn)這個錯誤的原因是因為button[i] 不存在,即為undefined

?

?

?

?

?

轉載于:https://www.cnblogs.com/moli-/p/6549101.html

總結

以上是生活随笔為你收集整理的JavaScript ES2015的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內容還不錯，歡迎將生活随笔推薦給好友。