Javascript面向对象编程（二） 构造函数的继承

Javascript面向对象编程（二） 构造函数的继承

在Javascript中，我们可以通过使用构造函数来创建对象。在一些情况下，我们需要创建一个新的对象并且继承一个已经存在的对象的属性和方法。这时候，我们可以使用构造函数的继承来实现这个功能。

构造函数的继承

Javascript中，使用call和apply方法可以执行一个函数并指定this的值。使用这个方法可以将已经存在的对象作为函数的上下文，从而实现新对象继承原对象的属性和方法。

下面是一个简单的示例，说明如何使用构造函数的继承：

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

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

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

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

var myDog = new Dog("Charlie");
myDog.sayName(); //输出结果：My name is Charlie

在上面的示例中，我们定义了两个构造函数：Animal和Dog。Animal函数接收一个参数，并将这个参数保存到一个对象属性中。Animal函数还有一个原型方法sayName()，用来输出名字。Dog函数继承了Animal函数中的属性和方法，并在构造函数中调用了Animal函数，并将this作为上下文传递，从而将新对象的name属性设置为传递的参数name。

为了让Dog函数继承Animal函数的原型方法，我们使用了Object.create()方法来创建一个继承自Animal.prototype的新对象，并将其赋值给Dog函数的原型。注意这里使用了Object.create()，而没有使用new Animal()，原因是new Animal()将调用Animal函数，并创建一个新的Animal对象，而我们只需要使用Animal的原型对象。

最后，我们需要将Dog函数的constructor属性设置为Dog本身，因为在上面的代码中，它被设置为Animal函数。

示例1

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

Vehicle.prototype.move = function() {
    console.log(this.name + " is moving.");
};

function Bicycle(name, type) {
    Vehicle.call(this, name);
    this.type = type;
}

Bicycle.prototype = Object.create(Vehicle.prototype);
Bicycle.prototype.constructor = Bicycle;

Bicycle.prototype.move = function() {
    console.log(this.name + " is moving on " + this.type + ".");
};

var myBicycle = new Bicycle("Aurora", "road bike");
myBicycle.move(); //输出结果：Aurora is moving on road bike.

在这个示例中，我们定义了两个构造函数：Vehicle和Bicycle。Vehicle有一个原型方法move()，用来输出汽车的移动状态。Bicycle继承自Vehicle，并且添加了一个type属性。

在Bicycle函数的构造函数中，我们调用了Vehicle函数，并将this作为上下文传递，从而在新对象中设置了name属性。然后，我们将Bicycle的原型对象设置为继承自Vehicle的原型对象。最后，我们重写了Bicycle的原型方法move()，调用了Vehicle的原型方法，并且在输出时添加了type属性。

示例2

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

Person.prototype.sayHello = function() {
    console.log("Hello, my name is " + this.name);
};

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

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

Student.prototype.sayHello = function() {
    console.log("Hello, my name is " + this.name + ", and my major is " + this.major);
};

var myStudent = new Student("John", "Computer Science");
myStudent.sayHello(); //输出结果：Hello, my name is John, and my major is Computer Science

在这个示例中，我们定义了两个构造函数：Person和Student。Person有一个原型方法sayHello()，用来输出个人信息。Student继承自Person，并且添加了一个major属性。

在Student函数的构造函数中，我们调用了Person函数，并将this作为上下文传递，从而在新对象中设置了name属性。然后，我们将Student的原型对象设置为继承自Person的原型对象。最后，我们重写了Student的原型方法sayHello()，调用了Person的原型方法，并且在输出时添加了major属性。

总结

在Javascript中，构造函数的继承是一种比较常用的方法，可以让我们轻松地创建一个新对象并继承一个已经存在的对象的属性和方法。通过使用call和apply方法，我们可以将已经存在的对象作为函数的上下文，从而实现新对象继承原对象的属性和方法。最后，我们还需要注意一些细节，例如将继承自原型对象的新对象的constructor属性重新设置为新对象本身。