let/var的使用详解
生活随笔
收集整理的這篇文章主要介紹了
let/var的使用详解
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
?ES5中的var是沒有塊級作用域的(if/for)
?ES6中的let是由塊級作用的(if/for)
ES5之前因為if和for都沒有塊級作用域的概念,?所以在很多時候,?我們都必須借助于function的作用域來解決應(yīng)用外面變量的問題.
ES6中,加入了let,?let它是有if和for的塊級作用域.
沒有塊級作用域引起的問題:?for的塊級
? ? ?為什么閉包可以解決問題:?函數(shù)是一個作用域.
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title> </head> <body><button>按鈕1</button> <button>按鈕2</button> <button>按鈕3</button> <button>按鈕4</button> <button>按鈕5</button><script>// ES5中的var是沒有塊級作用域的(if/for)// ES6中的let是由塊級作用的(if/for)// ES5之前因為if和for都沒有塊級作用域的概念, 所以在很多時候, 我們都必須借助于function的作用域來解決應(yīng)用外面變量的問題.// ES6中,加入了let, let它是有if和for的塊級作用域.// 1.變量作用域: 變量在什么范圍內(nèi)是可用.// {// var name = 'why';// console.log(name);// }// console.log(name);// 2.沒有塊級作用域引起的問題: if的塊級// var func;// if (true) {// var name = 'why';// func = function () {// console.log(name);// }// // func()// }// name = 'kobe'// func()// // console.log(name);var name = 'why'function abc(bbb) { // bbb = 'why'console.log(bbb);}abc(name)name = 'kobe'// 3.沒有塊級作用域引起的問題: for的塊級// 為什么閉包可以解決問題: 函數(shù)是一個作用域.// var btns = document.getElementsByTagName('button');// for (var i=0; i<btns.length; i++) {// (function (num) { // 0// btns[i].addEventListener('click', function () {// console.log('第' + num + '個按鈕被點(diǎn)擊');// })// })(i)// }const btns = document.getElementsByTagName('button')for (let i = 0; i < btns.length; i++) {btns[i].addEventListener('click', function () {console.log('第' + i + '個按鈕被點(diǎn)擊');})}// ES5// var i = 5// {// btns[i].addEventListener('click', function () {// console.log('第' + i + '個按鈕被點(diǎn)擊');// })// }//// {// btns[i].addEventListener('click', function () {// console.log('第' + i + '個按鈕被點(diǎn)擊');// })// }////// {// btns[i].addEventListener('click', function () {// console.log('第' + i + '個按鈕被點(diǎn)擊');// })// }////// {// btns[i].addEventListener('click', function () {// console.log('第' + i + '個按鈕被點(diǎn)擊');// })// }//// {// btns[i].addEventListener('click', function () {// console.log('第' + i + '個按鈕被點(diǎn)擊');// })// }//// // ES6// { i = 0// btns[i].addEventListener('click', function () {// console.log('第' + i + '個按鈕被點(diǎn)擊');// })// }//// { i = 1// btns[i].addEventListener('click', function () {// console.log('第' + i + '個按鈕被點(diǎn)擊');// })// }// { i = 2// btns[i].addEventListener('click', function () {// console.log('第' + i + '個按鈕被點(diǎn)擊');// })// }// { i = 3// btns[i].addEventListener('click', function () {// console.log('第' + i + '個按鈕被點(diǎn)擊');// })// }// { i = 4// btns[i].addEventListener('click', function () {// console.log('第' + i + '個按鈕被點(diǎn)擊');// })// }</script></body> </html>
?
總結(jié)
以上是生活随笔為你收集整理的let/var的使用详解的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： v-bind介绍
- 下一篇： 块级作用域(es5没闭包-有闭包-let