语言

ES2015札记

es2015中类，箭头函数，模块简介

iron

• 2 min read
ES2015札记

类

  • 不再使用function关键字给对象/类声明方法，而是直接使用属性名作为方法名

箭头函数

  1. 语法
  • () => expression; // 没有参数
  • param => expression; //一个参数对应一个表达式 eg: x => x+2
  • param => {statements;} // 一个参数对应多个表达式 eg: x = > { x++; return x;};
  • (param [,param]) => expression; //多个参数对应一个表达式 eg:(x,y) => (x + y);
  • ([param] [, param]) => {statements} //多个参数对应多个表达式 eg: (x,y) => { x++;y++;return x*y;};
  • 它能将this静态绑定到对象，而不会因运行上下文的变化而变化，即函数体内的this对象，就是定义时所在的对象，而不是使用时所在的对象。
let obj = {
    testData: ["aaa","bbb"],
    func: function(){
       document.onclick = v => {
         console.log(this.testData);  // ["aaa","bbb"]
      }
      // 非箭头函数
      //document.onclick = function(v){
      //    console.log(this.testData);  // undefined
      // }
   }
}
obj.func();
  1. 说明
    箭头函数也是一个表达式，末尾应该有分号（；）

异步编程

  • javascript中异步编程的发展回调函数（callback）→Promise对象→generator函数→async/await(es7)→Observbale

Module

  • export default function(){/*todo*/} // 匿名函数
  • export defalut function func(){/*todo*/} //非匿名函数
  • 当使用export default 导出时，import导入时不需要使用{}
  • export default a = 1 // 报错，即不能给导出的默认值赋值
  • module取代import，表示整体引入模块，类似 import * as xxx from 'xxx'

Proxy

type Target = {
  weather: string;
  date: "today" | "tomorrow";
};

const target: Target = { weather: "今天是晴天", date: "today" };

const handler: ProxyHandler<Target> = {
  get(target, p) {
    // console.log('拦截get行为')
    return target[p];
  },
  set(target, p, value) {
    // console.log('拦截get行为')
    return true
  },
  has() {
    // 拦截 in 操作符
    return true;
  },
  apply(target, thisArg, args) {
    // 拦截函数调用
  }
};

const proxy = new Proxy(target, handler);

Reflect

与Proxy相对应，Proxy拦截改变target对象的行为，而Reflect则可以获取target对象的默认行为

Symbol

TODO

参考