es6学习（一）

es6

概览

箭头函数、模板字符串、promise、generator(iter.next去执行yield内容)、class、module

杂记

1. 作用域，用代码块+let 替代IIFE，特别是let可以处理闭包的问题
   补充见另一篇笔记

for(let i=0;i<6;i++){
    a[i] = function(){
        console.log(i);
    }
}
//es5的实现应该是介样的
for(var i=0;i<6;i++){
    (function(i){
    a[i] = function(){
        console.log(i);
    }
    })(i);
}

2，用模板变量代替字符串拼接

`${x}+$(y)`          == x+"+"+y

模板字面量可以横跨多行。

空格和换行都会保留

3，函数的默认参数应该在最右边，实参与形参从左开始匹配

4，class

//es5
function Point(x,y){
  this.x = x;
  this.y = y;
}
Point.prototype.toString = function () {
  return '(' + this.x + ', ' + this.y + ')';
}
//es6
class Point{
    constructor(x,y){
        this.x = x;
        this.y = y;
    }
    toString(){
        return '(' + this.x + ', ' + this.y + ')';
    }
}

注意点：

• class不存在变量提升，也就是说它的使用必须要在定义后

• 私有方法：

  • 用 _functionName

  • 把私有方法都放外部，class内部只存暴露出去的公有方法，比如

    class Widget {
      foo (baz) {
        bar.call(this, baz);
      }
      // ...
    }
    function bar(baz){...}

  • 用symbol处理私有方法和属性的名称

    const privateFun = Symbol('bar');
    const privateParam = Symbol('bar');
    class test1{
        //私有方法
        [bar](param){
            //私有属性
            this[privateParam] = ...
        }
        fun1(){
            this[bar]("实参");
        }
    }

5， 继承
通过extends关键字，继承了父类的所有属性和方法。等于复制了一个Point类

class Rectangle extends Shape {
    constructor (id, x, y, width, height) {
        super(id, x, y)   //父类构造函数，必须调用，用来新建父类的this实例，同时复制一份作为自己的
        this.width  = width
        this.height = height
    }
}
//es5
function Rectangle(id, x, y, width, height) {
    Shape.call(this, id, x, y)//复制一份父类shape的属性id,x,y，用自己的值进行初始化
    this.width  = width 
    this.height = height
}
Rectangle.prototype = Object.create(Shape.prototype)//深复制父类的原型，然后改变原型的指向，使得子类自己保持一份原型
Rectangle.prototype.constructor = Rectangle

6, 静态属性方法

• static 函数
  static方法是被类所调用，实例是没有办法调用的。而且可以被继承

class Foo {
  static classMethod() {
    return 'hello';
  }
}
class Bar extends Foo {
}
Bar.classMethod(); // 'hello'

• 静态属性：
  类有静态属性，但是类内部是不能有静态属性的。只能在外部

class Foo {
}
Foo.prop = 1;
Foo.prop // 1

• 实例属性
  之前是在构造函数中定义实例属性，现在可以放在外部

class MyClass {
  myProp = 42;
  constructor() {
    console.log(this.myProp); // 42
    //以前的写法：this.myProp = ...
  }
}
//或者更复杂的是
class ReactCounter extends React.Component {
  newProps = {
    count:3;
  };
  state;            //constructor里面已经定义的实例属性
  constructor(props) {
    super(props);
    this.state = {
      count: 0
    };
  }
}

es7中静态属性提案，将静态属性也像实例属性一样放进来

class MyClass {
  static myStaticProp = 42;
  constructor() {
    console.log(MyClass.myProp); // 42
  }
}

1. Module模块化

var firstName = 'mei';
var lastName = 'qingguang';
var year = 1988;
//export
export {firstName, lastName, year};
//import
import {firstName, lastName, year} from "./module1.js"
console.log(firstName);
或者 
import * as Module1 from "./module1.js"
console.log(Module1.firstName)
//整体输出的话
//test1.js
export default function(){
    ...
}
import yourModuleName from "test1.js"
yourModuleName()          //函数执行