es6 学习笔记(一)

发表于   |   分类于   |  

概览

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

杂记

  1. 作用域，用代码块+let 替代IIFE，特别是let可以处理闭包的问题
    补充见另一篇笔记
1
2
3
4
5
6
7
8
9
10
11
12
13
14
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，用模板变量代替字符串拼接

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

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

空格和换行都会保留

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

4，class

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
//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内部只存暴露出去的公有方法，比如
    • 1
      2
      3
      4
      5
      6
      7
      8
      class Widget {
        foo (baz) {
          bar.call(this, baz);
        }
        // ...
      }
      function bar(baz){...}

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

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      const privateFun = Symbol('bar');
      const privateParam = Symbol('bar');
      class test1{
          //私有方法
          [bar](param){
              //私有属性
              this[privateParam] = ...
          }
          fun1(){
              this[bar]("实参");
          }
      }

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
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方法是被类所调用，实例是没有办法调用的。而且可以被继承
1
2
3
4
5
6
7
8
9
class Foo {
  static classMethod() {
    return 'hello';
  }
}
class Bar extends Foo {
}
Bar.classMethod(); // 'hello'

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

    1
    2
    3
    4
    5
    class Foo {
    }
    Foo.prop = 1;
    Foo.prop // 1
    • 实例属性
      之前是在构造函数中定义实例属性，现在可以放在外部
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      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中静态属性提案，将静态属性也像实例属性一样放进来

1
2
3
4
5
6
7
class MyClass {
  static myStaticProp = 42;
  constructor() {
    console.log(MyClass.myProp); // 42
  }
}

  1. Module模块化
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    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()          //函数执行