JavaScript ES6笔记

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)