标签：span document i++ 常用 tag list mes 作用域 作用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>块级作用域与ES6</title>
</head>
<body>
<!--<div id="app">-->
<!--{{message}}-->
<!--</div>-->
<div>
<button>1</button>
<button>2</button>
<button>3</button>
<button>4</button>
</div>
<script src="../js/vue.js"></script>
<script>
// <!--ES5中var没有块级作用域的概念，var定义中 {}， if, for 块级作用域没有作用,在大括号外面依仍可以用，所以经常用funtion 函数的作用域-->
// 在ES6中引入了let，有块级作用域的作用
{
var name = ‘wu‘
console.log(name)
}
console.log(name)
//let 有块级作用域
{
let name1 = ‘wu‘
console.log(name1)
}
// console.log(name1)//错误，没有定义name1
// 点击按钮，获取按钮
const buts = document.getElementsByTagName(‘button‘)
// 第一种 var （错误）
//for(var i = 0; i < buts.length; i++){
// buts[i].addEventListener(‘click‘,function () {
// console.log(‘第‘+ i + ‘个按钮‘)
// })
//}
// 第一种 var + function （正确）
// for(var i = 0; i < buts.length; i++){
// (function (num) {
// buts[i].addEventListener(‘click‘,function () {
// console.log(‘第‘+ num + ‘个按钮‘)
// })
// })(i)
// }
// 第三种，let 正确
for(let i = 0; i < buts.length; i++){
buts[i].addEventListener(‘click‘,function () {
console.log(‘第‘+ i + ‘个按钮‘)
})
}
// ES6的增强写法
const name = ‘wu‘
const age = 18
const height = 188
const obj = {
//ES5的写法
name : name,
// ES6的写法
age,
height,
//ES5的写法
eat: function () {
console.log(‘我在吃‘);
},
// ES6的写法
run(){
console.log(‘我在跑步‘);
}
}
</script>
</body>
</html>
标签：span document i++ 常用 tag list mes 作用域 作用
原文地址：https://www.cnblogs.com/chunying/p/13543345.html
