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将博客内容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

JS 实现复制到剪贴板的几种方式小结

《JS实现复制到剪贴板的几种方式小结》本文主要介绍了JS实现复制到剪贴板的几种方式小结,包括ClipboardAPI和document.execCommand这两种方法,具有一定的参考价值,感兴趣的... 目录一、Clipboard API相关属性方法二、document.execCommand优点:缺点:

Node.js 中 http 模块的深度剖析与实战应用小结

《Node.js中http模块的深度剖析与实战应用小结》本文详细介绍了Node.js中的http模块,从创建HTTP服务器、处理请求与响应,到获取请求参数,每个环节都通过代码示例进行解析,旨在帮... 目录Node.js 中 http 模块的深度剖析与实战应用一、引言二、创建 HTTP 服务器:基石搭建(一

使用Vue.js报错:ReferenceError: “Vue is not defined“ 的原因与解决方案

《使用Vue.js报错:ReferenceError:“Vueisnotdefined“的原因与解决方案》在前端开发中,ReferenceError:Vueisnotdefined是一个常见... 目录一、错误描述二、错误成因分析三、解决方案1. 检查 vue.js 的引入方式2. 验证 npm 安装3.

JS常用组件收集

收集了一些平时遇到的前端比较优秀的组件,方便以后开发的时候查找!!! 函数工具: Lodash 页面固定: stickUp、jQuery.Pin 轮播: unslider、swiper 开关: switch 复选框: icheck 气泡: grumble 隐藏元素: Headroom