ES6 中如何实现继承

在 JavaScript 中,继承可以使用原型链来实现。但是 ES5 中继承的实现方式略显繁琐,为了便于开发者实现继承,ES6 中增加了 Class(类)的概念,使得继承变得更加简单明了。

Class的使用

ES6 的 Class 与其他语言中的类概念有些不同,它更像是一个语法糖,实际上在 JavaScript 中实现原型继承时还是使用的原型链方式。

下面是一个使用 Class 定义一个简单类的示例:

class Animal {
    constructor(name) {
        this.name = name;
    }
    sayHello() {
        console.log(`Hello, my name is ${this.name}`);
    }
}

let animal = new Animal('Tom');
animal.sayHello();

上面的代码定义了一个名为 Animal 的类,它有一个构造函数和一个 sayHello 方法。代码中通过 new 关键字创建了类的实例 animal,并调用了实例的 sayHello 方法。我们可以看到输出结果为:

import 和 extends 关键字是 ES6 中实现继承的核心,下面我们来看一下如何使用这两个关键字来实现 ES6 中的类继承。

子类继承父类

我们可以使用 extends 关键字来实现子类继承父类。

下面是一个简单的示例:

class Animal {
    constructor(name) {
        this.name = name;
    }
    sayHello() {
        console.log(`Hello, my name is ${this.name}`);
    }
}

class Dog extends Animal {
    constructor(name) {
        super(name);
    }
    bark() {
        console.log('woof woof!');
    }
}

let dog = new Dog('Jack');
dog.sayHello();
dog.bark();

上面代码中,我们定义了一个 Animal 类作为父类,一个 Dog 类作为子类,并使用 extends 关键字实现了 Dog 类继承 Animal 类。

在子类中使用 constructor 方法调用父类的 constructor 方法时,需要使用 super 关键字,这时候我们需要传递一个参数 name。在子类中我们还定义了一个 bark 方法。

运行代码,输出结果为:

我们可以发现,在子类的构造函数中,我们通过调用 super 方法来调用父类的构造函数,并且子类实例也能够调用父类的方法。

如果在子类中想要修改父类的方法,我们可以通过覆盖父类的方法来实现。

下面是一个重写父类方法的示例:

class Animal {
    constructor(name) {
        this.name = name;
    }
    sayHello() {
        console.log(`Hello, my name is ${this.name}`);
    }
}

class Dog extends Animal {
    constructor(name) {
        super(name);
    }
    sayHello() {
        console.log(`Dog says woof woof, my name is ${this.name}`);
    }
}

let dog = new Dog('Jack');
dog.sayHello();

上面代码中,我们重写了父类 Animal 的 sayHello 方法,运行代码后输出结果为:

子类调用父类方法

在实现类继承时,如果想在子类中调用父类的方法,我们可以通过在子类中使用 super 关键字来实现。

下面是一个调用父类方法的示例:

class Animal {
    constructor(name) {
        this.name = name;
    }
    sayHello() {
        console.log(`Hello, my name is ${this.name}`);
    }
}

class Dog extends Animal {
    constructor(name) {
        super(name);
    }
    sayHello() {
        super.sayHello();
        console.log('I am a dog');
    }
}

let dog = new Dog('Jack');
dog.sayHello();

上面代码中,我们在子类 Dog 的 sayHello 方法中通过 super.sayHello() 调用了父类 Animal 的 sayHello 方法,并在子类中输出了一句话。

运行代码,输出结果为:

总结

在 ES6 中,类的继承通过 extends 关键字实现,从语法上更加符合了开发者的思维。通过 Class 我们可以更加方便地实现 JavaScript 中的继承,并且在使用子类调用父类方法时也更加清晰明了。

以上就是 ES6 中如何实现继承的基本介绍,希望对开发者们有所帮助。

来源:JavaScript中文网 ,转载请注明来源 本文地址:https://www.javascriptcn.com/post/65abc320add4f0e0ff56d570