一文搞懂 JavaScript 原型和原型链

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

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

原型链核心概念:

  1. proto : 每个对象都有一个内部属性 [[Prototype]],通常通过 proto 访问,指向其原型对象。
  2. prototype: 只有函数对象才有 prototype 属性,指向一个对象,这个对象会成为通过该函数创建的实例的原型。
  3. constructor: 原型对象都有一个 constructor 属性,指向关联的构造函数。
  4. 属性查找: 当访问对象属性时,如果对象本身没有该属性,会沿着原型链向上查找,直到找到属性或到达 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

即便使用了 classextends,底层逻辑还是一样的:

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

总结

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

相关推荐
赛博切图仔10 分钟前
面试手写 Promise:链式 + 静态方法全实现
前端·javascript·面试
掘金安东尼16 分钟前
互联网不再由 URL 为核心入口
前端·人工智能·github
Moment18 分钟前
面试官:用户访问到一个不存在的路由,如何重定向到404 Not Found的页面 ❓❓❓
前端·javascript·面试
前端小巷子21 分钟前
深入 Vue3 computed
前端·vue.js·面试
未来的旋律~32 分钟前
Web程序设计
前端
全宝32 分钟前
实现一个有意思的眼球跟随卡片
前端·javascript·css
全宝39 分钟前
用css做一枚拟物风格的按钮
前端·css·svg
IT_陈寒1 小时前
3年Java开发经验总结:提升50%编码效率的7个核心技巧与实战案例
前端·人工智能·后端
yqcoder1 小时前
vue2 和 vue3 生命周期的区别
前端·javascript·vue.js
excel1 小时前
前端人必备的 JavaScript API 全面指南(含 postMessage、File、Stream、Web 组件等)
前端