javascript引用类型指针的工作方式


Posted in Javascript onApril 13, 2015

先看个例子:

<script>
 var a = {n:1}; 
 var b = a; 
 a.x = a = {n:2}; 
 console.log(a.x);// --> undefined 
 console.log(b.x);// --> [object Object] 
 </script>

上面的例子看似简单,但结果并不好了解,很容易把人们给想绕了——“a.x不是指向对象a了么?为啥log(a.x)是undefined?”、“b.x不是应该跟a.x是一样的么?为啥log出来居然有2个对象”

当然各位可以先自行理解一下,若能看出其中的原因和工作机理自然就无须继续往下看啦。

下面来分析下这段简单代码的工作步骤,从而进一步理解js引用类型“赋值”的工作方式。

首先是

var a = {n:1}; 
var b = a;

在这里a指向了一个对象{n:1}(我们姑且称它为对象A),b指向了a所指向的对象,也就是说,在这时候a和b都是指向对象A的:

javascript引用类型指针的工作方式

这一步很好理解,接着继续看下一行非常重要的代码:

a.x = a = {n:2};

我们知道js的赋值运算顺序永远都是从右往左的,不过由于“.”是优先级最高的运算符,所以这行代码先“计算”了a.x。

这时候发生了这个事情——a指向的对象{n:1}新增了属性x(虽然这个x是undefined的):

javascript引用类型指针的工作方式

从图上可以看到,由于b跟a一样是指向对象A的,要表示A的x属性除了用a.x,自然也可以使用b.x来表示了。

接着,依循“从右往左”的赋值运算顺序先执行 a={n:2} ,这时候,a指向的对象发生了改变,变成了新对象{n:2}(我们称为对象B):

javascript引用类型指针的工作方式

接着继续执行 a.x=a,很多人会认为这里是“对象B也新增了一个属性x,并指向对象B自己”

但实际上并非如此,由于一开始js已经先计算了a.x,便已经解析了这个a.x是对象A的x,所以在同一条公式的情况下再回来给a.x赋值,也不会说重新解析这个a.x为对象B的x。

所以 a.x=a 应理解为对象A的属性x指向了对象B:

javascript引用类型指针的工作方式

那么这时候结果就显而易见了。当console.log(a.x)的时候,a是指向对象B的,但对象B没有属性x。没关系,当查找一个对象的属性时,JavaScript 会向上遍历原型链,直到找到给定名称的属性为止。但当查找到达原型链的顶部 - 也就是 Object.prototype - 仍然没有找到指定的属性B.prototype.x,自然也就输出undefined;

而在console.log(b.x)的时候,由于b.x表示对象A的x属性,该属性是指向对象B,自然也输出了[object Object]了,注意这里的[object Object]可不是2个对象的意思,对象的字符串形式,是隐式调用了Object对象的toString()方法,形式是:"[object Object]"。所以[object Object]表示的就只是一个对象罢了

以上所述就是本文的全部内容了,希望大家能够喜欢。

Javascript 相关文章推荐
Jquery操作Select 简单方便 一个js插件搞定
Nov 12 Javascript
JS+CSS实现的蓝色table选项卡效果
Oct 08 Javascript
AngularJS出现$http异步后台无法获取请求参数问题的解决方法
Nov 03 Javascript
jQuery基本筛选选择器实例代码
Feb 06 Javascript
浅析vue-router jquery和params传参(接收参数)$router $route的区别
Aug 03 jQuery
利用jqgrid实现上移下移单元格功能
Nov 07 Javascript
Vue一个案例引发的递归组件的使用详解
Nov 15 Javascript
解决使用layui对select append元素无效或者未及时更新的问题
Sep 18 Javascript
layui 弹出层值回传解决方式
Nov 14 Javascript
JS插入排序简单理解与实现方法分析
Nov 25 Javascript
在elementui中Notification组件添加点击事件实例
Nov 11 Javascript
JavaScript中展开运算符及应用的实例代码
Jan 14 Javascript
javascript实现图片自动和可控的轮播切换特效
Apr 13 #Javascript
使用jQuery实现更改默认alert框体
Apr 13 #Javascript
javascript异步处理工作机制详解
Apr 13 #Javascript
JavaScript中DOM详解
Apr 13 #Javascript
js 获取元素在页面上的偏移量的方法汇总
Apr 13 #Javascript
javascript中scrollTop详解
Apr 13 #Javascript
jQuery实现的在线答题功能
Apr 12 #Javascript
You might like
fleaphp crud操作之find函数的使用方法
2011/04/23 PHP
探讨:parse url解析URL,返回其组成部分
2013/06/14 PHP
php判断两个浮点数是否相等的方法
2015/03/14 PHP
基于PHP代码实现中奖概率算法可用于刮刮卡、大转盘等抽奖算法
2015/12/20 PHP
PHP HTTP 认证实例详解
2016/11/03 PHP
在 Laravel 中动态隐藏 API 字段的方法
2019/10/25 PHP
jquery+php实现搜索框自动提示
2014/11/28 Javascript
js实现鼠标悬停图片上时滚动文字说明的方法
2015/02/17 Javascript
js获取滚动距离的方法
2015/05/30 Javascript
Angular.js回顾ng-app和ng-model使用技巧
2016/04/26 Javascript
AngularJS基础 ng-href 指令用法
2016/08/01 Javascript
js图片切换具体实现代码
2016/10/13 Javascript
微信小程序 数组中的push与concat的区别
2017/01/05 Javascript
Vue中的字符串模板的使用
2018/05/17 Javascript
使用vue打包时vendor文件过大或者是app.js文件很大的问题
2018/06/29 Javascript
[01:13]DOTA2群星解读国服召集令 一起说出回归的理由
2013/07/17 DOTA
[00:12]2018DOTA2亚洲邀请赛 Sccc亮相SOLO赛,今年他又会有什么样的战绩?
2018/04/06 DOTA
使用python解析xml成对应的html示例分享
2014/04/02 Python
Python中正则表达式的用法实例汇总
2014/08/18 Python
python求众数问题实例
2014/09/26 Python
opencv3/C++图像像素操作详解
2019/12/10 Python
Jupyter 无法下载文件夹如何实现曲线救国
2020/04/22 Python
python和node.js生成当前时间戳的示例
2020/09/29 Python
世界上获奖最多的手机镜头:Olloclip
2018/03/03 全球购物
Foot Locker加拿大官网:美国知名运动产品零售商
2019/07/21 全球购物
什么是Deployment descriptors;都有什么类型的部署描述符
2015/07/28 面试题
女大学生个人求职信
2013/12/09 职场文书
六查六看剖析材料
2014/02/15 职场文书
岗位安全生产责任书
2014/07/28 职场文书
村委会贫困证明范本
2014/09/17 职场文书
个人四风问题原因分析及整改措施
2014/09/28 职场文书
2014年物资管理工作总结
2014/12/02 职场文书
运动会开幕式新闻稿
2015/07/17 职场文书
z-index不起作用
2021/03/31 HTML / CSS
教你使用Pandas直接核算Excel中快递费用
2021/05/12 Python
阿里云k8s服务升级时502错误 springboot项目应用
2022/04/09 Servers