Javascript 原型小白指南

虽然 Javascript 原型很难理解，但学习了解它很有价值。原型是 Javascript 中用来实现面向对象的编程机制，是 Javascript 的精髓所在，也是其他 OOP 语言的基础概念之一。如果您想成为一名优秀的 Javascript 开发者，就必须了解 Javascript 原型，它可以帮助您提高代码的可读性、可维护性和可重用性。

Javascript 是世界上最流行的编程语言之一，原型是 Javascript 中非常重要的话题，如果您想写好 Javascript 代码，就必须了解什么是原型，原型链如何工作，以及如何使用原型创建对象。如果你曾经看过很多关于 Javascript 原型的文章，还没弄明白或曾经弄明白了现在又糊里糊涂不太清楚，那这篇文章很适合你。我将用大白话讲讲什么是 Javascript 原型。

什么是原型？

在 Javascript 中，每个对象都有一个原型，原型是一个对象，包含了该对象的所有属性和方法。当我们访问一个对象的属性或方法时，Javascript 会首先在该对象中查找，如果找不到，则会在其原型中查找。

比如，我们有一个名为“person”的对象，它具有“name”和“age”两个属性，我们还可以使用“person”对象来创建一个新的对象“john”，如下所示：

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

const john = Object.create(person);

现在，我们可以访问“john”对象的“name”和“age”属性，如下所示：

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

当我们访问“john”对象的“name”和“age”属性时，Javascript 会首先在“john”对象中查找，找不到，然后在“person”对象中查找，找到了之后就返回给 "john" 对象。

原型链

每个对象都有一个原型，原型又有一个原型，如此循环，直到到达最顶层的原型，这个最顶层的原型就是 Object.prototype。Object.prototype 是 Javascript 中所有对象的原型，它具有许多内置的方法，比如“toString()”、“valueOf()”和“hasOwnProperty()”。

原型链是一个非常重要的概念，它允许我们访问对象的所有属性和方法，即使这些属性和方法不在对象本身中。

比如，我们有一个名为“car”的对象，它具有“make”和“model”两个属性，我们还可以使用“car”对象来创建一个新的对象“honda”，如下所示：

const car = {
  make: "Honda",
  model: "Civic"
};

const honda = Object.create(car);

现在，我们可以访问“honda”对象的“make”和“model”属性，以及 Object.prototype 的“toString()”、“valueOf()”和“hasOwnProperty()”方法，如下所示：

console.log(honda.make); // Honda
console.log(honda.model); // Civic
console.log(honda.toString()); // [object Object]
console.log(honda.valueOf()); // {}
console.log(honda.hasOwnProperty("make")); // true

当我们访问“honda”对象的“make”和“model”属性时，Javascript 会首先在“honda”对象中查找，找不到，然后在“car”对象中查找，再找不到，则在 Object.prototype 中查找，找到了之后就返回给 "honda" 对象。

使用原型创建对象

我们可以使用 Object.create() 方法来创建对象，Object.create() 方法接受两个参数：

• 第一个参数是要创建对象的原型对象
• 第二个参数是可选的，用于指定要创建对象的属性和方法

比如，我们可以使用 Object.create() 方法来创建一个名为“person”的对象，它具有“name”和“age”两个属性，如下所示：

const person = Object.create({}, {
  name: {
    value: "John"
  },
  age: {
    value: 30
  }
});

现在，我们可以访问“person”对象的“name”和“age”属性，如下所示：

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

我们还可以使用 Object.create() 方法来创建一个名为“car”的对象，它具有“make”和“model”两个属性，如下所示：

const car = Object.create({}, {
  make: {
    value: "Honda"
  },
  model: {
    value: "Civic"
  }
});

现在，我们可以访问“car”对象的“make”和“model”属性，如下所示：

console.log(car.make); // Honda
console.log(car.model); // Civic

结论

Javascript 原型是一个复杂但非常重要的概念。了解 Javascript 原型可以帮助您编写更好的 Javascript 代码。