Loading [MathJax]/jax/output/CommonHTML/config.js
前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >彻底理解js的原型

彻底理解js的原型

作者头像
Rosen9420
发布于 2025-01-04 08:06:33
发布于 2025-01-04 08:06:33
1040
举报
概述
什么是原型?原型(prototype)是函数创建的时候默认自带的。只要创建函数,他就默认存在。要理解原型,还要知道,我们所有对象最终都是都是继承自Object的。通过构造函数创建的对象也有一个原型(__proto__),即构造函数的原型(这里指Person.prototype)指针。简单的说就是person1只有__proto__,没有prototype。通过new 创建的对象和构造函数是没有关系

什么是原型?

原型(prototype)是函数创建的时候默认自带的。只要创建函数,他就默认存在。

要理解原型,还要知道,我们所有对象最终都是都是继承自Object的。

通过构造函数创建的对象也有一个原型(__proto__),即构造函数的原型(这里指Person.prototype)指针。简单的说就是person1只有__proto__,没有prototype。

通过new 创建的对象和构造函数是没有关系的,跟构造函数的原型有关系,即person1.__proto__ === Person.prototype

搞清楚对象、构造函数他们原型的是什么,其他就更好理解了。

我们在理解new创建对象的过程发生了什么,可以加深理解他们的关系:

一共5步:

(1) 在内存中创建一个新对象。

(2) 这个新对象内部的[[Prototype]]特性被赋值为构造函数的 prototype 属性。

(3) 构造函数内部的 this 被赋值为这个新对象(即 this 指向新对象)。

(4) 执行构造函数内部的代码(给新对象添加属性)。

(5) 如果构造函数返回非空对象,则返回该对象;否则,返回刚创建的新对象。

理解原型链:

首先,我们要知道原型链有什么作用,它的作用就是共享属性和方法。

当一个对象访问属性或方法时,首先会在自身上寻找,找不到就会往对象原型上寻找,层层往上寻找的过程就是我们所说的原型链。

如图name是构造函数Person的定义的属性,age是对person1定义的,sex则是构造函数原型定义的。

理解原型,理解下面的关系是很有必要的;

console.log(Person.prototype.__proto__ === Object.prototype); // true

console.log(Person.prototype.__proto__.constructor === Object); // true

console.log(Person.prototype.__proto__.__proto__ === null); // true

结束

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
JS基础知识总结(三):原型、原型链
上一篇JS基础知识总结(二)主要了介绍深拷贝、浅拷贝的基础知识,本文将介绍JS原型、原型链的有关内容。
前端林子
2019/01/05
2.4K1
JS基础知识总结(三):原型、原型链
第202天:js---原型与原型链终极详解
JavaScript 中,万物皆对象!但对象也是有区别的。分为普通对象和函数对象,Object 、Function 是 JS 自带的函数对象。下面举例说明
半指温柔乐
2018/09/11
9890
第202天:js---原型与原型链终极详解
一句话读懂原型 、原型链(__proto__、prototype)
 先属性明确几个概念 prototype: 原型,函数的一个属性,它本身就是一个对象 {}  __proto__: 原型链,通过 __proto__ 可以把互相继承的对象的原型链接起来  原型、原型链 __proto__  __proto__ 是每个对象都具有的属性,它指向该对象所继承的原型对象。 或者可以这样说: 对象的 __proto__ 指向对象的构造函数的原型对象 例 1.1 function Person() { } let person1 =
andyhu
2023/05/24
3610
一站搞定原型链:深入理解JavaScript的继承机制
JavaScript 的原型链(prototype chain)是理解 JavaScript 对象和继承机制的关键。它是通过对象的原型(prototype)属性实现的,用于实现对象属性和方法的共享和继承。以下是对 JavaScript 原型链的详细介绍,这一篇文章将会通过理论与demo相结合的方式,力争一文概括原型、对象、原型链以及基于原型链实现JavaScript的继承机制的所有方面,帮助您一站式搞定原型链。
watermelo37
2025/01/22
1080
一站搞定原型链:深入理解JavaScript的继承机制
js原型及原型链解析
首先,明确一点:js中的对象分为普通对象和函数对象,一般我们自定义的可以被new的函数称作函数对象,另外js内置了譬如:Array、Date、Object、Function、Number、String、Boolean、RegExp、Error等这些函数对象:
用户1141560
2019/05/24
2.4K0
理解JS 原型链
一直以来对于JavaScript 的原型链的概念,始终有些东西有一种模糊感,最近刚好有时间就塌下心认真的把《JavaScript高级程序设计》中相关内容认真读了一遍,也查看了很多网上很多资料,以前很多不明白的地方也渐渐明白了起来。 写一篇文章记录一下最近学习的感悟。
九旬
2020/10/23
1.8K0
理解JS 原型链
【前端芝士树】Javascript的原型与原型链
1994年,网景公司(Netscape)发布了Navigator浏览器0.9版,但是刚开始的Js没有继承机制,更别提像同时期兴盛的C++和Java这样拥有面向对象的概念。在实际的开发过程中,工程师们发现没有继承机制很难解决一些问题,必须有一种机制能将所有的对象关联起来。
CloudCat
2022/05/06
2500
【前端芝士树】Javascript的原型与原型链
一文彻底搞懂原型链
js分为「函数对象」和「普通对象」,每个对象都有__proto__属性,但是只有函数对象且「非箭头函数」才有prototype属性。
PHP开发工程师
2022/03/12
1.4K0
一文彻底搞懂原型链
js中的原型和原型链
在js中每个函数(非箭头函数,一般关于原型的有关知识我们都只考虑构造函数)都会拥有一个 prototype 属性,该属性值是一个对象,我们称之为原型对象。原型对象上默认会有 constructor 属性,指向该构造函数。创建原型的主要目的是为了对象实例共享属性和方法。
用户10562852
2023/05/21
1.2K0
js中的原型和原型链
详解原型与原型链
其实,刚开始学 JavaScript 时,就有学过原型与原型链的相关知识了,只是当时还没有养成写笔记的习惯,导致现在已经忘的七七八八了。
赤蓝紫
2023/01/02
4240
详解原型与原型链
JS进阶-原型链
__proto__(原型指向):实例对象内部的 __proto__ 连接到其构造函数的 prototype,形成原型链。
吃猫的鱼Code
2025/02/14
1590
JS进阶-原型链
原型和原型链的深入浅出
对象是 javascript 基本数据类型。对象是一种复合值: 它将很多值(原始值或者其它对象)聚合在一起,可通过名字访问这些值。
前端老鸟
2022/03/07
4550
掌握原型链,再炒冷饭系列
原型链是一个比较抽象的概念,每当被问起这个问题时,总会回答得不是那么准确,好像懂,但自己好像又不太懂,真是尴尬了
Maic
2022/08/29
2130
掌握原型链,再炒冷饭系列
深入理解javascript对象
对象被定义为一组属性的无序集合,对象就是一组没有特定顺序的值。对象的每个value值都由一个key来标识,一个key映射一个value值。
javascript艺术
2022/11/22
4050
关于javascript的原型和原型链,看我就够了(三)
原型对象有一个constructor属性,指向该原型对象对应的构造函数 foo 为什么有 constructor 属性?那是因为 foo 是 Foo 的实例。 那 Foo.prototype 为什么有 constructor 属性??同理, Foo.prototype Foo 的实例。 也就是在 Foo 创建的时候,创建了一个它的实例对象并赋值给它的 prototype
陌上寒
2019/04/02
5340
关于javascript的原型和原型链,看我就够了(三)
原型与原型链
网上有太多关于原型的资料,不是一上来就各种概念,让人看到摸不着头脑,就是贴各种代码,少个通俗的解释,所以才有了这一篇文章。
前端程序之路
2021/03/28
6340
原型与原型链
来自原形与原型链的拷问
在JS中,我们经常会遇到原型。字面上的意思会让我们认为,是某个对象的原型,可用来继承。但是其实这样的理解是片面的,下面通过本文来了解「原型与原型链」的细节,再顺便谈谈继承的几种方式。
JowayYoung
2020/04/01
5270
来自原形与原型链的拷问
一张图解释清楚JS中的原型、原型链(高频面试考点)
下面这张图是一位小伙伴面试前端岗位,被问到JavaScript的原型和原型链的知识点,没有答出来,面试结束之后,HR发给他的。我觉得这张图把prototype和__proto__解释的很好,在这里分享给大家,并为大家推导一下整幅图:
用户9999906
2022/09/26
1.5K0
JavaScript进阶--原型、原型链、闭包
在JavaScript中,每个函数 都有一个prototype属性,当一个函数被用作构造函数来创建实例时,这个函数的prototype属性值会被作为原型赋值给对象实例(也就是设置 实例的__proto__属性),也就是说,所有实例的原型引用的是函数的prototype属性。
软件架构师Michael
2022/08/09
5620
js原型和原型链
每个函数都有一个 prototype 属性 每一个JavaScript对象(null除外)在创建的时候就会与之关联另一个对象,这个对象就是我们所说的原型对象prototype ,每一个对象都会从原型对象上"继承"属性。
hss
2022/02/25
2.2K0
js原型和原型链
相关推荐
JS基础知识总结(三):原型、原型链
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档