1. 块级作用域
变量作用域:变量在什么范围内可用.
ES5中的var没有块级作用域(if/for)
ES6中的let有块级作用(if/for)ES5之前因为if和for都没有块级作用域的概念, 所以在很多时候, 我们都必须借助于function的作用域来解决应用外面变量的问题.
ES6中,加入了let, let它是有if和for的块级作用域.
1.1 var的作用域
// 没有块级作用域
{
var name = 'why';
console.log(name); // why
}
console.log(name); // why
1.1.1 if的块级
没有块级作用域引起的问题: if的块级
var func;
if (true) {
var name = 'why';
func = function () {
console.log(name); // kobe
}
}
name = 'kobe'
func()
console.log(name); // kobe
1.1.2 for的块级
没有块级作用域引起的问题: for的块级
由于没有块级作用域,每次点击都显示 “第5个按钮被点击”
<body>
<button>按钮1</button>
<button>按钮2</button>
<button>按钮3</button>
<button>按钮4</button>
<button>按钮5</button>
</body>
<script>
var btns = document.getElementsByTagName('button')
for (var i = 0; i < btns.length; i++) {
btns[i].addEventListener('click', function () {
console.log('第' + i + '个按钮被点击'); // 第5个按钮被点击
})
}
</script>
ES5中针对该问题的解决方案:闭包
为什么闭包可以解决问题: 函数是一个作用域.
var btns = document.getElementsByTagName('button');
for (var i=0; i<btns.length; i++) {
(function (num) { // 0
btns[i].addEventListener('click', function () {
console.log('第' + num + '个按钮被点击');
})
})(i)
}
ES6中的写法,直接使用let
const btns = document.getElementsByTagName('button')
for (let i = 0; i < btns.length; i++) {
btns[i].addEventListener('click', function () {
console.log('第' + i + '个按钮被点击');
})
}
2. const使用
使用const修饰的标识符为常量, 不可以再次赋值
注意:
- 注意一: 一旦给const修饰的标识符被赋值之后,不能修改
- 注意二: 在使用const定义标识符,必须进行赋值
- 注意三: 常量的含义是指向的对象不能修改,但是可以改变对象内部的属性。
建议: 在ES6开发中,优先使用const, 只有需要改变某一个标识符的时候才使用let
3. 对象字面量的增强写法
ES6中,对对象字面量进行了很多增强
属性初始化简写和方法的简写:
评论区