深入研究原型：JavaScript 的骨干

原型是 JavaScript 中的核心概念，构成了其面向对象编程 (OOP) 功能的基础。其他语言使用类作为继承的基础，而 JavaScript 则依赖于原型。在本文中，我们将深入探索原型并揭示它们如何在 JavaScript 中支持继承、对象行为等。

---

什么是原型？

在 JavaScript 中，每个对象都有一个名为 [[Prototype]] 的内部属性，它指向另一个对象。这是对象的原型，它充当未直接在对象上找到的属性或方法的后备机制。

原型链

原型链是一系列链接的原型。如果在对象上找不到属性或方法，JavaScript 会查找链，直到达到 null。

const parent = { greet: () => console.log("Hello from parent!") };
const child = Object.create(parent);

child.greet();  // Output: "Hello from parent!"
console.log(child.hasOwnProperty('greet'));  // Output: false

这里，child 没有greet 方法，因此JavaScript 会向parent 查找原型链并在那里找到它。

---

__proto__ 和原型的混淆

JavaScript 提供了两个与原型相关的不同术语，这些术语可能会令人困惑：

1. __proto__：

   • 这是一个可用于所有指向对象原型的对象的访问器属性。
   • 这是一种访问对象的 [[Prototype]] 的方法。

2. 原型：

   • 这是仅在函数（特别是构造函数）上可用的属性。
   • 它用于定义该函数创建的对象的原型。

示例：

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

Person.prototype.sayHello = function () {
  console.log(`Hello, my name is ${this.name}`);
};

const alice = new Person("Alice");

console.log(alice.__proto__ === Person.prototype);  // true
alice.sayHello();  // Output: "Hello, my name is Alice"

---

原型继承的实际应用

JavaScript 的继承是基于原型的，这意味着对象直接从其他对象而不是类继承。

创建继承

const animal = {
  eat() {
    console.log("Eating...");
  }
};

const dog = Object.create(animal);
dog.bark = function () {
  console.log("Barking...");
};

dog.eat();  // Output: "Eating..."
dog.bark(); // Output: "Barking..."

狗对象继承了动物对象的 eat 方法。

---

使用 Object.create 实现干净的继承

Object.create 方法创建一个具有指定原型的新对象。这是一种更清晰、更直观的设置继承的方式。

示例：

const person = {
  introduce() {
    console.log(`Hi, I'm ${this.name}`);
  }
};

const student = Object.create(person);
student.name = "John";
student.introduce();  // Output: "Hi, I'm John"

---

扩展内置原型

虽然可以扩展数组或对象等内置原型，但通常不鼓励这样做，因为它可能会导致冲突。

示例：

Array.prototype.last = function () {
  return this[this.length - 1];
};

console.log([1, 2, 3].last());  // Output: 3

为什么要避免它？

• 兼容性问题：其他库可能依赖于默认原型。
• 维护：您的更改可能会破坏现有代码。

---

原型与类

在 ES6 中，JavaScript 引入了类语法，提供了更熟悉的 OOP 体验。然而，在幕后，类仍然使用原型。

示例：

const parent = { greet: () => console.log("Hello from parent!") };
const child = Object.create(parent);

child.greet();  // Output: "Hello from parent!"
console.log(child.hasOwnProperty('greet'));  // Output: false

即使是类，继承也是基于原型的。

---

性能角度

基于原型的继承更加节省内存，因为方法是在实例之间共享而不是重复。

示例：

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

Person.prototype.sayHello = function () {
  console.log(`Hello, my name is ${this.name}`);
};

const alice = new Person("Alice");

console.log(alice.__proto__ === Person.prototype);  // true
alice.sayHello();  // Output: "Hello, my name is Alice"

在这里，每辆车的驱动器并不重复；相反，两个实例共享相同的方法。

---

要点

1. 原型启用继承：对象通过原型从其他对象继承。
2. 原型链：JavaScript 通过遍历原型链来解析属性和方法。
3. Object.create：一种设置继承的简洁方法。
4. 避免扩展内置原型：它可能会导致意外的行为和冲突。
5. 类使用原型：ES6 类提供语法糖，但仍然依赖于底层的原型。

理解原型对于掌握 JavaScript 至关重要。虽然 ES6 类使 JavaScript 中的面向对象编程变得更加平易近人，但原型系统仍然是该语言的核心。通过深入研究原型，您可以解锁编写高效、可扩展和可维护代码的能力。

以上是深入研究原型：JavaScript 的骨干的详细内容。更多信息请关注PHP中文网其他相关文章！