返回

ES5 类与继承:从头理解,告别知识盲区

前端

ES5 中的类与继承

在 ES5 中,类和继承是构建复杂对象的基石。类提供了一种蓝图,用于创建具有相似属性和行为的对象,而继承允许新类从现有类继承属性和方法。

在 ES5 中,类通过构造函数来定义。构造函数是一个特殊的函数,它用于创建新对象。构造函数的名称通常与类名相同,并且首字母大写。

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

上面的代码定义了一个名为 Person 的类。Person 类有两个属性:nameage

原型

每个构造函数都有一个原型对象。原型对象是所有实例共享的属性和方法的集合。原型对象通过 prototype 属性访问。

Person.prototype.getName = function() {
  return this.name;
};

上面的代码在 Person 原型上添加了一个名为 getName 的方法。getName 方法返回实例的 name 属性值。

实例

当我们使用构造函数创建新对象时,就会创建一个实例。实例是类的具体表现形式。实例具有与类相同的属性和方法,但它们的值可能不同。

const person1 = new Person('John', 30);
const person2 = new Person('Mary', 25);

上面的代码创建了两个 Person 实例:person1person2person1 实例具有 name 属性值为 "John" 和 age 属性值为 30。person2 实例具有 name 属性值为 "Mary" 和 age 属性值为 25。

继承

继承允许新类从现有类继承属性和方法。新类称为子类,现有类称为父类。子类可以访问父类的所有属性和方法,但它也可以添加自己的属性和方法。

function Student(name, age, grade) {
  Person.call(this, name, age);
  this.grade = grade;
}

Student.prototype = Object.create(Person.prototype);
Student.prototype.constructor = Student;

上面的代码定义了一个名为 Student 的子类。Student 类继承了 Person 类的属性和方法。Student 类还添加了一个新的属性 grade

总结

在 ES5 中,类和继承是构建复杂对象的基石。类提供了一种蓝图,用于创建具有相似属性和行为的对象,而继承允许新类从现有类继承属性和方法。