ES6语法:class类,从了解到使用

  • 2020 年 12 月 28 日
  • 筆記

前情提要

   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也可以执行。

 

三、class继承:

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

class A{}

class B extends A{

 constructor(){

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

   }

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

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