原型链在JavaScript中的妙用

2023-11-30 05:16:16

原型链的概念

在JavaScript中，每个对象都有一个原型对象。原型对象是该对象的父对象，它包含了该对象的所有属性和方法。当一个对象调用一个不存在的属性或方法时，JavaScript会自动在该对象的原型对象中查找该属性或方法。如果在原型对象中找到了该属性或方法，则JavaScript会将其返回给调用者。否则，JavaScript会继续在原型对象的原型对象中查找，直到找到该属性或方法为止。

在JavaScript中使用原型链实现继承

在JavaScript中，我们可以使用原型链来实现继承。具体做法是，我们可以创建一个父对象，然后创建一个子对象，并让子对象的原型对象指向父对象。这样，子对象就可以继承父对象的所有属性和方法。

例如，以下代码演示了如何使用原型链来实现继承：

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

Person.prototype.getName = function() {
  return this.name;
};

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

Student.prototype = new Person();

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

console.log(student.getName()); // "John"

在上面的代码中，我们首先定义了一个Person构造函数，该构造函数接受一个参数name，并将其存储在对象的name属性中。然后，我们定义了一个Person.prototype.getName()方法，该方法返回对象的name属性。

接下来，我们定义了一个Student构造函数，该构造函数接受两个参数name和major。然后，我们调用Person.call(this, name)来将name参数传递给Person构造函数，并将其存储在对象的name属性中。然后，我们将major参数存储在对象的major属性中。

最后，我们将Student.prototype设置为new Person()，这使得Student的原型对象指向Person对象。这样，Student对象就可以继承Person对象的所有属性和方法。

当我们创建一个新的Student对象时，JavaScript会自动在Student的原型对象中查找getName()方法。由于Student的原型对象指向Person对象，因此JavaScript会在Person的原型对象中找到getName()方法，并将其返回给调用者。

原型链的妙用

原型链在JavaScript中有很多妙用。例如，我们可以使用原型链来实现多重继承。我们可以通过让多个父对象的原型对象指向同一个对象来实现多重继承。

例如，以下代码演示了如何使用原型链来实现多重继承：

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

Person.prototype.getName = function() {
  return this.name;
};

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

Student.prototype = new Person();

function Employee(name, job) {
  Person.call(this, name);
  this.job = job;
}

Employee.prototype = new Person();

function Manager(name, job, department) {
  Employee.call(this, name, job);
  this.department = department;
}

Manager.prototype = new Employee();

const manager = new Manager("John", "Manager", "Sales");

console.log(manager.getName()); // "John"
console.log(manager.job); // "Manager"
console.log(manager.department); // "Sales"

最后，我们将Student.prototype设置为new Person()，这使得Student的原型对象指向Person对象。这样，Student对象就可以继承Person对象的所有属性和方法。

接下来，我们定义了一个Employee构造函数，该构造函数接受两个参数name和job。然后，我们调用Person.call(this, name)来将name参数传递给Person构造函数，并将其存储在对象的name属性中。然后，我们将job参数存储在对象的job属性中。

最后，我们将Employee.prototype设置为new Person()，这使得Employee的原型对象指向Person对象。这样，Employee对象就可以继承Person对象的所有属性和方法。

接下来，我们定义了一个Manager构造函数，该构造函数接受三个参数name、job和department。然后，我们调用Employee.call(this, name, job)来将name和job参数传递给Employee构造函数，并将其存储在对象的name和job属性中。然后，我们将department参数存储在对象的department属性中。

最后，我们将Manager.prototype设置为new Employee()，这使得Manager的原型对象指向Employee对象。这样，Manager对象就可以继承Employee对象的所有属性和方法。

当我们创建一个新的Manager对象时，JavaScript会自动在Manager的原型对象中查找getName()、job和department属性。由于Manager的原型对象指向Employee对象，因此JavaScript会在Employee的原型对象中找到getName()和job属性，并将其返回给调用者。由于Manager的原型对象的原型对象指向Person对象，因此JavaScript会在Person的原型对象中找到department属性，并将其返回给调用者。