JS 原型 Prototype

简介: JS 原型 Prototype


Prototype

基于原型的语言

每个对象拥有一个原型对象,对象以其原型为模板、从原型继承方法和属性。
原型对象也可能拥有原型,并从中继承方法和属性,一层一层、以此类推。这种关系常被称为原型链 (prototype chain),它解释了为何一个对象会拥有定义在其他对象中的属性和方法。

函数的原型属性

每个函数都有一个特殊的属性叫作原型(prototype)

function doSomething(){}
console.log( doSomething.prototype );

以上便是 doSometing 这个函数的 原型 属性

修改原型

function doSomething(){}
doSomething.prototype.foo = "bar";
console.log( doSomething.prototype );

创建实例

我们可以使用 new 运算符来在现在的这个原型基础之上,创建一个 doSomething 的实例

function doSomething(){}
doSomething.prototype.foo = "bar"; // add a property onto the prototype
var doSomeInstancing = new doSomething();
doSomeInstancing.prop = "some value"; // add a property onto the object
console.log( doSomeInstancing );

此时可以看到 doSomeInstancing 的输出中第一项 constructor 是这个实例的 构造函数 ,也就是 doSomething 函数,第二项 prop 这是我们手动为这个实例添加的一个属性。而其中一个最关键的属性便是 <prototype> ,以往我们使用 a.__proto__ 来访问到这个属性,但其实这并不是一个标准定义。这个属性则是实现继承的核心,它其实就是构造函数的 prototype ,也就是 doSomething.prototype ,也是我们这个实例的 doSomeInstancing.constructor.prototype == doSomeInstancing.__proto__

当我们想要从这个实例中获取 foo 这个属性时,JS会首先在当前实例属性中去寻找,如果没有则会找到这个实例的构造函数原型属性中去找,也就是 doSomething.prototype.foo ,如果还找不到就会在这个原型的原型上去找。

比如 doSomeInstancing.toString 这个函数其实有 Object.prototype.toString == doSomeInstancing.toString ,这是因为 doSomeInstancing.toString -> doSomeInstancing.__proto__.toString -> doSomeInstancing.__proto__.__proto__.toString ,且 doSomeInstancing.__proto__.__proto__ == doSomething.prototype.__proto__ == Object.prototype

继承发生在 prototype

上面例子中 doSomeInstancing 包含从 Object 中继承了 toString 方法,但其实 Object 这个构造函数(类) 还有类似 Object.keys 这样的函数,它们没有被继承下来,这是因为它们时直接"依附"在 Object 之上,可以理解为 Java 中的静态函数, 而只有在 Object.prototype 中定义的属性才会被继承

注意: The prototype property is one of the most confusingly-named parts of JavaScript — you might think that it points to the prototype object of the current object, but it doesn’t (that’s an internal object that can be accessed by __proto__ , remember?). prototype instead is a property containing an object on which you define members that you want to be inherited.

Object.create

var person2 = Object.create(person1);
person2.__proto__ == person1

create() 实际做的是从指定原型对象创建一个新的对象。这里以 person1 为原型对象创建了 person2 对象

手动实现继承

let a = {} // 创建一个空对象
a.foo = "zz"
let b = {} // 创建另一个空对象
b.__proto__ = a // 设置 b 的 原型
console.log(b.foo == "zz")
目录
相关文章
|
9天前
|
人工智能 JavaScript Linux
【Claude Code 全攻略】终端AI编程助手从入门到进阶(2026最新版)
Claude Code是Anthropic推出的终端原生AI编程助手,支持40+语言、200k超长上下文,无需切换IDE即可实现代码生成、调试、项目导航与自动化任务。本文详解其安装配置、四大核心功能及进阶技巧,助你全面提升开发效率,搭配GitHub Copilot使用更佳。
|
3天前
|
JSON API 数据格式
OpenCode入门使用教程
本教程介绍如何通过安装OpenCode并配置Canopy Wave API来使用开源模型。首先全局安装OpenCode,然后设置API密钥并创建配置文件,最后在控制台中连接模型并开始交互。
1498 5
|
11天前
|
存储 人工智能 自然语言处理
OpenSpec技术规范+实例应用
OpenSpec 是面向 AI 智能体的轻量级规范驱动开发框架,通过“提案-审查-实施-归档”工作流,解决 AI 编程中的需求偏移与不可预测性问题。它以机器可读的规范为“单一真相源”,将模糊提示转化为可落地的工程实践,助力开发者高效构建稳定、可审计的生产级系统,实现从“凭感觉聊天”到“按规范开发”的跃迁。
1655 17
|
9天前
|
人工智能 JavaScript 前端开发
【2026最新最全】一篇文章带你学会Cursor编程工具
本文介绍了Cursor的下载安装、账号注册、汉化设置、核心模式(Agent、Plan、Debug、Ask)及高阶功能,如@引用、@Doc文档库、@Browser自动化和Rules规则配置,助力开发者高效使用AI编程工具。
1262 6
|
10天前
|
消息中间件 人工智能 Kubernetes
阿里云云原生应用平台岗位急招,加入我们,打造 AI 最强基础设施
云原生应用平台作为中国最大云计算公司的基石,现全面转向 AI,打造 AI 时代最强基础设施。寻找热爱技术、具备工程极致追求的架构师、极客与算法专家,共同重构计算、定义未来。杭州、北京、深圳、上海热招中,让我们一起在云端,重构 AI 的未来。
|
13天前
|
IDE 开发工具 C语言
【2026最新】VS2026下载安装使用保姆级教程(附安装包+图文步骤)
Visual Studio 2026是微软推出的最新Windows专属IDE,启动更快、内存占用更低,支持C++、Python等开发。推荐免费的Community版,安装简便,适合初学者与个人开发者使用。
1285 12
|
7天前
|
云安全 安全
免费+限量+领云小宝周边!「阿里云2026云上安全健康体检」火热进行中!
诚邀您进行年度自检,发现潜在风险,守护云上业务连续稳健运行
1177 2
|
13天前
|
人工智能 测试技术 开发者
AI Coding后端开发实战:解锁AI辅助编程新范式
本文系统阐述了AI时代开发者如何高效协作AI Coding工具,强调破除认知误区、构建个人上下文管理体系,并精准判断AI输出质量。通过实战流程与案例,助力开发者实现从编码到架构思维的跃迁,成为人机协同的“超级开发者”。
1006 94
|
8天前
|
人工智能 JSON 自然语言处理
【2026最新最全】一篇文章带你学会Qoder编辑器
Qoder是一款面向程序员的AI编程助手,集智能补全、对话式编程、项目级理解、任务模式与规则驱动于一体,支持模型分级选择与CLI命令行操作,可自动生成文档、优化提示词,提升开发效率。
783 8
【2026最新最全】一篇文章带你学会Qoder编辑器