ES6新特性4：class类

Posted 2021-08-03 孔子-说

传统的javascript(ES6之前)中只有对象，没有类的概念。它是基于原型的面向对象语言。原型对象特点就是将自身的属性共享给新对象。传统JS通过构造函数定义并生成新对象，跟传统的面向对象语言差异很大，容易让人感到困惑。

ES6 提供了更接近传统语言的写法，引入了 Class（类）这个概念，作为对象的模板。通过class关键字可以定义类，ES6 提供了更接近传统语言的写法，它可以看作一个语法糖，让对象原型的写法更加清晰、更像面向对象编程的语法，class 的本质仍是 function。

1、ES5对象传统写法

// ES5 对象写法
//函数名和实例化构造名相同且大写（非强制，但这么写有助于区分构造函数和普通函数）
function Person(name,age) {
    this.name = name;
    this.age=age;
}
Person.prototype.say = function(){
    return "我的名字叫" + this.name+"今年"+this.age+"岁了";
}
var obj=new Person("laotie",28);//通过构造函数创建对象，必须使用new 运算符
console.log(obj.say());//我的名字叫laotie今年28岁了

ES5构造函数生成实例的执行过程

1).当使用了构造函数，并且new 构造函数(),后台会隐式执行new Object()创建对象;
2).将构造函数的作用域给新对象，（即new Object()创建出的对象），而函数体内的this就代表new Object()出来的对象。
3).执行构造函数的代码。
4).返回新对象（后台直接返回）;

2、ES6的class和对象

// ES6 对象写法
class Person{//定义了一个名字为Person的类
    constructor(name,age){//constructor是一个构造方法，用来接收参数
        this.name = name;//this代表的是实例对象
        this.age=age;
    }
    say(){//这是一个类的方法，注意千万不要加上function
        return "我的名字叫" + this.name+"今年"+this.age+"岁了";
    }
}
var obj=new Person("laotie",28);
console.log(obj.say());//我的名字叫laotie今年28岁了

// 以上类的定义等同于下面写法
Person.prototype = {
  constructor(name,age) {},
  say() {},
};

注意事项：

1).在类中声明方法的时候，千万不要给该方法加上function关键字。
2).方法之间不要用逗号分隔，否则会报错。
3).类不可重复声明。
4).ES5存在变量提升,可以先使用，然后再定义。ES6类定义不会被提升，必须在访问前对类进行定义，否则就会报错。

3、ES6类的定义与声明

类表达式可以为匿名或命名。

// 使用表达式定义了一个命名类
let PersonClass = class Person {
    constructor(a) {
        this.a = a;
    }
}
// 需要注意的是，这个类的名字是Person，但是Person只在 Class 的内部可用，
// 指代当前类。在 Class 外部，这个类只能用PersonClass引用。
let inst = new PersonClass();
console.log(PersonClass.name); // Person
console.log(Person.name);  // ReferenceError: Person is not defined

// 上面代码表示，Person只在 Class 内部有定义，
// 如果类的内部没用到的话，可以省略Person，定义了一个匿名类
const Person = class {
    constructor(a) {
        this.a = a;
    }
}

// 类声明
class Person {
    constructor(a) {
        this.a = a;
    }
}
// 注意要点：不可重复声明。
class Person{}
class Person{}
// Uncaught SyntaxError: Identifier 'Example' has already been declared

4、类的属性

4.1、prototype属性

类实质上就是一个函数，类自身指向的就是构造函数的prototype属性，prototype在 ES6 的“类”上面继续存在。事实上，类的所有方法都定义在类的prototype属性上面。

// ES6中的类其实就是构造函数的另外一种写法！
console.log(typeof Person);//function
console.log(Person===Person.prototype.constructor);//true

// 以下代码说明构造函数的prototype属性，在ES6的类中依然存在着。
console.log(Person.prototype);//输出的结果是一个对象

实际上类的所有方法都定义在类的prototype属性上。代码证明下：

// 通过prototype属性覆盖类方法
Person.prototype.say=function(){//定义与类中相同名字的方法。成功实现了覆盖！
    return "我是来证明的，你叫" + this.name+"今年"+this.age+"岁了";
}
var obj=new Person("laotie",28);
console.log(obj.say());//我是来证明的，你叫laotie今年28岁了

// 通过prototype属性对类添加方法
Person.prototype.addFn=function(){
    return "我是通过prototype新增加的方法,名字叫addFn";
}
var obj=new Person("laotie",28);
console.log(obj.addFn());//我是通过prototype新增加的方法,名字叫addFn

// 还可以通过Object.assign方法来为对象动态增加方法
Object.assign(Person.prototype,{
    getName:function(){
        return this.name;
    },
    getAge:function(){
        return this.age;
    }
})
var obj=new Person("laotie",28);
console.log(obj.getName());//laotie
console.log(obj.getAge());//88

4.2、静态属性

静态属性是指class 本身的属性，即直接定义在类内部的属性（ Class.propname ），不需要实例化。 ES6 中规定，Class 内部只有静态方法，没有静态属性。

// 静态方法
class Person{
    constructor(){
    }
    static say(){
    }
}

// 以上的静态方法相当于
class Person{}
Person.say = function() {}

静态属性特点：
1).储存在类中的公共属性，实例之间共享一份
2).不用实例化对象，直接在类上可访问。例如Person.say()

因为在class中只有this上的属性，以及class外的变量可被访问。所以静态属性就是class外的一个变量，并且通过静态方法进行访问

// class外的一个变量，并且通过静态方法进行访问
var age= 0
class Person{
  constructor(name) {
    this.name = name
  }
  getName() {
    return this.name 
  }
  getAge(value) {
    return age
  }
}

4.3 公共属性

// 公共属性
class Person{}
Example.prototype.age = 2;

4.4 实例属性

实例属性是定义在实例对象（ this ）上的属性。

class Person{
    age = 2;
    constructor () {
        console.log(this.age);
    }
}

4.5 name属性

返回紧跟在 class 后的类名(存在时)。本质上，ES6 的类只是 ES5 的构造函数的一层包装，所以函数的许多特性都被Class继承，包括name属性。

let Person=class Per {
    constructor(a) {
        this.a = a;
    }
}
console.log(Person.name); // Per
 
let Person=class {
    constructor(a) {
        this.a = a;
    }
}
console.log(Person.name); // Person

5、类的方法

5.1、constructor方法

constructor方法是类的默认方法，通过new命令生成对象实例时，自动调用该方法，默认返回实例对象this。一个类必须有constructor方法，如果没有显式定义，一个空的constructor方法会被默认添加。

class Person{
}

// 等同于
class Person{
    constructor(){
    }
}

上面代码中，定义了一个空的类Person，JavaScript 引擎会自动为它添加一个空的constructor()方法。

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

class Desk{
    constructor(){
        this.xixi="我是一只小小小小鸟！哦";
    }
}
class Box{
    constructor(){
       return new Desk();// 这里没有用this哦，直接返回一个全新的对象
    }
}
var obj=new Box();
console.log(obj.xixi);//我是一只小小小小鸟！哦

constructor中定义的属性可以称为实例属性（即定义在this对象上），constructor外声明的属性都是定义在原型上的，可以称为原型属性（即定义在class上)。hasOwnProperty()函数用于判断属性是否是实例属性。其结果是一个布尔值， true说明是实例属性，false说明不是实例属性。in操作符会在通过对象能够访问给定属性时返回true,无论该属性存在于实例中还是原型中。

class Box{
    constructor(num1,num2){
        this.num1 = num1;
        this.num2=num2;
    }
    sum(){
        return num1+num2;
    }
}
var box=new Box(12,88);
console.log(box.hasOwnProperty("num1"));//true
console.log(box.hasOwnProperty("num2"));//true
console.log(box.hasOwnProperty("sum"));//false
console.log("num1" in box);//true
console.log("num2" in box);//true
console.log("sum" in box);//true
console.log("say" in box);//false

5.2、静态方法

类相当于实例的原型，所有在类中定义的方法，都会被实例继承。如果在一个方法前，加上static关键字，就表示该方法不会被实例继承，而是直接通过类来调用，这就称为“静态方法”。
1).如果在实例上调用静态方法，会抛出一个错误，表示不存在该方法。
2).如果静态方法包含this关键字，这个this指的是类，而不是实例。
3).静态方法可以与非静态方法重名。
4).父类的静态方法，可以被子类继承。
5).静态方法也可以从super对象上调用。

class Example {
    static sum(a, b) {
        return a + b;
    }
    static sum2(a, b) {
        // 这里的this指的是Example类，而不是Example的实例，等同于调用Example.sum。
        return this.sum(a, b);
    }
    sum(a, b) {
        console.log(a + b);
    }
}
console.log(Example.sum(1, 2)); // 3
console.log(Example.sum2(1, 2)); // 3

// 子类
class Child extends Example {
}
console.log(Child.sum(1, 2));  // 3

// 子类2
class Child2 extends Example {
    static sum(a, b) {
        return super.sum(a, b) + 2;
    }
}
console.log(Child2.sum(1, 2));  // 5

5.3、原型方法

class Example {
    sum(a, b) {
        console.log(a + b);
    }
}
let exam = new Example();
exam.sum(1, 2); // 3

5.4、实例方法

class Example {
    constructor() {
        this.sum = (a, b) => {
            console.log(a + b);
        }
    }
}

6、类的实例化

class 的实例化必须通过 new 关键字，如果忘记加上new，像函数那样调用Class，将会报错。与 ES5 一样，实例的属性除非显式定义在其本身（即定义在this对象上），否则都是定义在原型上（即定义在class上）。

class Person {
    constructor(name, age) {
        this.name = name;
        this.age = age;
    }
    say() {
        return "我的名字叫" + this.name + "今年" + this.age + "岁了";
    }
}
var person = new Person("laotie", 28);
console.log(person.hasOwnProperty('name')); // true
console.log(person.hasOwnProperty('age')); // true
console.log(person.hasOwnProperty('say')); // false
console.log(person.__proto__.hasOwnProperty('say')); // true

// 以下是错误写法
var obj = Person("laotie",28);

上面代码中，name和age都是实例对象Person自身的属性（因为定义在this对象上），所以hasOwnProperty()方法返回true，而say()是原型对象的属性（因为定义在Person类上），所以hasOwnProperty()方法返回false。这些都与 ES5 的行为保持一致。

与 ES5 一样，类的所有实例共享一个原型对象。

var p1 = new Person("laotie1", 28);
var p2 = new Person("laotie2", 38);

p1.__proto__ === p2.__proto__   //true

上面代码中，p1和p2都是Person的实例，它们的原型都是Person.prototype，所以__proto__属性是相等的。这也意味着，可以通过实例的__proto__属性为“类”添加方法。

__proto__ 并不是语言本身的特性，这是各大厂商具体实现时添加的私有属性，虽然目前很多现代浏览器的 JS 引擎中都提供了这个私有属性，但依旧不建议在生产中使用该属性，避免对环境产生依赖。生产环境中，我们可以使用 Object.getPrototypeOf 方法来获取实例对象的原型，然后再来为原型添加方法/属性。

var p1 = new Person("laotie1", 28);
var p2 = new Person("laotie2", 38);

p1.__proto__.printName = function () { return 'laotie' };

p1.printName() // "laotie"
p2.printName() // "laotie"

var p3 = new Point("laotie3", 48);
p3.printName() // "laotie"

上面代码在p1的原型上添加了一个printName()方法，由于p1的原型就是p2的原型，因此p2也可以调用这个方法。而且，此后新建的实例p3也可以调用这个方法。这意味着，使用实例的__proto__属性改写原型，必须相当谨慎，不推荐使用，因为这会改变“类”的原始定义，影响到所有实例。

采用 Class 表达式，可以写出立即执行的 Class。

let person = new class {
  constructor(name) {
    this.name = name;
  }

  sayName() {
    console.log(this.name);
  }
}('张三');

person.sayName(); // "张三"

上一篇《ES6新特性3：变量的解构赋值》