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

相关文章

墨刀原型工具-小白入门篇

墨刀原型工具-小白入门篇 简介 随着互联网的发展和用户体验的重要性越来越受到重视,原型设计逐渐成为了产品设计中的重要环节。墨刀作为一款原型设计工具,以其简洁、易用的特点,受到了很多设计师的喜爱。本文将介绍墨刀原型工具的基本使用方法,以帮助小白快速上手。 第一章:认识墨刀原型工具 1.1 什么是墨刀原型工具 墨刀是一款基于Web的原型设计工具,可以帮助设计师快速创建交互原型,并且可以与团队

Toolbar+DrawerLayout使用详情结合网络各大神

最近也想搞下toolbar+drawerlayout的使用。结合网络上各大神的杰作,我把大部分的内容效果都完成了遍。现在记录下各个功能效果的实现以及一些细节注意点。 这图弹出两个菜单内容都是仿QQ界面的选项。左边一个是drawerlayout的弹窗。右边是toolbar的popup弹窗。 开始实现步骤详情: 1.创建toolbar布局跟drawerlayout布局 <?xml vers

js+css二级导航

效果 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Con

js小题:通过字符串执行同名变量怎么做

在JavaScript中,你不能直接使用一个字符串来直接引用一个变量,因为JavaScript是一种静态类型语言(尽管它的类型在运行时可以变化),变量的名字在编译时就被确定了。但是,有几种方法可以实现类似的功能: 使用对象(或Map)来存储变量: 你可以使用一个对象来存储你的变量,然后使用字符串作为键来访问这些变量。 let myVars = { 'var1': 'Hello', 'var

图形编辑器基于Paper.js教程03:认识Paper.js中的所有类

先来认一下Paper的资源对象,小弟有哪些,有个整体的认识。认个脸。 在Paper.js的 官方文档中类大致有如下这些: 基类: ProjectViewItemPointToolSizeSegmentRectangleCurveCurveLocationMatrixColorStyleTweenToolEventGradientGradientStopEvent 二级或三级类 继承Ite

个人博客文章目录索引(持续更新中...)

文章目录 一、Java基础二、Java相关三、MySql基础四、Mybatis基础及源码五、MybatisPlus基础六、Spring基础及源码七、Tomcat源码八、SpringMVC基础及源码   随着文章数量多起来,每次着急翻找半天,而是新申请的域名下来了,决定整理下最近几年的文章目录索引。(红色标记为常检索文章) 一、Java基础 1、Java基础(一):语言概述2、J

做为技术人员为什么要写博客

原文链接:http://lusongsong.com/info/post/565.html

HTML文档插入JS代码的几种方法

在HTML文档里嵌入客户端JavaScript代码有4中方法: 1.内联,放置在< script>和标签对之间。 2.放置在由< script>标签的src属性指定的外部文件中。 3.放置在HTML事件处理程序中,该事件处理程序由onclick或onmouseover这样的HTML属性值指定。 4.放在一个URL里,这个URL使用特殊的“javascript:”协议。 在JS编程中,主张

js 正则表达式出现问题

帮同事写个页面,出现正则表达式不管怎么改都没法匹配的情况。。。。 reg = /^sy[0-9]+$/i; if(rtx.match(reg) == null){ alert("请输入正确的RTX账号!"); return false; } 因为之前一直用的是 reg ="/^sy[0-9]+$/i"; 写PHP写习惯了。。外面多写了两个双引号……T.T 改