在 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 方法。我们可以看到输出结果为:
Hello, my name is Tom
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 方法。
运行代码,输出结果为:
Hello, my name is Jack woof woof!
我们可以发现,在子类的构造函数中,我们通过调用 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 方法,运行代码后输出结果为:
Dog says woof woof, my name is Jack
子类调用父类方法
在实现类继承时,如果想在子类中调用父类的方法,我们可以通过在子类中使用 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 方法,并在子类中输出了一句话。
运行代码,输出结果为:
Hello, my name is Jack I am a dog
总结
在 ES6 中,类的继承通过 extends 关键字实现,从语法上更加符合了开发者的思维。通过 Class 我们可以更加方便地实现 JavaScript 中的继承,并且在使用子类调用父类方法时也更加清晰明了。
以上就是 ES6 中如何实现继承的基本介绍,希望对开发者们有所帮助。
来源:JavaScript中文网 ,转载请注明来源 本文地址:https://www.javascriptcn.com/post/65abc320add4f0e0ff56d570