函数与原型-技术普及大观

2023-12-09 19:40:30

在这个快速发展的时代，javascript 凭借其独特性和多功能性，已经成为了一门不可或缺的语言。作为一名程序员，掌握 JS 基础知识是尤为重要的，其中原型和继承的概念更是至关重要。本文将从原型和继承的基础概念出发，深入浅出地为您剖析其原理，并通过实际示例帮助您轻松理解和掌握它们。

原型（Prototype）

原型是 JavaScript 中非常重要的一个概念，它是所有 JavaScript 对象的始祖。每个对象都有一个原型，原型对象也是一个对象，它拥有自己的属性和方法。当我们访问一个对象的属性或方法时，如果对象本身没有这个属性或方法，那么 JavaScript 会沿着原型链向上查找，直到找到该属性或方法。

继承（Inheritance）

继承是面向对象编程中的一种重要概念，它允许一个对象从另一个对象继承属性和方法。在 JavaScript 中，继承可以通过多种方式实现，包括原型继承、构造函数继承、组合继承、寄生组合继承和拷贝继承。

原型继承

原型继承是最简单、最常用的继承方式。它通过设置对象的原型对象来实现继承。例如，我们可以通过以下代码实现原型继承：

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 = new Person();

const student = new Student('John', 'Computer Science');

student.sayHello(); // Hello, my name is John.

在上面的代码中，我们首先定义了一个 Person 函数，它接收一个参数 name，并将其存储在 this.name 属性中。Person 函数还有一个 sayHello 方法，它打印出 "Hello, my name is [name]."。

然后，我们定义了一个 Student 函数，它继承自 Person 函数。Student 函数接收两个参数：name 和 major。它将 name 传递给 Person 函数，并将 major 存储在 this.major 属性中。

最后，我们使用 new Student() 创建了一个 student 对象。student 对象继承了 Person 函数的属性和方法，因此它可以调用 sayHello() 方法。

构造函数继承

构造函数继承是另一种实现继承的方式。它通过在子类的构造函数中调用父类的构造函数来实现继承。例如，我们可以通过以下代码实现构造函数继承：

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

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

const student = new Student('John', 'Computer Science');

console.log(student.name); // John
console.log(student.major); // Computer Science

在上面的代码中，我们首先定义了一个 Person 函数，它接收一个参数 name，并将其存储在 this.name 属性中。

然后，我们定义了一个 Student 函数，它继承自 Person 函数。Student 函数接收两个参数：name 和 major。它在构造函数中调用了 Person 函数的构造函数，并将其接收到的 name 参数传递给了 Person 函数。此外，它还将 major 存储在 this.major 属性中。

最后，我们使用 new Student() 创建了一个 student 对象。student 对象继承了 Person 函数的属性和方法，因此它可以访问 name 属性和 major 属性。

组合继承

组合继承是原型继承和构造函数继承的结合。它通过在子类的构造函数中调用父类的构造函数，并将子类的原型对象设置为父类的实例对象来实现继承。例如，我们可以通过以下代码实现组合继承：

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 = new Person();

const student = new Student('John', 'Computer Science');

student.sayHello(); // Hello, my name is John.