01-块级作用域
ES5之前因为if和for都没有块级作用域的概念，所以在很多时候，我们都必须借助于function的作用域来解决应用外面变量的问题。
<!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之前因为if和for都没有块级作用域的概念，所以在很多时候，我们都必须借助于function的作用域来解决应用外面变量的问题
// 1.变量作用域：变量在什么范围内是可用
/*{
var name = 'why';
console.log(name);
}
console.log(name);*/
// 2.没有块级作用域引起的问题：if的块级
/*var func;
if (true) {
var name = 'what';
func = function () {
console.log(name);
};
}
func()
console.log(name)*/
// 3.没有块级作用域引起的问题：for的块级
// 为什么闭包可以解决问题: 函数是一个作用域
var btns = document.getElementsByTagName('button');
for (var i = 0; i < btns.length; i++) {
(function (i) {
btns[i].addEventListener('click', function () {
alert('第' + i + '个按钮被点击');
})
})(i)
}
</script>
</body>
</html>02-块级作用域(ES5没闭包-有闭包-let对比)
<!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>
// 没有块级作用域引起的问题：for的块级
// 为什么闭包可以解决问题: 函数是一个作用域
var btns = document.getElementsByTagName('button');
for (var i = 0; i < btns.length; i++) {
btns[i].addEventListener('click', function () {
alert('第' + i + '个按钮被点击');
})
}
// 1.情况二: ES5中没有使用闭包(错误方式)
i = 0
{
var i = 0
btns[i].addEventListener('click', function () {
alert('第' + i + '个按钮被点击');
})
}
{
var i = 1
btns[i].addEventListener('click', function () {
alert('第' + i + '个按钮被点击');
})
}
{
var i = 2
btns[i].addEventListener('click', function () {
alert('第' + i + '个按钮被点击');
})
}
// 2.情况二: ES5中使用闭包
var btns = document.getElementsByTagName('button');
for (var i = 0; i < btns.length; i++) {
(function (i) {
btns[i].addEventListener('click', function () {
alert('第' + i + '个按钮被点击');
})
})(i)
}
// ES6中的let
const btns = document.getElementsByTagName('button');
for (let i = 0; i < btns.length; i++) {
btns[i].addEventListener('click', function () {
alert('第' + i + '个按钮被点击');
})
}
</script>
</body>
</html>03-const的使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
// 1.注意一: 一旦给const修饰的标识符被赋值之后，不能修改
// const name = 'why'
// name = 'abc'
// 2.注意二: 在使用const定义标识符，必须进行赋值
// const name;
// 3.注意三: 常量的含义是指向的对象不能修改，但是可以改变对象内部的属性
const obj = {
name: 'what',
age: 18,
height: 1.78
}
console.log(obj);
obj.name = 'gaze'
obj.age = 40
obj.height = 2.03;
console.log(obj)
</script>
</body>
</html>04-对象字面量的增强写法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
// const obj = new Object()
/*const obj = {
name: 'why',
age:18,
run: function () {
console.log('在奔跑');
},
eat: function () {
console.log('吃东西')
}
}*/
// 1.属性增强写法
const name = 'why';
const age = 18;
const height = 1.82;
// ES5的写法
/*const obj = {
name: name,
age: age,
height: height
}*/
// ES6的写法
const obj = {
name,
age,
height
}
console.log(obj)
// 2.函数的增强写法
// ES5的写法
/*const obj = {
run: function () {
},
eat: function () {
}
}*/
// ES6的写法
const obj ={
run() {
},
eat() {
}
}
</script>
</body>
</html>
