ES6语法：class类，从了解到使用

前期提要：

　　 JavaScript 语言中，在使用类之前，生成实例对象的传统方法是通过使用构造函数。

一、构造函数：

　　定义：通过 new 函数名来实例化对象的函数叫构造函数。

　　主要功能：为初始化对象，特点是和new 一起使用。new就是在创建对象，从无到有，构造函数就是在为初始化的对象添加属性和方法。

　　 注意：任何的函数都可以作为构造函数存在，构造函数定义时首字母大写（规范）。

　　 对new的理解：new 申请内存, 创建对象,当调用new时，后台会隐式执行new Object()创建对象。所以，通过new创建的字符串、数字是引用类型，而是非值类型。

　　 1、常用的构造函数：

- var arr = []；为 var arr = new Array()的语法糖
- var obj = {}；为 var obj = new Object()的语法糖
- var date = new date()
- 当然还有很多，这里就不一一列举了。

　　2、执行一个构造函数：

function A(name,age){ 　　this.name = name; 　　this.age = age; }
A.prototype.info = function(){
　　return "姓名"+ "" + this.name + "年龄" + this.age
}
let a = new A("张三",22)//实例化a
//打印 a结果
A{
　　name:"张三",
　　age:22
}
//打印 a.info() 结果为 "姓名张三年龄22"

二、class 类

　　 由来：因为上面构造函数的写法跟传统的面向对象语言差异很大，给很多程序员造成很多困惑，所以ES6 提供了更接近传统语言的写法，引入了 Class（类）这个概念，作为对象的模板。

　　通过class关键字，可以定义类。

　　 1、class类基本语法的使用

class A{
　　constructor(){
　　　　//成员属性
　　　　this.name = name
　　　　this.age = age
　　}
　　//静态方法  如果在一个方法前，加上static关键字，就表示该方法不会被实例继承，而是直接通过类来调用，这就称为“静态方法”。A.nihao()
　　static nihao(){
　　　　console.log("你好")
　　}
　　//成员方法
　　info(){
　　　　return "姓名"+ "" + this.name + "年龄" + this.age 
　　}
}

　　　　与上面的构造函数相比之言，新的class写法让对象原型的写法更加清晰、更像面向对象编程的语法。

　　　注意：定义info()方法的时候，前面不需要加上function这个关键字，直接把函数定义放进去了就可以了，方法与方法之间不需要逗号分隔，加了会报错。

　　　 添加静态属性：

　　 静态属性指的是 Class 本身的属性，即Class.propName，而不是定义在实例对象（this）上的属性。

　　　 老式写法：

　　　 class A{}

　　　 A.props=1 //A.props= 1 props就是A的静态属性

　　　 新式写法：

　　　 class A{

　　　　　static props = 1

　　　 }

　　　 新写法是显式声明（declarative），而不是赋值处理，语义更好。

　　　 私有方法和私有属性：

　　　　　私有方法两种写法：　　　　

　　　　　　function bar(name){

　　　　　　　return　this.name = name

　　　　　　}

　　　　　　class A{

　　　　　　　　foo(name){

　　　　　　　　　　bar.call(this,name)

　　　　　　　　}

　　　　　这样写的原因是类内部的所有方法都是对外可见的。foo是公开方法，内部调用了bar.call(this, baz)。这使得bar()实际上成为了当前类的私有方法。

　　　　　还有一种方法是利用Symbol值的唯一性，将私有方法的名字命名为一个Symbol值。

　　　　　const bar = Symbol('bar')

　　　　 const name = Symbol('name')

　　　　　class A{

　　　　　　//公有方法

　　　　　　foo(){

　　　　　　　　this[bra](name)

　　　　　　}

　　　　　　//私有方法

　　　　　　[bar](name){

　　　　　　 return this[name] = name

　　　　　　}

　　　　私有属性

　　　　第一种方法是在属性名之前，使用#表示。

　　　　class A{

　　　　　　#count = 0

　　　　}

　　　 注意：#count就是私有属性，只能在类的内部使用（this.#count）。如果在类的外部使用，就会报错。

　　　 这种写法不仅可以写私有属性，还可以用来写私有方法。

　　　　私有属性也可以设置 getter 和 setter 方法。

class Foo {

  #a;

  #b;
  #xVal = 0;

  constructor(a, b) {

    this.#a = a;

    this.#b = b;

  }

  #sum() {

    return this.#a + this.#b;

  }

  printSum() {

    console.log(this.#sum());

  }

  get #x() { return #xValue; }

  set #x(value) {

    this.#xValue = value;

}
私有属性不限于从this引用，只要是在类的内部，实例也可以引用私有属性。
私有属性和私有方法前面，也可以加上static关键字，表示这是一个静态的私有属性或私有方法。

　　2、深入介绍class类和class继承

　　　<1>

　　　 ES6 的类，完全可以看作构造函数的另一种写法。

class A{} typeof A //function A === A.prototype.constructor // ture 可以看出，类的数据类型就是函数，类本身就指向构造函数。

　　　　使用的时候，也是直接对类使用new命令，跟构造函数的用法完全一致。

　　　　<2>

　　　　class A{

　　　　　　constructor(){}

　　　　　　info(){}

　　　　　　toString(){}

　　　　　　toVal(){}

　　　　}

　　　　等同于

　　　　A.prototype={

　　　　　　info(){},

　　　　　　toString(){},

　　　　　　toVal(){},

　　　　};

　　　　构造函数的prototype属性，在类里面也存在，类的所有方法都定义在类的prototype属性上面.

　　　　因此，在类的实例上面调用方法，其实就是调用原型上的方法。

　　　　<3>

　　　　Object.assign() 方法可以很方便地一次向类添加多个方法。如下：

　　　 Object.assign(A.prototype,{

　　　　　　toString(){},

　　　　　　toVal(){},

　　　　 })

　　　　<4>

　　　　类的内部所有定义的方法，都是不可枚举的，如下：

class A{

  constructor(x, y) {

    // ...

  }

  toString() {

    // ...

  }

}

Object.keys(A.prototype)

// []
<5>

　　　　类内部可以忽略不写constructor，因为JavaScript 引擎会自动为它添加一个空的constructor()方法。如下：

　　　　class A{} === class A{constructor(){}} //true

　　　　<6>

　　　　constructor()方法默认返回实例对象（即this），完全可以指定返回另外一个对象。

　　　　<7>

　　　　类必须使用new调用，否则会报错。这是它跟普通构造函数的一个主要区别，后者不用new也可以执行。

　　　　继承：

　　　　　　<1>class 通过extends关键字实现继承，这样的继承方式非常清晰和方便

　　　　　　　　class A{}

　　　　　　　　class B extends A{

　　　　　　　　　　constructor(){

　　　　　　　　　　　　super() //关键字，super作为函数调用时，代表父类的构造函数

　　　　　　　　　　}

　　　　　　　　} //B类继承了A类的所有属性和方法

　　　　　　<2>Object.getPrototypeof(B)=== A //true 方法可以用来从子类上获取父类 ,因此，可以使用这个方法判断，一个类是否继承了另一个类。