ES6 class

ES6引入了 Class(类)这个概念,作为对象的模板。通过class关键字,可以定义类。基本上,ES6的class可以看作只是一个语法糖,它的绝大部分功能,ES5都可以做到,新的class写法只是让对象原型的写法更加清晰、更像面向对象编程的语法而已

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

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

const point = new Point(2, 3)

point.toString() // (2, 3)

# 不存在变量提升

new Foo() // ReferenceError
class Foo {}

# this的指向

类的方法内部如果含有this,它默认指向类的实例

# Class的继承

Class之间可以通过extends关键字实现继承

class ColorPoint extends Point {
  constructor(x, y, color) {
    super(x, y); // 调用父类的constructor(x, y)
    this.color = color;
  }

  toString() {
    return this.color + ' ' + super.toString(); // 调用父类的toString()
  }
}

# Class的取值函数(getter)和存值函数(setter)

class CustomHTMLElement {
  constructor(element) {
    this.element = element
  }

  get html() {
    return this.element.innerHTML
  }

  set html(value) {
    this.element.innerHTML = value
  }
}

var descriptor = Object.getOwnPropertyDescriptor(CustomHTMLElement.prototype, "html")

"get" in descriptor  // true
"set" in descriptor  // true

# Class的Generator方法

如果某个方法之前加上星号(*),就表示该方法是一个Generator函数。

class Foo {
  constructor(...args) {
    this.args = args
  }
  * [Symbol.iterator]() {
    for (let arg of this.args) {
      yield arg
    }
  }
}

for (let x of new Foo('hello', 'world')) {
  console.log(x)
}
// hello
// world

# Class的静态方法

类相当于实例的原型,所有在类中定义的方法,都会被实例继承。如果在一个方法前,加上static关键字,就表示该方法不会被实例继承,而是直接通过类来调用,这就称为“静态方法”

class Foo {
  static classMethod() {
    return 'hello'
  }
}

Foo.classMethod() // 'hello'

var foo = new Foo()
foo.classMethod() // TypeError: foo.classMethod is not a function
ES6 Set

ES6 Set

Set 类似于数组,但是成员的值都是唯一的,没有重复的值

  • Set 是一个构造函数,用来生成 Set 数据结构
  • Set 函数可以接受一个数组(或者具有 iterable 接口的其他数据结构)作为参数
ES6 symbol

ES6 symbol

ES6引入了一种新的原始数据类型Symbol,表示独一无二的值。它是JavaScript语言的第七种数据类型,前六种是:Undefined、Null、布尔值(Boolean)、字符串(String)、数值(Number)、对象(Object)