ES6 新增了哪些新特性 (一)
文章目录
ES6是对 javascript 语言的一次重大更新，是自从2009年ES5标准化后的第一次重大更新
主要的JavaScript引擎正在逐步实现这些特性，点击这里查看浏览器的兼容情况
这次更新涉及到的新特性还比较多,我们分几个部分来简单介绍
ES6 中模块导入
类似下面的语法:
import fs from 'fs';
import path from 'path';
这里的 import是在编译时决定的( 即在脚本开始执行之前 )
事实上，各个模块之间的依赖关系图所涉及的所有imports和exports都是在执行之前已经决定
如果我们的代码中需要按需加载的需求，即在运行时才进行模块加载
这样的情况,ES6也有异步的模块动态加载API
不过本文只讨论声明式模块依赖关系图的解析
对于静态模块来说，总是早期绑定，也就是始终和变量引用一样高效
这使得模块化的程序能运行更快，避免了因为模块化导致额外性能成本
箭头函数 和 静态this
胖箭头(=>)语法，与C#，Java 8和CoffeeScript类似
支持表达式和语句作为函数体。不像普通函数，箭头函数的this是和文法作用域绑定的
=> 胖箭头用法 :
var nums=[15,62,35,77,90,45,60];
var fives=[];
nums.forEach(v => {
if (v % 5 === 0)
fives.push(v);
});
console.log(fives);
[15, 35, 90, 45, 60]
静态this 用法 :
var bob = {
_name: "Bob",
_friends: ['aaa','bbb','ccc'],
printFriends() {
this._friends.forEach(f =>
console.log(this._name + " knows " + f));
}
};
//调用
bob.printFriends();
//输出
Bob knows aaa
Bob knows bbb
Bob knows ccc
ES6 中的类 (Class)
ES6 采用语法糖的形式实现了类的定义,初看你会感觉和 java ,c# 等高级语言的类很相似,其实差别还是很大的.
ES6 中的类的主体有一些限制
***只能包含: ***
1.构造函数
2.静态方法
3.原型方法
决定不能包含变量,否则报错.对于高级面向对象的语言来说,属性是类不可缺少的一部分,但是ES6 的 class 明显行不通,再次证明了他的底层还是原型继承模式.
class Module{
//构造函数
constructor(option){
//构造函数主体
}
// 静态方法，静态方法用static修饰
static staticMethod(){
return 'static method';
}
// 原型方法
prototypeMethod(){
return 'prototype method'; }
}
如何调用:
我们知道构造函数是在类初始化对象时调用的.
静态方法如何调用?
直接在类上调用即可,类似 C# (静态属性和方法是属于类的,而不是属于对象的)
原型方法如何调用?
需要初始化对象后再调用
//如下:
var module=new Module();
module.prototypeMethod();
原型方法是属于对象的,而不是属于类的.
如何定义类
在早期的Js中，面向对象的实现比较特殊，我们必须要用function来模拟.
如今 ES6 已经支持这种语法,当然,背后实现还是依靠原型继承,你可以把它当做语法糖.
//ES5及以下
function Add(x, y){
this.result=x+y;
}
var obj = new Add(100, 100);
console.log(obj.result);
//ES6下面是这样的
'use strict'
//必须指定 上面声明，否则iojs会提示不认识class
class Add{
constructor(x, y){
this.result=x+y;
}
}
var obj = new Add(100, 100);
console.log(obj.result);
继承
//ES6
'use strict'
//父类
class Animal{
constructor(){
this.attr="eat";
}
}
var animal = new Animal();
//子类
class Cat extends Animal{
constructor(leg_num){
super();
this.legs = leg_num;
}
}
var cat = new Cat(4);
console.log(cat.attr,cat.legs);
//输出继承关系
console.log(cat instanceof Cat); //true
console.log(cat instanceof Animal); //true
对 Cat 和 Animal 进行typeof，结果很明显也能看到是function
console.log(typeof Cat); // function
console.log(typeof Animal); // function
既然我们对 class 进行 typeof 发现是个 function ,那么肯定有同学想直接以方法的方式调用这个class
如下:
Animal();
//结果报错
关于类定义的一个坑
我们在 ES5 或者之前的版本里.javascript默认会定义前置.
什么意思
如下:
console.log(add(5,6));
function add(a,b){
return a+b;
}
输出:11
这样是可以的.
如果在 ES6 下:
'use stract'
console.log(add(5,6));
class add{
constructor(a,b){
return a+b;
}
}
输出:Error
所以,在 ES6 模式下,必须先定义,再引用,它不再像ES5编译之前默认定义前置.