随着google和firfox以及node6.0对ES6的支持,ES6语法的定稿使它越来越受到关注,尤其是react项目基本上都是用ES6来写的。本文主要就是对ES6基础语法做出解析,为后续的React知识点做好铺垫,主要内容如下:
- let, const:块级作用域—声明变量
- class, extends, super: 类,继承,指代父类
- arrow functions:箭头函数
- template string:字符串操作
- destructuring:变量解构
1. let, const:块级作用域—声明变量
1.1 变量使用
ES5下的作用域:
var name = "H5";
while(true) {
var name = "CSS3";
console.log(name);
break;
}
console.log(name);
// ES5的作用域分两种,一个是全局,一个函数
var a = [];
for(var i = 0; i < 10; i++) {
a[i] = function() {
console.log(i);
}
}
a[5]();
变量i是var声明的,在全局范围内都有效。所以每一次循环,新的i值都会覆盖旧值,导致最后输出的是最后一轮的i的值。为了能够保留执行过程的值,所以使用闭包的形式:
var a = [];
for(var i = 0; i < 10; i++) {
a[i] = function(x) {
return function() {
console.log(x);
}
}(i)
}
a[6]();
避免内存泄漏,不建议使用闭包,所以ES6提出了块级作用域let,采用ES6的语法:
var a = [];
for(let i = 0; i < 10; i++) {
a[i] = function() {
console.log(i);
}
}
a[5]();
let属于块级作用域,不允许在代码块的外面使用申明的变量
if(1) {
let s = 0;
}
console.log(s);
在同一代码块中不允许使用let重复定义同名变量(不同代码块中可以重复声明)
let s = 0;
let s = 7;
console.log(s);
1.2 常量
关于常量的定义,ES6提出了const;
const str = "HTML5";
str = "CSS3";
console.log(str);
一旦使用const声明常量,就不允许对其更改值,如果修改,浏览器报错;
const多数应用于引入第三方库时声明变量,用来避免重名的bug。
const react = require("react");
2. class, extends, super: 类,继承,指代父类
面向对象的使用,ES6提出了class的写法,让对象的原型更具备形式。
首先用class定义了一个“类”,可以看到里面有一个constructor方法,这就是构造方法,而this关键字则代表实例对象。简单地说,constructor内定义的方法和属性是实例对象自己的,而constructor外定义的方法和属性则是所有实例对象可以共享(可继承)的,代码如下:
class Project {
constructor() {
this.type = "H5";
}
says(say) {
console.log(this.type + " and " + say);
}
}
let pro = new Project();
pro.says("CSS3");
class Infor extends Project {
constructor() {
super();
this.type = "JS";
}
}
let infor = new Infor();
infor.says("JQ");
解析:
class之间可以通过extends关键字实现继承,这比ES5的通过修改原型链实现继承要简单许多。上面定义了一个Infor类,该类通过extends关键字,继承了Project类的所有属性和方法。
super关键字,它指代父类的实例(即父类的this对象)。子类必须在constructor方法中调用super方法,否则新建实例时会报错。这是因为子类没有自己的this对象,而是继承父类的this对象,然后对其进行加工。如果不调用super方法,子类就得不到this对象。
总之,ES6的继承机制,实质是先创造父类的实例对象this(所以必须先调用super方法),然后再用子类的构造函数修改this。
3. arrow functions:箭头函数
ES5的函数:
function log(i) {
return i + 1;
}
console.log(log(6));
ES6的函数:
var log = (i) => {return i + 1};
console.log(log(6));
箭头函数的应用,主要应用于解决this指向问题
- setTimeOut的this指向window全局
- ES5的处理有两种:
- 1、预存this
- 2、借助bind(this)
ES6使用箭头函数实例:
class Projects {
constructor() {
this.type = "H5";
}
says(say) {
// ES5预存this
// var self = this;
setTimeout(() => {
console.log(this.type + " and " + say);
// ES5使用setTimeout(function(){}.bind(this), 2000);
}, 2000);
}
}
let pros = new Projects();
pros.says("CSS3");
解析:
- 使用箭头函数时,函数体内的this对象,就是定义时所在的对象,而不是使用时所在的对象。
- 并不是因为箭头函数内部有绑定this的机制,实际原因是箭头函数根本没有自己的this,它的this是继承外面的,因此内部的this就是外层代码块的this
4. template string:字符串模板
使用字符串拼接的时候,ES5是用一堆的”” +来连接文本与变量:
var e = "HTML5";
var f = "CSS3";
var con = e + "拥有很多新的特性," + f + "可以用于实现酷炫效果。";
console.log(con);
使用ES6的字符串模板:
var e = "HTML5";
var f = "CSS3";
var strs = `${e}拥有很多新的特性,${f}可以用于实现酷炫效果。`;
console.log(strs);
5. destructuring:变量解构
5.1 结构赋值的使用:
ES5的对象赋值:
let u = "H5";
let v = "CSS";
let objx = {html: u, css: v};
console.log(objx);
ES6允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构:
let html = "HTML5";
let css = "CSS3";
let objs = {html, css};
console.log(objs);
可以放过来书写:
let objy = {html: "H5", css: "CSS3"};
let {html, css} = objy;
console.log(html, css);
5.2 解构赋值在箭头函数应用
解构赋值中箭头函数指向window。
var name = 1;
var age = 2;
var sex = "sss";
var test = {
name,
age,
[sex] : 3,
// this指向改成了window
log: (x) => {
console.log(x, this);
}
// 这里的this指向test
// log: function(x) {
// console.log(x, this);
// }
}
test.log(2);
console.log(test);
总结
本文主要讲解了ES6语法中变量、常量、函数、类与继承等基础知识点,下节讲继续更加深入的剖析ES6的核心语法。