以往JS版本中的类和继承的语法

在以往的JS版本中,并没有关键字来说明类,只能通过js中的原型链中的prototype关键字来实现类的实现。

例如:

// 构造方法
function Animal(name) {
    this.name = name;
}
// 方法列表
Animal.prototype.showName = function() {
    console.log(this.name);
}
// ES5中的静态方法
Animal.showAge = function() {
    console.log("hello");
}

var a = new Animal('Tom');
a.showName();
var b = new Animal('Jerry');
b.showName();
Animal.showAge();

用function关键字为类定义一个构造函数,函数的名称也即为类的名称,然后利用类的prototype定义列表方法,这类方法只能通过实例来调用,也可以直接给类设置方法,这些方法是静态方法,只能由类名调用。再使用new关键字来调用构造方法创建实例,然后调用相关的方法。

ES6中的类和继承语法

在ES6中加入了class等关键字来实现类和类的继承,这其实还是调用的之前版本的创建类的语法,可能将这些语法看作是一个语法糖,使编程者更加方便的创建类和使用类。

例如:

class Animal1{
    // 静态方法
    static showInfo(){
        console.log("hi");
    }

    constructor(name){
        this.name = name;
    }
    showName() {
        console.log(this.name);
    }
}

let an = new Animal("小黑");
an.showName();
// 不能用实例调用静态方法
// an.showInfo();
Animal1.showInfo();

可以看出这里的constructor就是一个构造方法,替代了原先使用function关键字来定义构造方法的形式,这样做更加直观。当然也可以在类中设置静态方法或者静态方法。

ES6同样提供了一个关键字extends来实现类之间的继承关系,例如:

class Animal{
    // 静态方法
    static showInfo(){
        console.log("hi");
    }

    constructor(name){
        this.name = name;
    }
    showName() {
        console.log(this.name);
    }
}

class Dog extends Animal{
    constructor(name, color) {
        super(name);
        this.color = color;
    }

    showColor() {
        console.log(this.color);
    }

}

let d = new Dog('ddd','白色');
d.showName();
d.showColor();

后续还会对ES6中的class语法展开详解,包括ES5的怎样实现类的继承,ES6的this指向问题,怎么通过get函数和set函数为实例设置属性和获取属性,class中的静态方法和静态属性,以及私有属性和私有方法的实现。

最后编辑:2021年02月09日 ©著作权归作者所有

评论已关闭