块级作用域(es5没闭包-有闭包-let对比)
生活随笔
收集整理的這篇文章主要介紹了
块级作用域(es5没闭包-有闭包-let对比)
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><button>按鈕1</button>
<button>按鈕2</button>
<button>按鈕3</button><script>// 1.沒有塊級作用域引起的問題: for的塊級// 為什么閉包可以解決問題: 函數(shù)是一個作用域.var btns = document.getElementsByTagName('button');for (var i=0; i<btns.length; i++) {btns[i].addEventListener('click', function () {console.log('第' + i + '個按鈕被點擊');})}// 1.情況一: ES5中沒有使用閉包(錯誤的方式)i = 2{// i = 0btns[i].addEventListener('click', function () {console.log('第' + i + '個按鈕被點擊');})}{i = 1btns[i].addEventListener('click', function () {console.log('第' + i + '個按鈕被點擊');})}{// i = 2btns[i].addEventListener('click', function () {console.log('第' + i + '個按鈕被點擊');})}// 2.情況二: ES5中使用閉包var btns = document.getElementsByTagName('button');for (var i=0; i<btns.length; i++) {(function (i) { // 0btns[i].addEventListener('click', function () {console.log('第' + i + '個按鈕被點擊');})}) (i)}i = 100000000function (i) { // i = 0btns[i].addEventListener('click', function () {console.log('第' + i + '個按鈕被點擊');})}(0)function (i) { // i = 1btns[i].addEventListener('click', function () {console.log('第' + i + '個按鈕被點擊');})}(1)function (i) { // i = 2btns[i].addEventListener('click', function () {console.log('第' + i + '個按鈕被點擊');})}(2)// ES6中的letconst btns = document.getElementsByTagName('button')for (let i = 0; i < btns.length; i++) {btns[i].addEventListener('click', function () {console.log('第' + i + '個按鈕被點擊');})}i = 10000000{ i = 0btns[i].addEventListener('click', function () {console.log('第' + i + '個按鈕被點擊');})}{ i = 1btns[i].addEventListener('click', function () {console.log('第' + i + '個按鈕被點擊');})}{ i = 2btns[i].addEventListener('click', function () {console.log('第' + i + '個按鈕被點擊');})}</script></body>
</html>
?
《新程序員》：云原生和全面數(shù)字化實踐50位技術(shù)專家共同創(chuàng)作，文字、視頻、音頻交互閱讀總結(jié)
以上是生活随笔為你收集整理的块级作用域(es5没闭包-有闭包-let对比)的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： let/var的使用详解
- 下一篇： const的使用 || 对象增强写法