不错的一篇关于javascript-prototype继承

下面我来详细讲解JavaScript原型继承的完整攻略。

一、前置知识：构造函数和原型对象

在学习JavaScript原型继承之前，我们需要了解两个重要的概念：构造函数和原型对象。

1. 构造函数

构造函数是一种特殊的函数，主要用于创建对象。我们通过 new 关键字调用构造函数，可以创建一个新的对象。

下面是一个简单的构造函数示例：

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

上面的代码定义了一个名为 Person 的构造函数，接收两个参数 name 和 age，并通过 this 关键字将它们赋值给新创建的对象。

2. 原型对象

原型对象是 JavaScript 中的一个重要概念，它是一个对象，包含了函数可以继承的属性和方法。

我们可以使用 prototype 属性来访问原型对象，向原型对象添加属性和方法，添加到原型对象上的属性和方法可以被构造函数中创建的所有对象所共享。

下面是一个原型对象示例：

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

上面的代码向 Person 的原型对象中添加了一个名为 sayHello 的方法，该方法用于向控制台输出一个欢迎信息。

二、原型继承的实现方式

了解完前置知识后，我们可以开始学习原型继承的实现方式了。

原型继承主要有两种实现方式：通过对象字面量，或通过构造函数。

1. 通过对象字面量实现原型继承

对象字面量可以用于创建新的对象，也可以用于继承现有的对象。我们可以使用 Object.create() 方法，将要继承的对象作为参数传入该方法，创建一个新对象并继承指定对象的属性和方法。

下面是一个示例代码，使用对象字面量实现原型继承：

// 父对象
var Person = {
  speak: function() {
    console.log('Hello, I am a person.');
  }
};

// 子对象
var Teacher = Object.create(Person);
Teacher.teach = function() {
  console.log('I am a teacher.');
}

// 测试代码
var teacher = Object.create(Teacher);
teacher.speak(); // 'Hello, I am a person.'
teacher.teach(); // 'I am a teacher.'

上面的代码中，我们首先定义了一个名为 Person 的对象，该对象包含了一个 speak 方法。然后，我们通过 Object.create() 方法，创建一个新对象 Teacher，并将 Person 作为其父对象，将 teach 方法添加到 Teacher 的原型对象中。

最后，我们又通过 Object.create() 方法，创建了一个新对象 teacher，该对象继承了 Teacher 中的所有属性和方法，包括它的父对象 Person 中的 speak 方法和自己的 teach 方法。

2. 通过构造函数实现原型继承

我们也可以通过定义一个构造函数来实现原型继承。这种方法相比于对象字面量更为常见。

下面是一个示例代码，使用构造函数实现原型继承：

// 父构造函数
function Person(name, age) {
  this.name = name;
  this.age = age;
}

Person.prototype.speak = function() {
  console.log('Hello, I am a person.');
}

// 子构造函数
function Teacher(name, age) {
  Person.call(this, name, age);
}

Teacher.prototype = Object.create(Person.prototype);
Teacher.prototype.constructor = Teacher;
Teacher.prototype.teach = function() {
  console.log('I am a teacher.');
}

// 测试代码
var teacher = new Teacher('Mr. Zhang', 30);
teacher.speak(); // 'Hello, I am a person.'
teacher.teach(); // 'I am a teacher.'

上面的代码中，我们首先定义了一个名为 Person 的构造函数，该构造函数包含了两个参数 name 和 age，并且定义了一个 speak 方法。

然后，我们定义了一个名为 Teacher 的构造函数，该构造函数继承了 Person 的属性和方法。这里我们使用了 call() 方法将 Person 的属性和方法绑定到 Teacher 中。

接着，我们通过 Object.create() 方法将 Teacher 的原型对象设置为 Person 的原型对象，并将 Teacher 的构造函数设置为 Teacher 自身，从而实现了继承和方法扩展。

最后，我们创建了一个名为 teacher 的对象，并通过它调用继承的方法 speak 和添加的方法 teach。

总结

本文介绍了 JavaScript 原型继承的两种实现方式：对象字面量和构造函数。我们可以根据实际需要来选择使用哪种方法，从而通过继承和方法扩展来轻松实现代码复用和增强对象的能力。