简述ES6 之前使用 prototype 实现继承 ?

在ES6引入class语法之前,JavaScript通过函数和原型链实现继承。原型链继承是基于原型(Prototype)的一种继承方式,它使得JavaScript中的对象可以继承另一个对象的属性和方法。下面是使用原型(prototype)实现继承的一个基本示例:

基础类的定义

首先定义一个基类(父类)。这里以Person类为例,它有nameage两个属性,以及一个greet方法。

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

Person.prototype.greet = function() {
  console.log("Hello, my name is " + this.name + " and I am " + this.age + " years old.");
};

子类的定义和继承

接下来定义一个子类Student,它继承自Person类,并添加了一个新的属性grade

为了实现继承,Student的原型被设置为Person的一个实例,同时修正Student原型的构造函数指向,确保其指回Student自己。然后可以在Student原型上定义额外的方法,比如study

function Student(name, age, grade) {
  Person.call(this, name, age); // 调用父类的构造函数以继承父类的属性
  this.grade = grade;
}

// 设置Student的原型为Person的实例来实现继承
Student.prototype = Object.create(Person.prototype);
// 修正constructor属性指向
Student.prototype.constructor = Student;

// 在Student原型上添加新的方法
Student.prototype.study = function() {
  console.log(this.name + " is studying in grade " + this.grade + ".");
};

创建实例并使用

现在可以创建Student的实例,并使用继承自Person的方法,以及Student自己的方法。

var student1 = new Student('John', 20, '10th');
student1.greet(); // 输出: Hello, my name is John and I am 20 years old.
student1.study(); // 输出: John is studying in grade 10th.

总结

通过这种方式,Student继承了Person的属性和greet方法,并且还定义了自己的grade属性和study方法。这个过程展示了在ES6之前,如何使用函数和原型链来实现类的继承。尽管ES6的classextends关键字提供了更现代和易于理解的语法来实现继承,但了解原型继承机制对于深入理解JavaScript中的对象和继承概念仍然很重要。

发表评论

后才能评论