原型和原型链：解锁 JavaScript 继承的奥秘

前端

2023-11-22 12:40:12

JavaScript 学习笔记（二十二）—— 原型及原型链

在 JavaScript 中，原型是一个强大的概念，它赋予了 JavaScript 继承和面向对象编程的能力。理解原型及其相关机制对于编写可维护和可扩展的代码至关重要。

原型

每个 JavaScript 函数都具有一个名为 prototype 的属性，它指向一个对象。这个对象被称为该函数的原型。当使用 new 运算符创建函数的实例时，该实例将继承原型对象中的属性和方法。

原型链

JavaScript 使用原型链来实现继承。当一个对象访问一个不存在于自身中的属性或方法时，JavaScript 会沿着原型链向上查找，直到找到该属性或方法。

原型链从对象开始，一直延伸到 Object.prototype 对象。Object.prototype 对象是所有 JavaScript 对象的根原型。

构造函数

构造函数是专门用于创建对象的函数。它们通常以大写字母开头，例如 Person 或 Car。当使用 new 运算符调用构造函数时，将创建一个新对象，该对象继承构造函数的原型。

示例：

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

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

const person = new Person("John");
person.greet(); // 输出："Hello, my name is John!"

理解 `this`

this 关键字在 JavaScript 中非常重要。它指向当前执行代码的对象。在构造函数中，this 引用新创建的对象。在方法中，this 引用调用该方法的对象。

call、apply 和 bind 方法

call、apply 和 bind 方法允许你指定函数调用的上下文（this）。这在需要以特定上下文调用函数时非常有用。

call(thisArg, arg1, arg2, ...) ：将 this 设置为 thisArg 并按顺序提供参数。
apply(thisArg, [args]) ：将 this 设置为 thisArg 并提供一个参数数组。
bind(thisArg, arg1, arg2, ...) ：返回一个新函数，该函数将 this 设置为 thisArg 并预先绑定指定的参数。