JavaScript 从ES5到ES7 类和继承

飞翔的鱼 2024-08-21 ⋅ 15 阅读

简介

JavaScript 是一门流行且广泛应用的编程语言,其不断的发展带来了许多新特性和语法改进。从 ES5 到 ES7,JavaScript 在类和继承方面经历了重要的改变。本文将介绍这些改变,并展示如何使用这些特性来优化代码。

ES5 类和继承

在 ES5 中,通过构造函数和原型链实现了类和继承的概念。以以下示例为例:

function Animal(name) {
  this.name = name;
}

Animal.prototype.sayName = function() {
  console.log('My name is ' + this.name);
};

function Dog(name, breed) {
  Animal.call(this, name);
  this.breed = breed;
}

Dog.prototype = Object.create(Animal.prototype);
Dog.prototype.constructor = Dog;

Dog.prototype.sayBreed = function() {
  console.log('I am a ' + this.breed);
};

var dog = new Dog('Max', 'Labrador');
dog.sayName(); // 输出:My name is Max
dog.sayBreed(); // 输出:I am a Labrador

以上代码定义了 AnimalDog 两个构造函数,并通过原型链实现了继承关系。然后,通过实例化 Dog 类,我们可以调用继承自 Animal 的方法以及自身新增的方法。

虽然这种方式能够满足类和继承的需求,但是代码看起来冗长而复杂。幸运的是,ES6 引入了更简洁的语法来定义类和实现继承。

ES6 类和继承

ES6 引入了 class 关键字,使得类的定义更加简洁和直观。以下是上述示例的 ES6 版本:

class Animal {
  constructor(name) {
    this.name = name;
  }

  sayName() {
    console.log('My name is ' + this.name);
  }
}

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

  sayBreed() {
    console.log('I am a ' + this.breed);
  }
}

const dog = new Dog('Max', 'Labrador');
dog.sayName(); // 输出:My name is Max
dog.sayBreed(); // 输出:I am a Labrador

通过使用 class 关键字,我们能够更直观地定义类和方法。extends 关键字用于实现继承,super 关键字用于调用父类的构造函数。

ES7 类和继承

ES7 引入了一些语法糖,进一步简化了类和继承的使用。最显著的改进是引入了装饰器(decorators):

@logged
class Animal {
  constructor(name) {
    this.name = name;
  }

  sayName() {
    console.log('My name is ' + this.name);
  }
}

function logged(target) {
  console.log('Logging for ' + target.name);
}

const animal = new Animal('Charlie');
animal.sayName(); // 输出:My name is Charlie

通过在类上应用装饰器,我们能够在类定义之前执行一些操作。在上述示例中,装饰器 logged 打印出了类的名称。

此外,ES7 还引入了实例属性初始化器的语法糖:

class Animal {
  name = '';

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

  sayName() {
    console.log('My name is ' + this.name);
  }
}

const animal = new Animal('Charlie');
animal.sayName(); // 输出:My name is Charlie

通过直接在类中声明实例属性并初始化,我们不再需要在构造函数中显式地初始化它们。

结论

ES5 提供了一种复杂但实用的方式来实现类和继承。然而,ES6 引入的 class 关键字使得类和继承的定义更加直观和简洁。ES7 则进一步增强了类的功能,引入了装饰器和实例属性初始化器。

深入理解和灵活使用 JavaScript 类和继承的特性,能够帮助我们编写更加优雅和可维护的代码。

参考链接:


全部评论: 0

    我有话说: