JavaScript中原型（prototype）的使用详解

最新推荐文章于 2025-11-29 15:14:01 发布

YabClass

最新推荐文章于 2025-11-29 15:14:01 发布

阅读量105

点赞数

CC 4.0 BY-SA版权

文章标签：原型模式 javascript 开发语言 js

本文链接：https://blog.youkuaiyun.com/YabClass/article/details/133620407

js 专栏收录该内容

93 篇文章 ¥59.90 ¥99.00

订阅专栏

本文深入探讨JavaScript中的原型概念，阐述其在对象共享属性和方法中的作用。通过实例展示如何创建对象并利用原型实现属性和方法的继承，强调了原型在节省内存和提高代码性能方面的优势。同时，介绍了原型实现的继承机制，帮助理解对象间的层级关系和代码的高效组织。

原型（prototype）是JavaScript中一个重要的概念，它允许我们在对象之间共享属性和方法。本文将详细介绍JavaScript中原型的使用方法，并提供相应的源代码示例。

在JavaScript中，每个对象都有一个原型。原型是一个对象，包含共享的属性和方法。当我们创建一个新对象时，它会自动关联到一个原型，并可以继承原型中的属性和方法。

一般来说，JavaScript对象有两种类型的属性：实例属性和原型属性。实例属性是指直接在对象上定义的属性，而原型属性则是定义在对象的原型上的属性。当我们访问一个对象的属性时，首先会查找实例属性，如果找不到，就会继续查找原型属性。

下面是一个简单的示例，演示如何使用原型创建对象：

// 创建一个构造函数
function Person(name, age) {
   
   
  this

了解本专栏

订阅专栏解锁全文

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

YabClass

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

订阅专栏

JavaScript中原型和原型链详解.doc

07-18

通过prototype，可以实现对象的原型继承，即通过克隆而非真正的继承关系，使得子对象能使用父对象的方法和属性。 JavaScript中的变量和函数根据其作用域可以分为私有变量和函数、静态变量和函数以及实例变量和函数...

JavaScript中原型和原型链详解

10-24

在探讨JavaScript中原型和原型链的详细知识前，我们首先要了解JavaScript对象的几个核心概念，包括私有变量和函数、静态变量和函数以及实例变量和函数。这些都是理解原型和原型链的基础。私有变量和函数属于一个...

参与评论您还未登录，请先登录后发表或查看评论

JavaScript 原型（Prototype）详解

记录来时的路

06-12

798

摘要：JavaScript原型机制是实现继承的核心，通过prototype属性共享方法和属性。每个构造函数都有prototype对象，实例通过__proto__访问构造函数的原型。原型链实现继承：当访问对象属性时，若自身没有则沿原型链查找。关键方法包括Object.create()、getPrototypeOf()和instanceof操作符。原型特性包括方法共享、动态更新和多态支持。ES6类语法是原型继承的语法糖。掌握原型机制对理解JavaScript面向对象编程至关重要。（149字）

【JavaScript】原型对象 (prototype) 详解

lph159的博客

09-15

1426

在 JavaScript 中，每个对象都有一个内置属性，称为（在一些实现中被访问为__proto__），它指向另一个对象，这个对象就是该对象的原型（prototype）。当访问对象的属性或方法时，如果该对象本身没有定义该属性或方法，JavaScript 引擎就会沿着原型链去寻找，直到找到为止。原型链是一种机制，它将对象串联起来，形成了一条查找路径。JavaScript 的原型对象prototype是其继承机制的核心。

JavaScript 中原型链详解

weixin_41309331的博客

09-19

370

JavaScript 中原型链是一个非常重要的知识。先来看一段代码： function Person(name, age){ this.name = name this.age = age } Person.prototype.sayName = function() { console.log(this.name) } var person1 = new Person('刘德华'...

JavaScript中原型和原型链详解（举例说明）

七公子77的技术博客

02-11

722

原型每个对象都有一个原型（构造函数通过prototype属性为实例提供共享方法和属性。原型链访问属性时，JavaScript 沿原型链向上查找。原型链的终点是（即null继承实现通过或修改__proto__建立原型链。构造函数中调用父类构造函数（如）实现属性继承。

对Javascript中原型和原型链的探索和详解

2401_84094979的博客

04-22

358

由于文档内容过多，为了避免影响到大家的阅读体验，在此只以截图展示部分内容，详细完整版的JavaScript面试题文档，或更多前端资料可以点此处免费获取。[外链图片转存中…(img-fGElRqAJ-1713780026138)][外链图片转存中…(img-MDibJXdh-1713780026138)][外链图片转存中…(img-QmJDytwP-1713780026138)]由于文档内容过多，为了避免影响到大家的阅读体验，在此只以截图展示部分内容，详细完整版的JavaScript面试题文档，或。

javascript中原型连的详解

yzt02012的博客

09-09

409

JS中的phototype是JS中比较难理解的一个部分本文基于下面几个知识点: 1 原型法设计模式在.Net中可以使用clone()来实现原型法原型法的主要思想是，现在有1个类A,我想要创建一个类B,这个类是以A为原型的,并且能进行扩展。我们称B的原型为A。 2 javascript的方法可以分为三类： a 类方法 b

JavaScript 原型和原型链详解

qq_46032105的博客

08-31

1067

JavaScript 中的原型和原型链是实现继承的核心机制。每个对象都有[[Prototype]]属性指向原型对象，通过构造函数创建的对象原型指向其prototype属性。原型链是由对象原型层层链接形成的链式结构，当访问属性时，引擎会沿原型链向上查找。Object.prototype是原型链顶端，其原型为null。这种机制支持属性查找和方法继承，提高代码复用性，如构造函数的实例可共享原型上定义的方法和属性。

JavaScript 原型与原型链详解

小蜗牛的珍贵百宝箱

01-05

898

每个 JavaScript 对象都有一个与之相关的“原型”，这是一个对象，它包含了当前对象可以访问的属性和方法。原型是对象的模板或蓝图，通过原型链机制，实现了对象间的继承。原型是对象的一个属性，指向它的构造函数的原型对象。原型链是 JavaScript 对象通过原型相互连接的链条，用于继承属性和方法。JavaScript 的继承机制是基于原型链的，子对象可以继承父对象的属性和方法。通过__proto__和prototype，我们可以实现对象之间的继承和共享方法。

JavaScript中的原型prototype属性使用详解

10-24

本文将详细介绍JavaScript中原型（prototype）属性的使用方法。原型（prototype）属性是JavaScript中非常核心的一个概念。每个对象都拥有一个原型对象，它允许对象继承原型对象的属性和方法。原型继承是实现...

二十三种设计模式(四)--原型模式

最新发布

万波的技术博客

11-29

573

原型模式实现深拷贝 原型模式通过复制现有对象创建新对象，避免复杂构造过程。

前端在移动端中的页面切换

2509_93939582的博客

11-28

451

记得加硬件加速，用transform和opacity属性，别动不动改布局属性（比如width或height），那样容易引发重排重绘，卡成幻灯片。不过，SPA也不是万能药，它初次加载可能慢点，得靠代码分割和懒加载来优化——比如把不常用的模块拆开，等用户需要时再加载，这样既省资源又提速。还有，别忘了图片和视频的懒加载：页面切换时，先加载核心内容，图片等可视区域再加载，这样首屏能秒开。另外，内存管理也得注意，SPA容易内存泄漏，切换页面时记得清理事件监听器和定时器，不然用久了手机会变卡。

Electron 与 OpenHarmony 的实战入门：手把手打造一个安全的简易记事本应用

已掌握java全栈，简单的java项目逻辑。目前正在学习鸿蒙开发，有兴趣的小伙伴可以一起学习！！！

11-27

915

这个“简易记事本”虽只有几十行代码，却完整体现了现代桌面应用的安全架构思想。它不仅是 Electron 的最佳入门实践，更是通往 OpenHarmony 全场景开发的桥梁。

Rust在Web中的前端框架

2509_93947499的博客

11-26

342

Yew用了虚拟DOM来优化渲染，组件状态管理也简单，举个例子，你写个计数器组件，代码结构清晰，还能用Rust的强类型系统避免运行时错误。Seed不用虚拟DOM，直接操作DOM，性能可能更好，但代码写起来得小心点，别把浏览器搞崩了。想想看，用户点个按钮，背后可能触发一堆异步操作，要是用JavaScript，一不小心就内存泄漏或者变量污染，调试起来头大。另外，Rust的性能接近C++，编译成WASM后，在浏览器里执行效率高，能处理复杂计算或者图形渲染，比如游戏或者数据可视化应用，加载速度嗖嗖的。

vue3 md文件预览和下载

zzzz121380的博客

11-26

381

本文介绍了两种在Vue3中预览Markdown文件的方法：使用md-editor-v3插件和@kangc/v-md-editor@next插件，并提供了MD内容下载为MD和PDF文件的实现方案。md-editor-v3方法简单易用，@kangc/v-md-editor支持更多主题选项。MD文件下载可通过Blob对象或downloadjs实现，PDF转换则利用html2pdf.js库将预览内容转为PDF。文章还指出markdown-it插件在表格样式上的不足，不推荐使用。两种方法都提供了完整的代码示例，包括依

js考古之seajs.use、layui.use是啥以及来源？

weixin_52236586的博客

11-29

405

Seajs是先行者，在浏览器原生不支持模块化的黑暗年代，发明了 seajs.use 来实现按需加载。Layui是实用主义者，它借用了这种模块化思想，用 layui.use 把 UI 组件管理得井井有条，成为了 jQuery 时代的绝唱。是终结者，它作为官方标准，吸收了前辈们的经验，配合现代打包工具，提供了最强悍的性能和开发体验。当你下次再看到 seajs.use 或 layui.use 时，请对它们保持敬意。因为正是这些“老古董”，为今天现代前端的摩天大楼，铺下了第一块基石。

前端路由管理

2509_93941777的博客

11-28

370

这种机制在单页应用（SPA）中特别常见，比如Vue.js或React项目里，用户点击链接时，URL会变，但页面不会整体刷新。这样一来，应用可以更流畅，减少等待时间。记得有一次，我在一个电商项目里用Vue Router做商品详情页的路由，通过动态路由参数传递商品ID，配合axios异步加载数据，页面切换又快又顺。通过动态import()语法，可以把路由组件拆分成独立的chunk，用户访问时才加载，大大提升首屏速度。还有404页面的处理，最好设置一个通配符路由，捕获所有未匹配的路径，避免用户看到空白页。

JavaScript中原型链的结构：

06-12

### JavaScript 原型链结构详解 JavaScript 中的原型链是理解对象继承和属性查找机制的核心概念。以下将详细解释原型链的结构及其工作原理。 #### 1. 原型与 `__proto__` 每个 JavaScript 对象（除了 `null`）都有一个特殊的属性 `__proto__`，它指向该对象的原型对象[^2]。这个原型对象是用来共享属性和方法的。例如： ```javascript function Person() {} var person = new Person(); console.log(person.__proto__ === Person.prototype); // true ``` 上述代码中，`person` 是通过构造函数 `Person` 创建的实例对象，其 `__proto__` 属性指向 `Person.prototype`，即构造函数的原型对象[^2]。 #### 2. 原型链的工作原理当访问一个对象的属性时，如果该对象本身没有该属性，JavaScript 引擎会沿着原型链向上查找，直到找到该属性或到达原型链的顶端 `Object.prototype`[^3]。如果仍未找到，则返回 `undefined`。以下是一个示例： ```javascript function Person() {} Person.prototype.major = "计算机科学"; Object.prototype.school = "帝国理工学院"; var person = new Person(); console.log(person.major); // 计算机科学 console.log(person.school); // 帝国理工学院 console.log(person.hasOwnProperty('major')); // false console.log("major" in person); // true ``` 在上述代码中，`person` 对象本身没有 `major` 和 `school` 属性，但它们分别存在于 `Person.prototype` 和 `Object.prototype` 上，因此可以通过原型链访问到这些属性。 #### 3. 原型链的结构原型链的结构可以总结为以下几点[^4]： 1. 每个对象都有一个 `__proto__` 属性，指向其构造函数的原型对象。 2. 构造函数的原型对象也有一个 `__proto__` 属性，通常指向 `Object.prototype`。 3. 原型链的顶端是 `Object.prototype`，它的 `__proto__` 属性为 `null`，表示原型链的终点。以下是一个简单的原型链示意图： ```plaintext person.__proto__ -> Person.prototype.__proto__ -> Object.prototype.__proto__ -> null ``` #### 4. 原型链的应用原型链的主要用途是实现继承和共享属性及方法。通过将属性或方法定义在构造函数的原型对象上，所有通过该构造函数创建的实例都可以共享这些属性和方法[^5]。以下是一个示例： ```javascript function Dog(name, age) { this.name = name; this.age = age; } Dog.prototype.eat = function (food) { console.log(food); }; Dog.prototype.headNumber = '1'; var dog1 = new Dog('doubao', 3); var dog2 = new Dog('wawa', 4); dog1.eat('apple'); // apple dog2.eat('rice'); // rice console.log(dog1.eat === dog2.eat); // true console.log(dog1.headNumber); // 1 console.log(dog2.headNumber); // 1 ``` 在上述代码中，`eat` 方法和 `headNumber` 属性定义在 `Dog.prototype` 上，因此所有 `Dog` 的实例都可以共享这些属性和方法[^5]。 #### 5. 注意事项 - 在修改原型对象时要小心，避免覆盖原有的属性或方法，以免影响其他依赖这些属性或方法的对象。 - 尽量避免在原型链上定义过多层级，以提高属性查找效率。