ES5和ES6中对继承的实现比较

2023-12-16 19:19:52

在JavaScript中，继承是允许一个对象访问和使用另一个对象的属性和方法的过程。在ES5中，继承通常通过原型链来实现，而在ES6中，引入了新的class，提供了另一种实现继承的方式。

原型链

原型链是一种实现继承的机制，它允许一个对象访问和使用另一个对象的属性和方法。在原型链中，每个对象都有一个__proto__属性，指向它的原型对象。一个对象的原型对象可以是另一个对象，也可以是内置的Object对象。

ES5中使用原型链实现继承

在ES5中，我们可以通过Object.create()方法来创建一个新的对象，并指定它的原型对象。例如：

const person = {
  name: 'John',
  age: 30
};

const student = Object.create(person);
student.school = 'Stanford University';

console.log(student.name); // John
console.log(student.age); // 30
console.log(student.school); // Stanford University

在这个例子中，student对象继承了person对象的属性和方法。我们可以通过student.__proto__属性访问person对象。

ES6中使用class实现继承

在ES6中，我们可以使用class关键字来定义一个类，并通过extends关键字来实现继承。例如：

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

  getName() {
    return this.name;
  }
}

class Student extends Person {
  constructor(name, age, school) {
    super(name, age);
    this.school = school;
  }

  getSchool() {
    return this.school;
  }
}

const student = new Student('John', 30, 'Stanford University');

console.log(student.getName()); // John
console.log(student.getAge()); // 30
console.log(student.getSchool()); // Stanford University

在这个例子中，Student类继承了Person类的属性和方法。我们可以通过student.__proto__属性访问Person类。

ES5和ES6中继承的区别

特性	ES5	ES6
语法	使用原型链	使用`class`关键字
继承方式	通过`Object.create()`方法	通过`extends`关键字
语义	隐式	显式
继承链	可以是多级的	可以是多级的
方法重写	可以	可以
私有属性和方法	不支持	支持
静态属性和方法	不支持	支持