一篇文章 讲透彻js 的原型链

当谈到 JavaScript 的核心特性之一时,原型链无疑是其中之一。原型链是 JavaScript 对象之间关系的基础,理解它有助于更好地掌握 JavaScript 的面向对象特性。让我们深入探讨一下原型链。

1. 理解原型

在 JavaScript 中,几乎所有东西都是对象。每个 JavaScript 对象都有一个原型。原型是一个对象,其他对象可以从中继承属性和方法。新对象可以通过一个称为 prototype 的特殊属性来访问原型。当你创建一个新对象时,它会从原型继承属性和方法。

2. 构建原型链

每个对象都有一个指向它的原型的内部链接。当你试图访问对象的属性或方法时,如果该对象本身没有这些属性或方法,JavaScript 会沿着这个链接向上搜索直到找到对应的属性或方法为止。这个链条就是所谓的原型链。

3. proto 与 prototype

__proto__ 是每个 JavaScript 对象都具有的属性,它指向该对象的原型。而 prototype 是函数对象特有的属性,它指向在调用构造函数时新对象的原型。

4. 实现继承

利用原型链,JavaScript 实现了对象之间的继承。通过将一个对象的原型指向另一个对象,可以使一个对象继承另一个对象的属性和方法。

5. 经典的原型链例子

ini 复制代码
javascriptCopy code
function Animal(name) {
  this.name = name;
}

Animal.prototype.makeSound = function() {
  console.log("Some sound");
};

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

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

Dog.prototype.bark = function() {
  console.log("Woof!");
};

const myDog = new Dog("Buddy", "Golden Retriever");
myDog.makeSound(); // Outputs: Some sound
myDog.bark(); // Outputs: Woof!

在这个例子中,Dog 函数继承了 Animal 的属性和方法。通过 Object.create() 方法,Dog 的原型被设置为一个新的 Animal 实例,这样 Dog 就可以访问 Animal 的方法,同时也能拥有自己独特的方法。

有个图很形象可以参考

结论

原型链是 JavaScript 中对象之间关系的基础,它允许对象继承和共享属性和方法。了解原型链有助于更好地利用 JavaScript 的面向对象特性,并编写出更加灵活、高效的代码。

相关推荐
一 乐6 小时前
婚纱摄影网站|基于ssm + vue婚纱摄影网站系统(源码+数据库+文档)
前端·javascript·数据库·vue.js·spring boot·后端
xkxnq8 小时前
第二阶段:Vue 组件化开发(第 16天)
前端·javascript·vue.js
Van_Moonlight8 小时前
RN for OpenHarmony 实战 TodoList 项目:空状态占位图
javascript·开源·harmonyos
xkxnq8 小时前
第一阶段:Vue 基础入门(第 15天)
前端·javascript·vue.js
BBBBBAAAAAi10 小时前
Claude Code安装记录
开发语言·前端·javascript
源码获取_wx:Fegn089510 小时前
基于 vue智慧养老院系统
开发语言·前端·javascript·vue.js·spring boot·后端·课程设计
Jing_Rainbow11 小时前
【 前端三剑客-37 /Lesson61(2025-12-09)】JavaScript 内存机制与执行原理详解🧠
前端·javascript·程序员
UIUV11 小时前
模块化CSS学习笔记:从作用域问题到实战解决方案
前端·javascript·react.js
Kakarotto11 小时前
使用ThreeJS绘制东方明珠塔模型
前端·javascript·vue.js
donecoding11 小时前
TypeScript `satisfies` 的核心价值:两个例子讲清楚
前端·javascript