ES6 新增了哪些新特性 (一)

ES6.jpg

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

出自:ES6 新增了那些新特性 (一)



回到顶部