如何在ES5中使用原型链实现继承？

翻滚的胖子
2023-08-31 09:49:08
前端技术
JavaScript

在ES5中，我们可以使用原型链来实现继承。原型链是JavaScript中实现继承的一种方式，通过在对象之间共享方法和属性，实现了对象之间的继承关系。

函数的基本用法

函数是JavaScript中的一等公民，它可以作为变量、参数和返回值。在使用函数时，我们可以使用function关键字来声明一个函数，如下所示：

function add(a, b) {
    return a + b;
}

这里我们声明了一个add函数，它接收两个参数a和b，并返回它们的和。我们可以通过调用这个函数来使用它的功能，如下所示：

1 2	`var` `result = add(2, 3);` `console.log(result);` `// 输出：5`

原型链的概念

在JavaScript中，每个对象都有一个原型对象。原型对象可以包含共享的属性和方法，这些属性和方法可以被该对象的实例继承。当我们访问一个对象的属性或方法时，如果该对象本身没有这个属性或方法，JavaScript会沿着原型链向上查找，直到找到该属性或方法或者到达原型链的末尾。

使用原型链实现继承

要使用原型链实现继承，我们需要定义一个父类和一个子类。父类包含共享的属性和方法，子类通过继承父类的原型对象来实现对共享属性和方法的继承。下面是一个使用原型链实现继承的示例代码：

// 定义父类
function Animal(name) {
    this.name = name;
}
 
// 在父类的原型对象上添加方法
Animal.prototype.sayName = function() {
    console.log('My name is ' + this.name);
};
 
// 定义子类
function Dog(name, type) {
    this.name = name;
    this.type = type;
}
 
// 继承父类的原型对象
Dog.prototype = Object.create(Animal.prototype);
 
// 在子类的原型对象上添加方法
Dog.prototype.sayType = function() {
    console.log('I am a ' + this.type);
};
 
// 创建子类的实例
var dog = new Dog('旺财', '哈士奇');
 
// 调用父类的方法
console.log(dog.sayName()); // 输出：My name is 旺财
 
// 调用子类的方法
console.log(dog.sayType()); // 输出：I am a 哈士奇