05
2017
10

ECMAScript6

参考: ECMAScript6 入门

一、import和export

(1)、概念

  1. export:用于输出本模块变量的接口
  2. import:用于一个模块加载另一个含有export接口的模块。

(2)、实例1

// a.js

var sex="boy";
var echo=function(value){
  console.log(value)
}
export {sex,echo} 


// b.js
import {sex,echo} from "./a.js" 
console.log(sex)   // boy
echo(sex) // boy
  1. 通过向大括号中添加sex,echo变量并且export输出,就可以将对应变量值以sex、echo变量标识符形式暴露给其他文件而被读取到
  2. 不能写成export sex这样的方式,如果这样就相当于export “boy”,外部文件就获取不到该文件的内部变量sex的值,因为没有对外输出变量接口,只是输出的字符串。
  3. 通过import获取a.js文件的内部变量,{}括号内的变量来自于a.js文件export出的变量标识符。

(3)、实例2 export default

//a.js

var sex="boy";
export default sex(sex不能加大括号)


// b.js

import any from "./a.js"
import any12 from "./a.js" 
console.log(any,any12)   // boy,boy
  1. b.js使用import命令的时候,用户需要知道a.js所暴露出的变量标识符,否则无法加载。可以使用export default命令,为模块指定默认输出,这样就不需要知道所要加载模块的变量名。
  2. 本质上,a.js文件的export default输出一个叫做default的变量,然后系统允许你为它取任意名字。所以可以为import的模块起任何变量名,且不需要用大括号包含
  3. 一条import可以同时导入默认方法和其它变量:import defaultMethod, { otherMethod } from ‘xxx.js’;
  4. 一个模块只能使用 export default 一次

二、let、const和块级作用域

  1. var可以变量提升,let不可以。
  2. let不允许在相同作用域重复声明,var可以。
  3. let的作用域是块,而var的作用域是函数。
  4. let声明变量,值可以改变,const声明变量值不可变,其它属性const和let一致。

实例1:let块级作用域

{
  let a = 1;
  var b = 1;
}
a;  // Uncaught ReferenceError: a is not defined(…)
b;  // 1

实例2:let不会发生“变量提升”现象

function test(){
  console.log(a);
  console.log(b);
  var a = 1;
  let b = 1;
}
test(); // a:undefined;b:Uncaught ReferenceError: b is not defined(…)

三、箭头函数

(1)、语法

([param] [, param]) => {
   statements
}


param => expression

param 是参数,根据参数个数不同,分这几种情况:

  • () => { … } // 零个参数用 () 表示;
  • x => { … } // 一个参数可以省略 ();
  • (x, y) => { … } // 多参数不能省略 ();

(2)、示例1 :单个参数

// ES5
var selected = allJobs.filter(function (job) {
  return job.isSelected();
});

// ES6
var selected = allJobs.filter(job => job.isSelected());

(3)、示例2 :多个参数

// ES5
var total = values.reduce(function (a, b) {
  return a + b;
}, 0);

// ES6
var total = values.reduce((a, b) => a + b, 0);

四、Use Strict严格模式

(1)概述

除了正常运行模式,ES5添加了第二种运行模式:”严格模式”(strict mode)

(2) 进入标志

“use strict”;

(3)如何调用

  • 针对单个脚本

      < script>
        “use strict”;
        console.log(“这是严格模式。”);
      

  • 针对单个函数

    function strict(){
        “use strict”;
        return “这是严格模式。”;
      }
      function notStrict() {
        return “这是正常模式。”;
      }

(4)语法与行为改变

  • 严格模式禁止一个变量没有声明就赋值
  • 禁止this关键字指向全局对象
  • 严格模式下无法删除变量,只有configurable设置为true的对象属性,才能被删除。
  • 正常模式下,如果对象有多个重名属性,最后赋值的那个属性会覆盖前面的值。严格模式下,这属于语法错误。
  • 函数不能有重名的参数

五、class

(1)、基本语法

ES6引入了Class(类)这个概念,可以只看做一个语法糖。

  1. constructor是构造方法。
  2. 类的数据类型就是函数,类本身就指向构造函数。

实例1:

class Point {
  constructor(x, y) {
    this.x = x;
    this.y = y;
  }

  toString() {
    return '(' + this.x + ', ' + this.y + ')';
  }
}

六、super关键字

(1)、语法

super关键字用于访问父对象上的函数

  • super([arguments]); //访问父对象上的构造函数
  • super.functionOnParent([arguments]); //访问父对象上的方法
  • super(props)的目的:在constructor中可以使用this.props

实例1:

class Person {
  constructor (name) {
    this.name = name;
  }
}
class Student extends Person {
  constructor (name, age) {
    super(); // 用在构造函数中,必须在使用this之前调用
    this.age = age;
  }
}
  • super()调用会生成一个空对象,作为context来调用父类的constructor,返回this对象,作为子类constructor的context继续调用构造函数。
  • 在子类的constructor中必须先调用super才能引用this

实例2:调用父类的静态函数

class Human {
  constructor() {}
  static ping() {
    return 'ping';
  }
}

class Computer extends Human {
  constructor() {}
  static pingpong() {
    return super.ping() + ' pong';
  } // 只有在子类的静态函数中才能调用父类的静态函数(babel环境测试,按理说,在实例函数中应该也可以调用,不过实际测试环境中报错)
}
Computer.pingpong(); // 'ping pong'
上一篇:ResourceManager(六)—— ResourcesManager 下一篇:将项目上传到github