从入门到精通：揭秘JavaScript原型和原型链背后的秘密

前端

2023-11-21 19:49:23

JavaScript原型系列1: 认识JavaScript原型

前言

JavaScript原型和原型链是JavaScript语言中的两个重要概念，它们对于理解JavaScript对象的创建和继承机制至关重要。如果你想深入理解JavaScript，那么就必须掌握原型和原型链的知识。

什么是原型？

在JavaScript中，原型是一个对象，它包含了其他对象共享的属性和方法。每个对象都有一个原型，原型又可能拥有自己的原型，如此递归下去，直到遇到null原型为止。

原型链是什么？

原型链是连接一个对象与其原型以及原型链上所有祖先原型的链条。当一个对象试图访问一个属性或方法时，JavaScript会沿着原型链向上查找，直到找到该属性或方法为止。

创建原型

在JavaScript中，可以通过两种方式创建原型：

使用字面量语法：

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

使用构造函数：

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

访问原型

可以通过两种方式访问一个对象的原型：

使用Object.getPrototypeOf()方法：

const person = new Person('John Doe', 30);
const personPrototype = Object.getPrototypeOf(person);

使用__proto__属性：

const person = new Person('John Doe', 30);
const personPrototype = person.__proto__;

原型的作用

原型在JavaScript中起着非常重要的作用，它允许对象共享属性和方法，从而避免了重复编写代码。例如，我们可以创建一个Person构造函数，然后使用它来创建多个Person对象，这些对象都具有相同的属性和方法。

原型链的作用

原型链在JavaScript中也起着非常重要的作用，它允许对象访问其原型以及原型链上所有祖先原型的属性和方法。例如，我们可以创建一个Student构造函数，该构造函数继承自Person构造函数，那么Student对象就可以访问Person对象的属性和方法，也可以访问Person对象的原型以及原型链上所有祖先原型的属性和方法。