JavaScript 中的 .prototype：揭秘面向对象编程的基石

本文链接：https://blog.csdn.net/weixin_63490470/article/details/141269537

JavaScript 中的 .prototype：揭秘面向对象编程的基石

JavaScript 作为一门动态类型语言，其灵活性和强大的功能使其在 Web 开发领域占据着举足轻重的地位。而 prototype 属性作为 JavaScript 中面向对象编程的核心机制，为我们提供了构建复杂、可扩展的应用程序的强大工具。

本篇文章将化身一位经验丰富的 JavaScript 开发者，带领大家深入探索 prototype 属性的奥秘，从基础概念到进阶技巧，逐一讲解，并结合大量实例，将理论知识与实践应用紧密结合，助你构建稳固的 JavaScript 知识体系，并将其应用于实际项目开发中。

第一部分：初识 `prototype` - 面向对象编程的基石

第一章：`prototype` 的定义 - 揭开神秘面纱

prototype 属性是 JavaScript 中每个函数（包括构造函数）都拥有的一个特殊属性，它指向一个对象，称为原型对象。原型对象包含了该函数创建的所有实例共享的属性和方法。

1.1 prototype 的本质 - 共享的宝库

prototype 属性并非函数本身的属性，而是函数的一个内部属性，它指向一个对象，称为原型对象。
原型对象包含了该函数创建的所有实例共享的属性和方法。
当我们访问一个实例的属性或方法时，JavaScript 会首先在实例本身查找，如果找不到，就会在原型对象中查找。

1.2 prototype 的作用 - 继承的桥梁

prototype 属性是 JavaScript 中实现继承的关键机制。
通过原型链，我们可以将一个对象的属性和方法继承给另一个对象。
原型链的本质是通过 prototype 属性将多个对象连接起来，形成一个链式结构，当访问一个对象的属性或方法时，JavaScript 会沿着原型链向上查找，直到找到该属性或方法为止。

第二章：`prototype` 的基本用法 - 简单的开始

2.1 创建一个构造函数

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

2.2 添加属性和方法到原型对象

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

2.3 创建实例并访问属性和方法

const person1 = new Person('John', 30);
console.log(person1.name); // 输出: John
person1.sayHello(); // 输出: Hello, my name is John!

代码解析:

Person.prototype.sayHello = function() { ... };: 将 sayHello 方法添加到 Person 构造函数的原型对象中。
const person1 = new Person('John', 30);: 使用 new 关键字创建 Person 构造函数的实例。
person1.name: 访问实例的 name 属性。
person1.sayHello(): 调用实例的 sayHello 方法。

第三章：`prototype` 的常见应用场景 - 实用技巧

3.1 创建自定义对象类型

使用 prototype 属性可以创建自定义对象类型，并为其添加属性和方法。

function Car(brand, model, year) {
  this.brand = brand;
  this.model = model;
  this.year = year;
}

Car.prototype.getDetails = function() {
  return `This is a ${this.year} ${this.brand} ${this.model}.`;
};

const myCar = new Car('Toyota', 'Camry', 2023);
console.log(myCar.getDetails()); // 输出: This is a 2023 Toyota Camry.

3.2 实现继承

使用 prototype 属性可以实现继承，将一个对象的属性和方法继承给另一个对象。

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

Animal.prototype.speak = function() {
  console.log('Animal sound!');
};

function Dog(name, breed) {
  Animal.call(this, name); // 调用父类构造函数
  this.breed = breed;
}

Dog.prototype = Object.create(Animal.prototype); // 设置原型链
Dog.prototype.constructor = Dog; // 修正构造函数

Dog.prototype.bark = function() {
  console.log('Woof!');
};

const myDog = new Dog('Buddy', 'Golden Retriever');
myDog.speak(); // 输出: Animal sound!
myDog.bark(); // 输出: Woof!

代码解析:

Dog.prototype = Object.create(Animal.prototype);: 将 Dog 的原型对象设置为 Animal 的原型对象的副本，从而实现继承。
Dog.prototype.constructor = Dog;: 修正 Dog 的构造函数，使其指向 Dog 本身。

3.3 扩展内置对象

使用 prototype 属性可以扩展内置对象，为其添加新的方法。

Array.prototype.myFilter = function(callback) {
  const result = [];
  for (let i = 0; i < this.length; i++) {
    if (callback(this[i], i, this)) {
      result.push(this[i]);
    }
  }
  return result;
};

const numbers = [1, 2, 3, 4, 5];
const evenNumbers = numbers.myFilter(number => number % 2 === 0);
console.log(evenNumbers); // 输出: [2, 4]

代码解析:

Array.prototype.myFilter = function(callback) { ... };: 将 myFilter 方法添加到 Array 的原型对象中。
numbers.myFilter(number => number % 2 === 0);: 使用自定义的 myFilter 方法过滤数组元素。

第二部分：`prototype` 的进阶技巧 - 灵活运用，提升效率

第四章：`prototype` 与 `Object.create()` 的配合 - 优雅的继承

Object.create() 方法可以创建一个新的对象，并指定其原型对象。使用 Object.create() 方法可以更优雅地实现继承，避免使用 prototype 属性直接赋值带来的问题。

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

Animal.prototype.speak = function() {
  console.log('Animal sound!');
};

function Dog(name, breed) {
  Animal.call(this, name);
  this.breed = breed;
}

Dog.prototype = Object.create(Animal.prototype);
Dog.prototype.constructor = Dog;

Dog.prototype.bark = function() {
  console.log('Woof!');
};

const myDog = new Dog('Buddy', 'Golden Retriever');
myDog.speak(); // 输出: Animal sound!
myDog.bark(); // 输出: Woof!

代码解析:

Dog.prototype = Object.create(Animal.prototype);: 使用 Object.create() 方法创建 Dog 的原型对象，并指定其原型对象为 Animal 的原型对象。

第五章：`prototype` 与 `Object.getPrototypeOf()` 的配合 - 探寻原型链

Object.getPrototypeOf() 方法可以获取一个对象的原型对象。使用 Object.getPrototypeOf() 方法可以方便地查看一个对象的原型链。

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

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

const person1 = new Person('John', 30);
console.log(Object.getPrototypeOf(person1)); // 输出: Person.prototype
console.log(Object.getPrototypeOf(Object.getPrototypeOf(person1))); // 输出: Object.prototype

代码解析:

Object.getPrototypeOf(person1): 获取 person1 实例的原型对象，即 Person.prototype。
Object.getPrototypeOf(Object.getPrototypeOf(person1)): 获取 Person.prototype 的原型对象，即 Object.prototype。

第六章：`prototype` 与 `Object.setPrototypeOf()` 的配合 - 修改原型链

Object.setPrototypeOf() 方法可以修改一个对象的原型对象。使用 Object.setPrototypeOf() 方法可以动态地修改对象的原型链。

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

Animal.prototype.speak = function() {
  console.log('Animal sound!');
};

function Dog(name, breed) {
  Animal.call(this, name);
  this.breed = breed;
}

const myDog = new Dog('Buddy', 'Golden Retriever');
console.log(Object.getPrototypeOf(myDog)); // 输出: Dog.prototype

Object.setPrototypeOf(myDog, Animal.prototype); // 修改原型链
console.log(Object.getPrototypeOf(myDog)); // 输出: Animal.prototype

myDog.speak(); // 输出: Animal sound!

代码解析:

Object.setPrototypeOf(myDog, Animal.prototype);: 将 myDog 实例的原型对象设置为 Animal.prototype。

第七章：`prototype` 与 `proto` 属性 - 探索内部机制

__proto__ 属性是 JavaScript 中一个非标准的属性，它指向对象的原型对象。使用 __proto__ 属性可以访问对象的原型对象，但它不是标准的 JavaScript 语法，不建议在代码中使用。

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

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

const person1 = new Person('John', 30);
console.log(person1.__proto__); // 输出: Person.prototype

代码解析:

person1.__proto__: 访问 person1 实例的 __proto__ 属性，获取其原型对象，即 Person.prototype。

第三部分：`prototype` 的最佳实践 - 规范使用，提升代码质量

第八章：避免直接修改原型对象

直接修改原型对象可能会导致意想不到的结果，因为原型对象是所有实例共享的。

建议:

使用 Object.create() 方法创建原型对象的副本，并在副本上添加新的属性和方法。
使用 Object.setPrototypeOf() 方法修改对象的原型链。

第九章：使用 `Object.getPrototypeOf()` 和 `Object.setPrototypeOf()` 方法

Object.getPrototypeOf() 和 Object.setPrototypeOf() 方法是标准的 JavaScript 语法，建议使用它们来操作原型链。

第十章：避免使用 `proto` 属性

__proto__ 属性是非标准的 JavaScript 语法，不建议在代码中使用。

第十一章：理解原型链的机制

理解原型链的机制对于理解 JavaScript 中的继承和对象模型至关重要。

第十二章：使用 `constructor` 属性

constructor 属性指向对象的构造函数。在修改原型对象时，需要确保 constructor 属性指向正确的构造函数。

第四部分：`prototype` 的进阶应用 - 扩展功能，提升效率

第十三章：`prototype` 与 ES6 类 - 现代语法，优雅实现

ES6 引入了类语法，可以更方便地创建对象和实现继承。类语法本质上是基于 prototype 属性的语法糖。

class Animal {
  constructor(name) {
    this.name = name;
  }

  speak() {
    console.log('Animal sound!');
  }
}

class Dog extends Animal {
  constructor(name, breed) {
    super(name);
    this.breed = breed;
  }

  bark() {
    console.log('Woof!');
  }
}

const myDog = new Dog('Buddy', 'Golden Retriever');
myDog.speak(); // 输出: Animal sound!
myDog.bark(); // 输出: Woof!

代码解析:

class Animal { ... }: 定义一个名为 Animal 的类。
class Dog extends Animal { ... }: 定义一个名为 Dog 的类，并继承 Animal 类。
super(name);: 调用父类的构造函数。

第十四章：`prototype` 与函数式编程 - 灵活运用，提升效率

prototype 属性可以与函数式编程思想结合，实现更灵活、更简洁的代码。

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

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

const people = [
  new Person('John', 30),
  new Person('Jane', 25),
  new Person('Peter', 35)
];

people.forEach(person => person.sayHello());