js原型链(看了一个大神 的博客,觉得真的是挖到了宝藏一样)

2024-05-12 17:08

本文主要是介绍js原型链(看了一个大神 的博客,觉得真的是挖到了宝藏一样),希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

原型的基本概念


要想真正理解js的原型和原型链的概念,必须且只要记住以下几点即可:

▶ 一切都是对象(看似如此)。

undefined, number, string, boolean四种属于简单的值类型,不是对象,使用基本类型变量可以调用方法是因为产生了包装对象(临时的)。剩下的几种情况——函数、数组、对象、null、new Number(10)都是对象,他们都是引用类型。

 所有的对象都是由函数创建。

1、函数也是一个对象,由Function函数创建。

2、var obj = { a: 10, b: 20}; var arr = [5, 'x',true]; 这类定义其实只是一个下面的语法糖而已

3、Function也是一个对象,由它自己创建,有趣吧

所有的函数都有prototype属性(原型)

注意,是函数才有prototype,普通对象没有。

函数创建时就自动带有这个属性,也就是我们讲的“原型”,这也绝对是js中最基础也是最难的部分。

这个prototype的属性值是一个对象(属性的集合,再次强调!),默认的只有一个叫做constructor的属性,指向这个函数本身。

prototype可以添加自定义属性,你可以试试Object.prototype,可以看到很多自定义的属性:

所有的对象都有__proto__。

1、所有的对象都有__proto__,指向创建它的函数的prototype,注意,你要这样来理解这句话的意思,那就是同一个函数new出来的对象的__proto__都统一指向了这个函数的prototype,根据后面要讲述的原型链规则,也就是说通过这个函数new出来的所有对象都可以直接使用该函数原型上的任意属性和方法!,因此,对于jquery的这种形式就应该能理解了

$是jQuery的简写别名,其实是一个函数。因此$div是jQuery函数创建的对象,很显然,on方法就是在jQuery.prototype上定义的属性(函数),因此所有jQuery函数创建的对象都已直接使用on方法

2、所有的函数,比如 function fn(){},都是由Function函数创建,因此fn的__proto__指向Function的prototype。

 

3、比较有意思的是,Function也是函数,因此它也由Function创建的,也就是说它自己创建了自己!所有Function的__proto__指向的就是Function的prototype!

4、同理,Object函数也是由Function创建,因此Object的__proto__同样指向Function的prototype!

5、prototype也是一个对象,原始prototype只有一个叫做constructor的属性,指向这个函数本身。因为prototype是一个对象,因此它也是由Object方法创建,因此它的__proto__将指向Object.prototype,如下所示:

6、但是Object.prototype却是一个特例——它的__proto__指向的是null,切记切记!

想想也觉得应该是这样吧

因此,根据上面的几条基本概念,从这段简单的代码我们可以画出这样一条关系链图:

 

 

原型链


以上图为例,我们来对原型链进行描述。

首先person是个函数,我们在它的原型(prototype)上添加了一个getName的方法(函数属性)

然后zs是person new出来的一个对象,因此zs的__proto__指向person的prototype。

person.prototype作为一个普通对象,是有Object函数创建的,因此它的__proto__指向Object.prototype

我们看到,zs对象本身没有getName方法,那它是怎么访问到的?

原来在当前对象中没有找到某个属性时,它会顺着__proto__属性依次向上查找,知道找到为止!因此,

getName属性在zs对象中没有找到,就会继续找zs.__proto__,也就是person.prototype,很显然,这里找到了,就不会再向上查找了

hasOwnProperty属性显然zs对象中没有找到,就会继续找zs.__proto__,也就是person.prototype,很显然,person.prototype中也找不到,于是继续向上在person.prototype.__proto__中找。person.prototype是一个普通对象,它是由Object方法创建的,因此person.prototype.__proto__就是Object.prototype,很显然,Object.prototype里面已经定义了hasOwnProperty方法(属性),因此在这里也找到了。

上面这种查找形式就成为原型链。就像一根链条一样,依次向上链接起来。这也是ES5及之前的所谓“继承”实现。

原型链访问顺序

我们注意到,在getName方法中是直接使用this.name来获取zs对象的name值得,这就是说js在访问原型对象的方法时,直接把当前对象应用到了这个方法的上下文中。也就是相当于:person.prototype.getName.apply(zs)

总结


要想正确理解掌握原型和原型链的概念,必须把上面讲的最核心和基本的几个概念理解和记住,否则看再多的案例也只会云里雾里,晕晕乎乎的,越加无法理解,靠死记硬背肯定是不行的。并且只要熟练掌握和牢记上面说的这几个概念,不管遇到任何变着花样的原型考查,都一定能够正确理解。


 

这篇关于js原型链(看了一个大神 的博客,觉得真的是挖到了宝藏一样)的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/983229

相关文章

使用Python构建一个Hexo博客发布工具

《使用Python构建一个Hexo博客发布工具》虽然Hexo的命令行工具非常强大,但对于日常的博客撰写和发布过程,我总觉得缺少一个直观的图形界面来简化操作,下面我们就来看看如何使用Python构建一个... 目录引言Hexo博客系统简介设计需求技术选择代码实现主框架界面设计核心功能实现1. 发布文章2. 加

JS+HTML实现在线图片水印添加工具

《JS+HTML实现在线图片水印添加工具》在社交媒体和内容创作日益频繁的今天,如何保护原创内容、展示品牌身份成了一个不得不面对的问题,本文将实现一个完全基于HTML+CSS构建的现代化图片水印在线工具... 目录概述功能亮点使用方法技术解析延伸思考运行效果项目源码下载总结概述在社交媒体和内容创作日益频繁的

Node.js 数据库 CRUD 项目示例详解(完美解决方案)

《Node.js数据库CRUD项目示例详解(完美解决方案)》:本文主要介绍Node.js数据库CRUD项目示例详解(完美解决方案),本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考... 目录项目结构1. 初始化项目2. 配置数据库连接 (config/db.js)3. 创建模型 (models/

使用Node.js制作图片上传服务的详细教程

《使用Node.js制作图片上传服务的详细教程》在现代Web应用开发中,图片上传是一项常见且重要的功能,借助Node.js强大的生态系统,我们可以轻松搭建高效的图片上传服务,本文将深入探讨如何使用No... 目录准备工作搭建 Express 服务器配置 multer 进行图片上传处理图片上传请求完整代码示例

Python将博客内容html导出为Markdown格式

《Python将博客内容html导出为Markdown格式》Python将博客内容html导出为Markdown格式,通过博客url地址抓取文章,分析并提取出文章标题和内容,将内容构建成html,再转... 目录一、为什么要搞?二、准备如何搞?三、说搞咱就搞!抓取文章提取内容构建html转存markdown

用js控制视频播放进度基本示例代码

《用js控制视频播放进度基本示例代码》写前端的时候,很多的时候是需要支持要网页视频播放的功能,下面这篇文章主要给大家介绍了关于用js控制视频播放进度的相关资料,文中通过代码介绍的非常详细,需要的朋友可... 目录前言html部分:JavaScript部分:注意:总结前言在javascript中控制视频播放

C#原型模式之如何通过克隆对象来优化创建过程

《C#原型模式之如何通过克隆对象来优化创建过程》原型模式是一种创建型设计模式,通过克隆现有对象来创建新对象,避免重复的创建成本和复杂的初始化过程,它适用于对象创建过程复杂、需要大量相似对象或避免重复初... 目录什么是原型模式?原型模式的工作原理C#中如何实现原型模式?1. 定义原型接口2. 实现原型接口3

Node.js net模块的使用示例

《Node.jsnet模块的使用示例》本文主要介绍了Node.jsnet模块的使用示例,net模块支持TCP通信,处理TCP连接和数据传输,具有一定的参考价值,感兴趣的可以了解一下... 目录简介引入 net 模块核心概念TCP (传输控制协议)Socket服务器TCP 服务器创建基本服务器服务器配置选项服

mac安装nvm(node.js)多版本管理实践步骤

《mac安装nvm(node.js)多版本管理实践步骤》:本文主要介绍mac安装nvm(node.js)多版本管理的相关资料,NVM是一个用于管理多个Node.js版本的命令行工具,它允许开发者在... 目录NVM功能简介MAC安装实践一、下载nvm二、安装nvm三、安装node.js总结NVM功能简介N

前端原生js实现拖拽排课效果实例

《前端原生js实现拖拽排课效果实例》:本文主要介绍如何实现一个简单的课程表拖拽功能,通过HTML、CSS和JavaScript的配合,我们实现了课程项的拖拽、放置和显示功能,文中通过实例代码介绍的... 目录1. 效果展示2. 效果分析2.1 关键点2.2 实现方法3. 代码实现3.1 html部分3.2