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); // functionconsole.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编译之前默认定义前置.