一文搞懂 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为止

总结

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

相关推荐
尚学教辅学习资料9 分钟前
SpringBoot3.x入门到精通系列: 2.3 Web开发基础
前端·springboot·web开发
han_28 分钟前
前端遇到页面卡顿问题,如何排查和解决?
前端·javascript·性能优化
拾光拾趣录2 小时前
H5适配9大高频题连环炸!第3问90%人翻车?
前端·面试
拾光拾趣录2 小时前
给Electron-Claude应用构建全面的数据统计体系 - 从0到1的实践总结
前端·electron
changuncle2 小时前
Angular初学者入门第一课——搭建并改造项目(精品)
javascript·ecmascript·angular.js
拾光拾趣录2 小时前
8道题穿透前端原理层
前端·面试
海天胜景3 小时前
vue3 el-table 去除小数 并使用千分号
javascript·vue.js·elementui
cc蒲公英3 小时前
uniapp x swiper/image组件mode=“aspectFit“ 图片有的闪现后黑屏
java·前端·uni-app
前端小咸鱼一条3 小时前
React的介绍和特点
前端·react.js·前端框架
谢尔登3 小时前
【React】fiber 架构
前端·react.js·架构