请使用ES5实现类的继承

在ES5中,我们通常使用原型链和构造函数的方式来实现类的继承。以下是一个简单的示例:

// 父类
function Animal(name) {
    this.name = name;
    this.colors = ['white', 'black'];
}

// 父类原型上的方法
Animal.prototype.speak = function() {
    console.log(this.name + ' makes a noise.');
};

// 子类
function Dog(name, breed) {
    // 调用父类的构造函数,并将参数传递给它
    Animal.call(this, name);
    
    // 新增子类属性
    this.breed = breed;
}

// 设置子类的原型为父类的一个实例
Dog.prototype = Object.create(Animal.prototype);

// 修正子类的构造函数指向
Dog.prototype.constructor = Dog;

// 子类原型上的新方法
Dog.prototype.bark = function() {
    console.log(this.name + ' barks.');
};

// 测试
var d = new Dog('Mitzie', 'Yorkshire');
d.colors.push('brown');
d.speak(); // Mitzie makes a noise.
d.bark();  // Mitzie barks.

var anotherDog = new Dog('Tom', 'Husky');
anotherDog.speak(); // Tom makes a noise.
console.log(anotherDog.colors); // ['white', 'black'],不受上一个实例影响

这个例子中,我们首先定义了一个Animal构造函数作为父类,然后在其原型上定义了一个speak方法。接着,我们定义了一个Dog构造函数作为子类,并在其内部通过Animal.call(this, name)来调用父类的构造函数,实现属性的继承。然后,我们通过Dog.prototype = Object.create(Animal.prototype)来设置子类的原型为父类的一个实例,从而实现方法的继承。最后,我们通过Dog.prototype.constructor = Dog来修正子类的构造函数指向。

posted @ 2024-12-21 09:14  王铁柱6  阅读(13)  评论(0)    收藏  举报