一文搞懂 JavaScript 原型和原型链

在 JavaScript 中，每个函数都有一个特殊的属性叫做 prototype，它指向一个对象。这个对象就是原型。当使用 new 关键字调用一个构造函数时，新创建的实例对象会隐式地链接到构造函数的原型对象上

通过这种方式，实例对象可以继承原型对象上的属性和方法。如果一个实例对象上没有某个属性或方法，JavaScript 引擎就会沿着原型链向上查找，直到找到该属性或方法，或者到达原型链的末端（即null），如下图所示：

原型链核心概念：

proto : 每个对象都有一个内部属性 $\[Prototype$ ]，通常通过 proto 访问，指向其原型对象。
prototype: 只有函数对象才有 prototype 属性，指向一个对象，这个对象会成为通过该函数创建的实例的原型。
constructor: 原型对象都有一个 constructor 属性，指向关联的构造函数。
属性查找: 当访问对象属性时，如果对象本身没有该属性，会沿着原型链向上查找，直到找到属性或到达 null。

下面是 js 原型的一个例子：

js 复制代码

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

// Add greet method to the Person's prototype
// So all instances created with 'new Person()' share this method
Person.prototype.greet = function() {
  console.log(`Hello, my name is ${this.name}`);
};

const alice = new Person('Alice');
alice.greet(); // Output: Hello, my name is Alice

const bob = new Person('Bob');
bob.greet(); // Output: Hello, my name is Bob

console.log(Object.getPrototypeOf(alice) === Person.prototype); // true

class 关键字

在 2015 年后添加了 class 概念,新添加的 class只是一个语法糖，底层的原理还是使用的基于 prototype-based inheritance 的方式，并没有引入新的底层技术。下面是一个class的例子：

js 复制代码

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

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

class Dog extends Animal { // 'extends' sets up the prototype chain
  constructor(name, breed) {
    super(name); // Calls Animal's constructor
    this.breed = breed;
  }

  speak() {
    console.log(`${this.name} barks.`);
  }
}

const myDog = new Dog('Buddy', 'Golden Retriever');
myDog.speak(); // Output: Buddy barks.
console.log(myDog.name); // Output: Buddy

即便使用了 class 和 extends，底层逻辑还是一样的：

Dog.prototype是 Animal.prototype
myDog 是 Dog.prototype
在调用 myDog.speak() 时，如果 myDog没有 speak方法， js就会通过原型链进行查询，先是查询它本身的原型是否有这个方法，没有就继续查原型的原型，直到找到这个方法或者返回 null为止

总结

你可以将原型理解为一个模板或蓝图，它定义了由某个构造函数创建的所有实例对象共同拥有的属性和方法。这是一种实现继承的方式，可以帮助你避免在每个实例中重复创建相同的方法，从而节省内存