JavaScript原型与原型链知识点有哪些

JavaScript 是一种基于原型的面向对象编程语言，理解原型与原型链是掌握 JavaScript 面向对象编程的关键。本文将详细介绍 JavaScript 原型与原型链的相关知识点。

1. 原型（Prototype）

1.1 什么是原型

在 JavaScript 中，每个对象都有一个原型（prototype），原型是一个对象，它包含了共享的属性和方法。当我们访问一个对象的属性或方法时，如果该对象本身没有这个属性或方法，JavaScript 会沿着原型链向上查找，直到找到该属性或方法为止。

1.2 原型的作用

原型的主要作用是实现属性和方法的共享。通过原型，我们可以避免在每个对象实例中重复定义相同的属性和方法，从而节省内存。

1.3 获取原型

在 JavaScript 中，可以通过以下方式获取对象的原型：

• Object.getPrototypeOf(obj)：获取对象 obj 的原型。
• obj.__proto__：非标准属性，用于获取对象 obj 的原型（不推荐使用）。

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

2. 原型链（Prototype Chain）

2.1 什么是原型链

原型链是由对象的原型组成的链式结构。当我们访问一个对象的属性或方法时，如果该对象本身没有这个属性或方法，JavaScript 会沿着原型链向上查找，直到找到该属性或方法为止。如果最终没有找到，则返回 undefined。

2.2 原型链的形成

原型链的形成是通过对象的 __proto__ 属性实现的。每个对象都有一个 __proto__ 属性，指向其构造函数的原型对象。构造函数的原型对象也有一个 __proto__ 属性，指向其构造函数的原型对象，依此类推，直到 Object.prototype，Object.prototype 的 __proto__ 为 null，原型链到此结束。

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

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

const person = new Person('Alice');
person.sayHello(); // Hello, my name is Alice

console.log(person.__proto__ === Person.prototype); // true
console.log(Person.prototype.__proto__ === Object.prototype); // true
console.log(Object.prototype.__proto__); // null

2.3 原型链的查找过程

当我们访问一个对象的属性或方法时，JavaScript 会按照以下步骤进行查找：

1. 查找对象本身是否有该属性或方法。
2. 如果没有，查找对象的原型（__proto__）是否有该属性或方法。
3. 如果还没有，继续沿着原型链向上查找，直到 Object.prototype。
4. 如果最终没有找到，返回 undefined。

const obj = {};
obj.toString(); // "[object Object]"

在上面的例子中，obj 本身没有 toString 方法，但 Object.prototype 上有 toString 方法，因此 JavaScript 会沿着原型链找到 Object.prototype 上的 toString 方法并调用。

3. 构造函数与原型

3.1 构造函数

构造函数是用来创建对象的函数。通过 new 关键字调用构造函数时，会创建一个新对象，并将该对象的原型指向构造函数的 prototype 属性。

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

const person = new Person('Alice');
console.log(person.name); // Alice

3.2 构造函数的 prototype 属性

每个函数都有一个 prototype 属性，指向一个对象。这个对象就是通过该构造函数创建的所有实例的原型。

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

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

const person = new Person('Alice');
person.sayHello(); // Hello, my name is Alice

在上面的例子中，Person.prototype 是 person 对象的原型，person 对象可以访问 Person.prototype 上的 sayHello 方法。

3.3 修改原型

我们可以通过修改构造函数的 prototype 属性来动态地添加或修改原型上的属性和方法。

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

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

const person = new Person('Alice');
person.sayHello(); // Hello, my name is Alice

Person.prototype.sayGoodbye = function() {
  console.log(`Goodbye, ${this.name}`);
};

person.sayGoodbye(); // Goodbye, Alice

在上面的例子中，我们动态地添加了 sayGoodbye 方法，person 对象可以立即访问到该方法。

4. 继承与原型链

4.1 原型链继承

在 JavaScript 中，继承是通过原型链实现的。我们可以通过将一个构造函数的原型指向另一个构造函数的实例来实现继承。

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

Animal.prototype.speak = function() {
  console.log(`${this.name} makes a noise.`);
};

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

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

Dog.prototype.bark = function() {
  console.log(`${this.name} barks.`);
};

const dog = new Dog('Rex');
dog.speak(); // Rex makes a noise.
dog.bark(); // Rex barks.

在上面的例子中，Dog 继承了 Animal 的属性和方法。通过 Object.create(Animal.prototype)，我们将 Dog.prototype 的原型指向 Animal.prototype，从而实现了继承。

4.2 原型链继承的缺点

原型链继承的主要缺点是所有实例共享同一个原型对象，如果原型对象上的属性是引用类型，那么所有实例都会共享这个引用类型的属性，这可能会导致意外的修改。

function Animal() {
  this.colors = ['red', 'blue'];
}

function Dog() {}

Dog.prototype = new Animal();

const dog1 = new Dog();
dog1.colors.push('green');

const dog2 = new Dog();
console.log(dog2.colors); // ['red', 'blue', 'green']

在上面的例子中，dog1 修改了 colors 数组，dog2 的 colors 数组也被修改了。

5. 总结

• 原型是 JavaScript 中实现属性和方法共享的机制。
• 原型链是由对象的原型组成的链式结构，用于查找对象的属性和方法。
• 构造函数通过 prototype 属性定义原型，实例通过 __proto__ 属性访问原型。
• 继承是通过原型链实现的，但需要注意原型链继承的缺点。

理解原型与原型链是掌握 JavaScript 面向对象编程的基础，希望本文能帮助你更好地理解这些概念。