变量在原型链中的查找顺序

js原型链

下面是一道js题目:
[javascript] view plaincopy
  1. function C1(name){  
  2.     if(name){  
  3.         this.name = name;  
  4.     }  
  5. }  
  6.   
  7. function C2(name){  
  8.     this.name = name;  
  9. }  
  10.   
  11. function C3(name){  
  12.     this.name = name || "John";  
  13. }  
  14.   
  15. C1.prototype.name = "Tom";  
  16. C2.prototype.name = "Tom";  
  17. C3.prototype.name = "John";  
  18.   
  19. console.log(new C1().name + "," + new C2().name + "," + new C3().name);  
不运行,求答案!^_^,这道题目对于理解js作用域链十分有用,拿出来和大家分享一下
要做出这道题,最重要是理解js中变量在原型链中查找的顺序,
从内到外大致如下:
本地属性 --->  prototype
变量查找顺序:
能在本地属性中找到的绝不去prototype中找

1).先来分析第一个

[javascript] view plaincopy
  1. new C1().name  
  2.   
  3. function C1(name){  
  4.     if(name){  
  5.         this.name = name;  
  6.     }  
  7. }  
  8.   
  9. C1.prototype.name = "Tom";  
分析:
由于这里没有参数,默认被赋值成了undefined,所以到了if这里就进不去了,因此在C1本地
属性中找不到name这个属性,只能傻逼兮兮的往外找了,又因为C1.prototype.name = "Tom"的
存在,在prototype中找到了name属性,所以最后打印出来的答案是"Tom"

2).接着来分析第二个

[javascript] view plaincopy
  1. new C2().name  
  2.   
  3. function C2(name){  
  4.     this.name = name;  
  5. }  
  6.   
  7. C2.prototype.name = "Tom";  
分析:
由于这次还是没有参数,同样默认被赋值成了undefined,于是本地属性name被赋值成了
undefined。于是在查找的时候一下子就查到了name的值为undefined,
因此C2.prototype.name = "Tom"并没有什么卵用,最终答案为undefined

3).最后来分析第三个

[javascript] view plaincopy
  1. new C3().name  
  2.   
  3. function C3(name){  
  4.     this.name = name || "John";  
  5. }  
  6.   
  7. C3.prototype.name = "John";  
分析:
同样是没有参数,undefined作为参数进来以后情况变成了这样:
this.name = undefined || "John",然后结果很明显了本地属性name被赋值成"John"。
接着是从内往外查找,一下子就锁定了本地属性name,此时的值为"John"。
因此C3.prototype.name = "John"同样没有什么用

最后的结果:
这里还有道小菜:
[javascript] view plaincopy
  1. function Foo() {  
  2.     this.say = function(){  
  3.         alert('本地方法');  
  4.     }  
  5. }  
  6. Foo.prototype.say = function() {  
  7.     alert('prototype方法');  
  8. }  
  9. new Foo().say();  
总结:
如果原型链上有相同的方法。那么会优先找本地方法,找到并执行,原型链上的方法就不执行了。
同样的,属性的查找也是这么个顺序。

转载于:https://www.cnblogs.com/luckyXcc/p/9160185.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/452350.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

基于SpringBoot + Vue的图书管理系统

功能概述 该图书管理系统提供了一系列功能,包括图书管理、图书类型管理、读者借阅归还图书、用户管理和重置密码等。 在图书管理功能中,管理员可以方便地进行图书信息的管理。他们可以添加新的图书记录,包括书名、作者、出版社、ISBN等信息&a…

交换机的工作转发原理

交换机通常是运行在网络OSI七层模型的第二层数据链路层,如图中,第三层网络层通常是路由器运行在该层 今天我们来看看,交换机的工作转发原理是什么样的。 交换机既然是利用端口进行网络数据传输,那么它是如何识别数据是谁给谁的呢…

八个最好的轻量级Linux发行版

如果你在苦恼老旧的硬件无法利用,如果你想要一个能够在不是很大的记忆棒上运行的系统,如果你想要在桌面端上运行200个虚拟机,那么你可以考虑一些“迷你”的Linux发行版。 曾经在08年介绍过当时的十大轻量级Linux,现在已经是2010年…

面向对象——三层架构(表现层、业务层、持久层)

① 持久层:采用DAO模式,建立实体类和数据库表映射(ORM映射)。也就是哪个类对应哪个表,哪个属性对应哪个列。持久层 的目的就是,完成对象数据和关系数据的转换。 ② 业务层:采用事务脚本模式。将…

VMware安装Centos7后有线线缆被拔出

背景:在win10 系统中的虚机软件VMware Workstation中安装CentOS7桌面版,安装过程中没有设置网络 1.确认你win10系统打开了这两个服务:VMware DHCP Service和VMware NAT Service 方法:电脑——右键——管理——服务和应用程序——服…

SpringCloud |第二篇: 服务消费者(Ribbon)

2019独角兽企业重金招聘Python工程师标准>>> 一、Ribbon简介 Ribbon是Netflix发布的开源项目,主要功能是提供客户端的软件负载均衡算法,将Netflix的中间层服务连接在一起。Ribbon客户端组件提供一系列完善的配置项如连接超时,重试…

万维网www

WWW是环球信息网的缩写,(亦作“Web”、“WWW”、“W3”,英文全称为“World Wide Web”),中文名字为“万维网”,"环球网"等,常简称为Web。 分为Web客户端和Web服务器程序。 WWW可以让W…

Mysql导入excel数据,解决某些特殊字符乱码问题

问题 做项目需要从excel表格导入到mysql的数据库表中,excel表格中的“规格”字段的“”符号导入数据库表中,会出现部分数据的“”这个符号会乱码,成“?”的形式。 解决方法 打开excel表格,另存为csv文件;用…

u盘安装成功计算机里找不到文件夹,u盘里的文件不见了,详细教您U盘内容不显示怎么办...

在工作、学习中,我们需要把资料携带外出的时候,首选的存储工具基本上都是U盘。不过有用户在使用U盘时却遇到了U盘的所有的文件夹不见了的情况,但内存的明明文件还在,这到底是为什么呢?难道U盘的文件真的不见了吗&#…

五分钟实现SpringBoot快速入门

文章目录一、创建Maven工程二、添加SpringBoot的起步依赖三、编写SpringBoot引导类四、编写Controller五、测试六、SpringBoot工程热部署一、创建Maven工程 二、添加SpringBoot的起步依赖 文件位置:pom.xml SpringBoot要求,项目要继承SpringBoot的起步…

代码编辑器Sublime Text 可以跨平台(linux,window,os x)

说到代码编辑器,大部分人首先会想到UltraEdit,EmEditor和notepad。但今天要介绍的是另一款功能非常强大的代码编辑器——Sublime Text。Sublime Text还是一款跨 OS X、Linux 和 Windows 三大平台的文字/代码编辑器。除了Sublime Text出色的功能&#xff…

计算机画图怎样更改文字,如何在图片上改字|超简单的修改图片里文字方法

这篇文章将要给大家介绍的是,不用联网,不用下载专业的图像处理软件,单纯用画图工具,就能修改表情包、图片上文字的方法,只适合简单的图片处理,复杂的还是交给专业的图像处理工具吧。下面系统吧就给大家带来…

javascript高级程序设计学习之数值转换 |Number(),parseInt(),parseFloat()

2019独角兽企业重金招聘Python工程师标准>>> 将非数值转换成数值的函数有三个:Number(),parseInt(),parseFloat(); 小记tip:Number()可以用于任何数据类型;parseInt(),parseFloat()针对的是将字符串; Number()的转换规…

Git学习的最佳教程

身为网页设计师或者网页开发者的你,可能已经听说过Git这个正快速成长的版本控制系统。它由GitHub维护;GitHub是一个开放性的、存储众人代码的网站。如果你想学习如何使用Git,请参考本文。在文章最后,我们罗列了其他Git学习资源。 …

如何使用idea快速创建SpringBoot项目

文章目录一、二、三、四、五、一、 二、 三、 四、 五、

闪光css,CSS实现的一闪而过的图片闪光效果

只需要两个html元素和一个css变换,我就能创造出我自己的闪光效果。让我们来实现它!呈现光泽图片下面就是这张addy在他博客上使用的图片:比我需要的要大一些,但你可以把它裁剪一些。注意:左边的那张是纯白色的&#xff…

循序渐进学好编程,不要太急!!!

软件开发人员是一个日新月异的领域—–IT中的大师,今天的编程方式与明天的编程或许截然不同,技术在不断地革新,新语言、新平台的如雨后春笋般出现、更好的解决方案的冒出,因此我们需要跟得上节奏,我们别无选择&#xf…

x230无线网卡驱动服务器版,ThinkPad X230网卡驱动

ThinkPad X230网卡驱动是一款专为ThinkPad X230打造的无线网卡驱动程序,当然,这款驱动也支持其他机型,包括ThinkPad X220,X220i,X220 Tablet,X220i Tablet等等,如果您的笔记本电脑属于下列所列机型中的一款,欢迎您来欧…

学成在线--0.项目概述

文章目录0.前言1.功能架构2.技术架构3.技术栈4.开发步骤0.前言 当前市场的在线教育模式多种多样,包括:B2C、C2C、B2B2C等业务模式,学成在线采用B2B2C业务模式,即向 企业或个人提供在线教育平台提供教学服务,老师和学生…