对JS中原型及原型链的理解

最新推荐文章于 2022-03-22 20:25:12 发布
最新推荐文章于 2022-03-22 20:25:12 发布
阅读量261 收藏
点赞数
分类专栏： JS原生
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/CedricD/article/details/106061121
版权

原型

涉及面试题：如何理解原型？如何理解原型链？

当我们创建一个对象时 let obj = { age: 25}，我们可以发现能使用很多种函数，但是我们明明没有定义过它们，对于这种情况你是否有过疑惑？

当我们在浏览器中打印 obj 时你会发现，在 obj 上居然还有一个 __ proto __ 属性，那么看来之前的疑问就和这个属性有关系了。

讲到这里好像还是没有弄明白什么是原型，接下来让我们再看看 __ proto __ 里面有什么吧。
看到这里你应该明白了，原型也是一个对象，并且这个对象中包含了很多函数，所以我们可以得出一个结论：对于 obj 来说，可以通过
__ proto __ 找到一个原型对象，在该对象中定义了很多函数让我们来使用。

在上面的图中我们还可以发现一个 constructor 属性，也就是构造函数

打开 constructor 属性我们又可以发现其中还有一个 prototype 属性，并且这个属性对应的值和先前我们在 __ proto __ 中看到的一模一样。所以我们又可以得出一个结论：原型的 constructor 属性指向构造函数，构造函数又通过 prototype 属性指回原型

原型链

其实原型就是那么简单，接下来我们再来看一张图，相信这张图能让你彻底明白原型和原型链
原型链：其实原型链就是多个对象通过 __ proto __ 的方式连接了起来，对象的 __ proto __ 属性指向原型， __ proto __ 将对象和原型连接起来组成了原型链

·段公子
关注
专栏目录
前端开发：JS中原型和原型链的介绍
软贱开发攻城狮
10-12 1万+
在前端开发过程中，涉及到JS原理相关的内容也就是常用的几大模块，不仅常用而且很重要，但是涉及到原理的话会有点难懂，尤其是对JS接触不太久的开发者来讲。通过本文关于JS中原型和原型链的介绍，如果认真阅读并且实践示例，应该会很好的掌握这些知识点，虽然篇幅的内容不少，但是分开来看会觉得没那么复杂，同时也整合了其他的汇总，是一篇值得阅读的文章，尤其是对于原型和原型链还不是太清楚的开发者来说甚为重要，不管是在开发过程中还是在面试求职中，这个知识点是必备的，重要性就不在赘述。欢迎关注，一起交流，共同进步。
如何理解JavaScript的原型和原型链？
The_qianduan的博客
04-18 498
如何理解JavaScript的原型和原型链？ 之前有朋友问怎么去理解原型和原型链的问题。这个问题，在面试中，很多同学经常都会遇到。这里给大家讲讲，方便大家记忆。 JavaScript的特点 JavaScript是一门直译式脚本语言，是一种动态类型、基于原型的语言。 JavaScript的灵活性不亚于C++，你可以使用JavaScript尝试不同的程序设计范型。 比如类jQuery风格的函数式编程、...
js对于原型和原型链的理解(仅个人理解)
tao20010624的博客
08-01 212
相信学习前端的朋友对这两个词都不陌生,甚至当我们提到Js的时候就会提到这两个名词(原型，跟原型链) 在知道原型链之前我们要先知道原型他俩是相对关系因为没有原型就没有原型链 ! 废话不多说直接上干货！！！ 原型：原型是存在对象跟构造函数上的 对象中的: 在上面这张图片我们可以看到对象展开会有一个__proto__的属性 在对象中 __proto__ 就是我们所说的原型 构造函数中的原型: 在上面的这段代码中我们可以看到 b.__proto__和Fn.prototype是完全相等的这..
深入理解JavaScript原型和原型链
weixin_38655450的博客
09-10 217
1. 前言 关于JS原型和原型链我之前刚学js就有写过一篇学习笔记形式的博客，但前两天翻出来一看——什么鬼，这是我写的吗？自己都看不懂了，于是我重新整理思路，今天「前端料包」带来第四篇。 原型和原型链是js中的难点也是重点，有句话说，没理解透原型和原型链，就算还没有真正入门的前端。并且原型和原型链会是面试中必不可少的话题。看完这篇相信你能对原型和原型链会有个深刻的理解。如果觉得本文对你有所帮助请点亮左边的????，不甚感激???? 2. 函数对象 JS所有对象分为函数对象和普通对象。凡是通过
js对原型和原型链的理解
温情
03-22 351
1. 原型 每个函数都有一个prototype(显式原型) 每个对象都有一个__proto__(隐式原型) 对象的__proto__全等于对应构造函数的prototype // 定义构造函数 class Person { constructor(name, age) { this.name = name; this.age = age; }; sayMyself() { console.log(`我是${this.name}, 今年
js中的原型和原型链的理解
留白声的博客
05-18 254
原型和原型链的理解 先来总结一波，如下图： 简单的了解一下原型： 所有的引用类型都拥有__proto__属性（隐式原型），是一个普通的对象 所有的函数（function）都拥有prototype属性（显式原型），是一个普通对象 引用类型的__proto__属性指向其构造函数的prototype属性 在使用原型时，尽量避免在隐式类型上操作 综上所述 function Anima(){} //函数Anima拥有prototype属性 //引用类型 a 拥有__proto__属性 //由此可得 anima.
JavaScript中原型和原型链详解
10-24
在探讨JavaScript中原型和原型链的详细知识前，我们首先要了解JavaScript对象的几个核心概念，包括私有变量和函数、静态变量和函数以及实例变量和函数。这些都是理解原型和原型链的基础。 私有变量和函数属于一个...
对js原型和原型链的理解
qq_45770253的博客
08-11 3326
       学习到 JavaScript 原型这个地方的时候，最开始是比较懵的状态，今天早上起来看了下红宝书中对于原型的解释，慢慢的也就有了些了解，但是解释的比较官方。接下来，我会把自己的理解分享下来，尽量用通俗易懂的话来描述。如果有什么不对的地方，希望大家指正。 1、原型 1.1 prototype        JavaScript 中，当我们创建一个函数的时候
JS原型与原型链的深入理解
10-20
以上内容总结了JavaScript中原型和原型链的基本概念和工作机制。理解这些概念有助于编写更加高效和优雅的代码，并且可以更好地控制对象的创建和继承过程。对于JavaScript开发者而言，掌握原型和原型链的深入理解是...
js 原型和原型链的个人理解
qq_32026617的博客
08-01 113
这两天在网上看了一些关于js原型及原型链的一些相关知识，觉得有必要记录一下，一来是做一下总结二来是看一下自己是否真的掌握理解了。 一、原型对象 在 JavaScript 中，每当定义一个对象（函数也是对象）时候，对象中都会包含一些预定义的属性。其中每个函数对象（通过 new Function() 创建的对象）都有一个prototype 属性，这个属性指向函数的原型对象。 function Pers...
JavaScript高频面试之原型与原型链详解
JackieDYH的博客
04-28 621
与大部分面向对象语言不同，ES6之前中并没有引入类（class）的概念，JavaScript并非通过类而是直接通过构造函数来创建实例。在介绍原型和原型链之前，我们有必要先复习一下构造函数的知识。 一、构造函数 构造函数模式的目的就是为了创建一个自定义类，并且创建这个类的实例。构造函数模式中拥有了类和实例的概念，并且实例和实例之间是相互独立的，即实例识别。 构造函数就是一个普通的函数，创建方式...
js中原型链理解及关系图
仙人掌的博客
04-04 286
实例对象访问属性和方法的时候，先查找自己身上下面的属性的方法，如果没有找到，会沿着原型链找到对象的原型，查看原型上是否有要查询的属性和方法，依次查找，找到就返回，如果找到最顶层Object上都没有，(Object原型是null)则返回undefined。 这样向上链式结构，称为原型链。 网上有一些图片，可以参考一下理解 实例对象、构造函数、原型、原型的原型的关系。 其中 f:实例对象、F...
对于js的原型和原型链的理解
热门推荐
浮生离梦的博客
06-23 4万+
一、原型与原型链 JavaScript是一门基于原型的语言，在软件设计模式中，有一种模式叫做原型模式，JavaScript正是利用这种模式而被创建出来 原型模式是用于创建重复的对象，同时又能保证性能，这种类型的设计模式属于创建型模式，它提供了一种创建对象的最佳方式。这种模式是实现了一个原型接口，该接口用于创建当前对象的克隆。原型模式的目的是用原型实例指定创建对象的种类，并且通过拷贝这些原型创建新...
js原型和原型链的理解（透彻）
lixiaonaaa的博客
02-14 8537
1，原型 function Fn() {} Fn是一个构造函数，每个构造函数都会自动生成一个prototype属性，指向一个空对象，这个空对象就是原型。每一个实例对象都会从原型继承属性和方法。 2，原型链 以下两张图阐述的非常详细，感谢尚硅谷课程：http://www.atguigu.com/ 1). Object的构造函数/原型/实例之间的关系（图解） var o1 = new Object(); var o2 = {}; 2).构造函数/原型/实例对象的关系(图解) funct..
我对js原型和原型链的理解
清风了了的博客
11-02 1万+
我们知道在js中，万物皆对象，对象可以说是重中之重了。每一个对象都拥有自己的属性。但是在这个世界中有很多东西都是相似的，可以归为一类，他们有共同的方法和属性。不可能让每一个对象都定义一个属性吧。那样太消耗内存了。所以，在js中怎么才能让多个对象共享一个或多个方法呢？原型的出现就是为了解决这个问题。 在js中每个对象都有一个与它关联的对象，叫做原型对象。每一次获取对象属性都是一次查询过程，当在对象...
JavaScript原型和原型链详解
hnyanzijun1的博客
11-02 2266
一、原型 ①所有 引用类型 都有一个 __proto__（隐式原型）属性，属性值是一个普通的对象 ②所有 函数 都有一个 prototype（原型）属性，属性值是一个普通的对象 ③所有 引用类型的 __proto__ 属性 指向 它的 构造函数的prototype var a = [1,2,3] a.__proto__ === Array.prototype; // => true 二、原型链 当访问一个对象的某个属性时，会先在这个对象本身属性上查找，如果没有找到，则会去它的 __pro
深入js原型与原型链
weixin_45394371的博客
04-14 153
在学习js的时候，原型肯定是一大难以理解的点。分享下我学习中的经验，供大家参考。 首先是概念部分： 什么是原型（prototype） 原型是Js给函数提供的对象类型的属性，默认存在，不需要自己创建。 原型的作用 因为传统意义上的JS没有类似Java中public类的概念（es6新增类class，其实可以看作构造函数的语法糖），所以原型可以很好的解决JS中继承的问题。 也就是在原型里面创建了一块公共...
js中原型链的理解
weixin_43735593的博客
11-20 1万+
js原型链的理解 由于原型链涉及构造函数、函数Function、引用类型Object及特定的两个属性prototype和_proto_，因此在谈原型链前先搞清楚他们之间的关系； 1、函数必然有prototype和_proto_两个属性，所有的函数(包括自定义函数)都是Function实例的对象； 2、对象必然有_proto_属性，但不一定有prototype；实例的对象通过_proto_属性连接...
面试官：谈谈你对原型和原型链的理解
Tz
02-19 4481
金三银四的旺季即将拉开序幕，这段时间有朋友陆陆续续去面试，和她们沟通发现，最高频出现问题就是：谈谈你对原型和原型链的理解？ 无形之刃 最为致命。 ——影流之主 一个看似最最最基础的面试题，但是这送分题，回答的不好可能就变成了送命题。接下来就让我们一起来探讨探讨~ 基于原型的语言？ JavaScript 常被描述为一种基于原型的语言 (prototype-based language)——每个实例对象（ object ）都有一个私有属性（称之为 proto ）指向
js中原型和原型链的关系图
最新发布
07-27
原型和原型链是 JavaScript 中的重要概念，用于实现继承和对象属性的访问。下面是它们之间关系的简化图示： ``` +------------------+ +-------------...希望以上说明能帮助您理解 JavaScript 中原型和原型链的关系。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值