ES6 Class基本语法

为什么80%的码农都做不了架构师？>>>   

 本人起初是Java开发出身，对于Java的类、继承等比较熟悉，在接触js的时候，对这门语言的原型、原型链始终不能很好的理解，ES6中类的出现，让我更好的对js的类实现和类继承有了更深的体会。（因为长得像啊）

• Class基本语法

构造函数：

JavaScript的传统方法是通过构造函数定义来生成对象的。

function Person(name,age){
  this.name = name;
  this.age = age;
}
Person.prototype.toString(){
  return this.name + ":" + this.age
}

这种写法让我写惯了Java的人略微不适应，再看下ES6 Class的写法。

Class Person{
  constructor(name,age){
    this.name = name
    this.age = age
  }

  toString(){
    return this.name + ":" +this.age
  }
}

这个写法就比较适应了，ES6的class可以看做是一种语法糖，相对传统的写法，只是换了一种形式而已，但更贴近与面向对象编程。

constructor是类的构造函数。

typeof Person  //function
Person === Person.prototype.constructor //true

以上表明，类的数据类型就是函数，而类的本身就是指向自己的构造函数。

实例对象：

let person = Person('PanC',15)  //error
let person = new Person('PanC',15)  //success

生成一个对象的实例需要使用new命令。

无变量提升：

const person = new Person()  //先使用
Class Person{}  //后定义

上述写法是错误的，Class是不存在变量提升的，这与ES5是有差别的。

继承：

Class Man extends Person {
  constructor(name,age,gender){
    super(name,age)  //必须先调用父类的构造函数！
    this.gender = gender
  }

  toString(){
    return super.toString() + ":" + this.gender
  }
}

类的继承使用extends命令，需要注意的是，必须先使用super()调用父类的构造函数，否则会报错。

静态方法和静态属性：

Class Person{
  static gender = 'male' //静态属性，这种写法ES6不支持，但Bable转码器已支持
  constructor(name,age){
    this.name = name
    this.age = age
  }

  static toString(){  //静态方法
    return 'abc'
  }
}

Person.hight = '185cm' //静态属性，ES6只支持这种写法

Person.toString() // abc
Person.gender // male
Person.hight // 185cm

ES6明确指出类是只有静态方法，没有静态属性。

 

转载于:https://my.oschina.net/pandon/blog/917324