跳出原型链与继承的认知误区，轻松入门前端开发

2024-01-29 20:20:04

原型链与继承是JavaScript中实现对象间关系和代码复用的两种重要机制。原型链是指对象之间的一种父子关系，它允许子对象访问和继承父对象的属性和方法。继承则是基于原型链的一种机制，它允许子类继承父类的属性和方法，并在此基础上进行扩展和修改。

一、原型链

原型链是JavaScript中对象之间的一种父子关系，它允许子对象访问和继承父对象的属性和方法。每个对象都有一个原型对象，原型对象又有一个原型对象，如此依次向上，直到遇到null为止。这种层级结构称为原型链。

1. 原型对象

原型对象是每个对象的内置属性，它指向该对象的父对象。可以通过对象的__proto__属性访问原型对象。例如，以下代码输出Object：

const obj = {};
console.log(obj.__proto__);

2. 属性查找

当访问对象的属性时，JavaScript会首先在对象本身查找。如果找不到，它会沿着原型链向上查找，直到找到该属性或遇到null。例如，以下代码输出3：

const obj = {
  name: 'John',
  age: 30
};

const name = obj.name;
const age = obj.age;

console.log(name); // John
console.log(age); // 30

3. 方法调用

当调用对象的方法时，JavaScript会首先在对象本身查找。如果找不到，它会沿着原型链向上查找，直到找到该方法或遇到null。例如，以下代码输出Hello John!：

const obj = {
  name: 'John',
  greet: function() {
    console.log(`Hello ${this.name}!`);
  }
};

obj.greet(); // Hello John!

二、继承

继承是基于原型链的一种机制，它允许子类继承父类的属性和方法，并在此基础上进行扩展和修改。在JavaScript中，可以通过两种方式实现继承：原型继承和构造函数继承。

1. 原型继承

原型继承是通过设置子对象的原型对象为父对象来实现继承。例如，以下代码实现了一个Person类和一个Student类，Student类继承了Person类的属性和方法：

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

Person.prototype.greet = function() {
  console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
};

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

Student.prototype = Object.create(Person.prototype);
Student.prototype.constructor = Student;

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

student.greet(); // Hello, my name is John and I am 20 years old.

2. 构造函数继承

构造函数继承是通过在子类的构造函数中调用父类的构造函数来实现继承。例如，以下代码实现了一个Person类和一个Student类，Student类继承了Person类的属性和方法：

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

Person.prototype.greet = function() {
  console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
};

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

Student.prototype = new Person();
Student.prototype.constructor = Student;

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

student.greet(); // Hello, my name is John and I am 20 years old.