ES5、ES6 和 TypeScript 中类的创建和继承

2023-10-30 16:14:00

在JavaScript中，类是一种用于创建对象的蓝图。类可以包含属性和方法，可以用来一组具有共同特征的对象。ES5、ES6和TypeScript都支持类的创建和继承，但它们在语法和实现上存在一些差异。

ES5中的类创建和继承

在ES5中，类可以通过构造函数来创建。构造函数是一个特殊的函数，它用于创建新对象。构造函数的名称通常与类名相同，它可以使用new调用。例如：

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

  this.sayHello = function() {
    console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
  };
}

这个构造函数创建了一个名为Person的类，它有两个属性name和age，以及一个方法sayHello()。要创建一个Person对象，可以使用new关键字调用Person构造函数，例如：

const person1 = new Person('John', 30);
person1.sayHello(); // Hello, my name is John and I am 30 years old.

在ES5中，类的继承可以通过原型链来实现。原型链是指一个对象继承自其原型对象的对象链。每个对象都有一个原型对象，原型对象又可能有一个原型对象，如此递归下去。当一个对象调用一个不存在的方法或属性时，就会沿着原型链向上查找，直到找到该方法或属性。

在ES5中，可以通过Object.create()方法来创建原型链。例如：

const personPrototype = {
  sayHello: function() {
    console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
  }
};

const person1 = Object.create(personPrototype);
person1.name = 'John';
person1.age = 30;

person1.sayHello(); // Hello, my name is John and I am 30 years old.

ES6中的类创建和继承

ES6中引入了class关键字来创建类。class关键字的语法如下：

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

  sayHello() {
    console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
  }
}

这个类与ES5中的Person类非常相似，但它使用了class关键字来创建。要创建一个Person对象，可以使用new关键字调用Person类，例如：

const person1 = new Person('John', 30);
person1.sayHello(); // Hello, my name is John and I am 30 years old.

在ES6中，类的继承可以通过extends关键字来实现。例如：

class Student extends Person {
  constructor(name, age, major) {
    super(name, age); // 调用父类的构造函数
    this.major = major;
  }

  study() {
    console.log(`I am studying ${this.major}.`);
  }
}

这个类继承自Person类，它增加了major属性和study()方法。要创建一个Student对象，可以使用new关键字调用Student类，例如：

const student1 = new Student('John', 30, 'Computer Science');
student1.sayHello(); // Hello, my name is John and I am 30 years old.
student1.study(); // I am studying Computer Science.

TypeScript中的类创建和继承

TypeScript是一种强类型的编程语言，它支持ES6的类创建和继承。在TypeScript中，类可以通过class关键字来创建，语法与ES6类似。例如：

class Person {
  private name: string; // 私有属性
  protected age: number; // 受保护的属性

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

  sayHello(): void {
    console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
  }

  static fnc(): void {
    console.log('This is a static method.');
  }
}

这个类与ES6中的Person类非常相似，但它使用了TypeScript的类型注解和访问修饰符。要创建一个Person对象，可以使用new关键字调用Person类，例如：

const person1 = new Person('John', 30);
person1.sayHello(); // Hello, my name is John and I am 30 years old.

在TypeScript中，类的继承可以通过extends关键字来实现。例如：

class Student extends Person {
  private major: string;

  constructor(name: string, age: number, major: string) {
    super(name, age); // 调用父类的构造函数
    this.major = major;
  }

  study(): void {
    console.log(`I am studying ${this.major}.`);
  }
}

这个类继承自Person类，它增加了major属性和study()方法。要创建一个Student对象，可以使用new关键字调用Student类，例如：

const student1 = new Student('John', 30, 'Computer Science');
student1.sayHello(); // Hello, my name is John and I am 30 years old.
student1.study(); // I am studying Computer Science.

比较

ES5、ES6和TypeScript在类创建和继承上的主要区别如下：