ES6:
一、ES6大多是js的语法糖
二、let声明:
在没有块级作用域之前,经典的只弹出最后一次循环结果值的例子:
<!--五个盒子-->
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
var box = document.getElementsByClassName('box');
for (var i = 0; i < box.length; i++) {
box[i].onclick = function () {
alert(i+1)
}
}
以上的代码导致:点击每个图片都弹出数字5而不是我们期待的对应盒子序号
for循环无法暂停,只能全部执行完或者全部跳过
补习闭包:
1、高阶函数除了可以接受函数作为参数外,还可以把函数作为结果值返回。
2、循环当中使用闭包,用到两个:
①闭包函数
②函数传参是按值传递
三、const声明:
声明常量,一旦声明,值就不能改变,不可重复声明
四、类:
1、class
ES6新引入类的概念,只是让对象的原型写法更清晰,更像面向对象的写法
对比:
ES5对象的写法:
①需要一个构造器:
function ObjFn (){
this.name = '我是老尚'
}
②再写原型:
ObjFn.prototype.age = function(){
console.log('今年十八')
}
③使用:new一个对象实例
var _objFn = new ObjFn();
_objFn.age() //console.log('今年十八')
ES6
上面的①、②两步合并简写:
class ObjFn{
constructor(){ //对应上面ES5的第一步构造器
this.name = '我是老尚ES6'
}
age(){ //对应上面ES5的第二步原型
console.log(this.name + '今年十八')
}
}
2、extends super :
extends是用来继承:
父类:
class ObjFn{ //父类
constructor(){ //对应上面ES5的第一步构造器
this.name = '我是老尚ES6'
}
age(){ //对应上面ES5的第二步原型
console.log(this.name + '今年十八')
}
}
super()是用来拿到父类的this,在子类使用任何this之前都必须super()一下,拿到this先
子类:
class SubObjFn extends ObjFn{ //子类
constructor(){ //写类必须要有的构造器
super(); //用来拿到父类的this
this.eating = "能吃"
}
}
六、箭头函数
1、简单理解箭头函数就是返回return
ES5:
function ( n ) { return n+1 }
ES6:
//单行,只有一行return组成的函数
let x = n => n+1
console.log(x(3)) // 4
//多行,用大括号包裹
let x2 = n => {
let m = 3;
console.log(n+m)
}
x2(3) //6
2、箭头函数因为没有function关键字,所以没有自己的this,它的this受执行环境影响
class Timer{
constructor(){
this.name = "这是箭头函数外层代码块的this"
}
run(){
setTimeout(function(){
console.log(this.name)
},1000)
}
}
let _timer = new Timer();
_timer.run() //无法输出内容
以上方法执行是无法输出任何内容的,因为setTimeout调用的代码块运行在与所在函数完全分离的执行环境上,this指向window
class Timer{
constructor(){
this.name = "这是箭头函数外层代码块的this"
}
run(){
setTimeout(()=>{
console.log(this.name)
},1000)
}
}
let _timer = new Timer();
_timer.run() //无法输出内容
使用了箭头函数以后,因为没有了function关键字,所以this就是类里this.name指向的那个this。
七、模板字符串:
用法:两个反引号 ` 包裹 、 ${}写变量名 :
`我今年 ${this.age} 岁`
空格、缩进都会保留在当中
八、解构赋值
对比:
ES5的赋值写法:
var aa = 111;
var bb = 222;
var obj = {aa:aa,bb:bb}
ES6的赋值写法:
let aa = 111;
let bb = 222;
let obj = {aa,bb}
ES6的取值写法:
let aa = 111;
let bb = 222;
let obj = {aa,bb}
let {aa,bb} = obj
console.log(aa,bb)