Javascript – ES5和ES6类的构造方法

简介

ECMAScript 2015 提供了 class 类的声明方法，本文讲解如何使用ES6的class声明方法声明类，和ES5声明类的方法对比。

Class 类

ES6 提供了更接近传统语言的写法，引入了 class 类这个慨念，作为对象的模板。

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

ES6 声明类方法

class 类声明

使用 class 关键词 定义类

class className {
    private name: string;
    private age: number;
}

构造函数定义

constructor(name,age) {
    this.name = name;
    this.age = age;
}

创建实例

let c = new className('abc',123);
c.method();

继承父类

使用 extends 关键字实现继承父类,使用 super 关键字调用父类的方法。

class subClass extends superClass{
    constructor(name,age) {
        super(name, age);
    }
}

get 和 set 方法

有类，自然就有私有变量，私有变量自然就有 get 和 set 方法，而在 javascript 中，get 和 set 方法定义，使用 get 和 set 并键字 加上成员属性即可，如下

get props(){
    console.log("当我读取 props 属性时这个函数会被调用");
    return 123;
}

set props(newVal){
    console.log("当设置 props 数据时，这个函数会被调用");
}

ES5 声明类方法

Javascript 本身作为面向过程的简单语言，实际中 ES5 并没有类的概念，但为了方便编程，我们可以创建类似于 class 方法的思想，使用原型对象来创建。

function Person(name,age) {
    this.name = name;
    this.age = age;
}

Person.prototype.call = function (){
    console.log("out")
}
let p = new Person('abc',123)