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 相关文章推荐
Div自动滚动到末尾的代码
Oct 26 Javascript
JavaScript如何从listbox里同时删除多个项目
Oct 12 Javascript
兼容FF和IE的动态table示例自写
Oct 21 Javascript
利用js判断浏览器类型(是否为IE,Firefox,Opera浏览器)
Nov 22 Javascript
node.js中的fs.chownSync方法使用说明
Dec 16 Javascript
node.js中的fs.readlinkSync方法使用说明
Dec 17 Javascript
轻松5句话解决JavaScript的作用域
Jul 15 Javascript
利用js定义一个导航条菜单
Mar 14 Javascript
echarts学习笔记之箱线图的分析与绘制详解
Nov 22 Javascript
vue2.0 实现导航守卫的具体用法(路由守卫)
May 17 Javascript
js实现多图和单图上传显示
Dec 18 Javascript
js实现简单选项卡制作
Aug 05 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
腾讯微博提示missing parameter errorcode 102 错误的解决方法
2014/12/22 PHP
在 Laravel 项目中使用 webpack-encore的方法
2019/07/21 PHP
tp5.1 实现setInc字段自动加1
2019/10/18 PHP
一个不错的用JavaScript实现的UBB编码函数
2007/03/09 Javascript
可以用来调试JavaScript错误的解决方案
2010/08/07 Javascript
jquery ajax 简单范例(界面+后台)
2013/11/19 Javascript
javascript中直接引用Microsoft的COM生成Word
2014/01/20 Javascript
jQuery选择器源码解读(五):tokenize的解析过程
2015/03/31 Javascript
使用postMesssage()实现iframe跨域页面间的信息传递
2016/03/29 Javascript
JS/jQ实现免费获取手机验证码倒计时效果
2016/06/13 Javascript
jQuery使用Layer弹出层插件闪退问题
2016/12/22 Javascript
jQuery仿移动端支付宝键盘的实现代码
2018/08/15 jQuery
实例详解ztree在vue项目中使用并且带有搜索功能
2018/08/24 Javascript
Vue源码探究之状态初始化
2018/11/14 Javascript
原生JS实现列表内容自动向上滚动效果
2019/05/22 Javascript
微信小程序实现下拉加载更多商品
2020/12/29 Javascript
[18:32]DOTA2 HEROS教学视频教你分分钟做大人-谜团
2014/06/12 DOTA
java直接调用python脚本的例子
2014/02/16 Python
Python生成pdf文件的方法
2014/08/04 Python
Python使用random和tertools模块解一些经典概率问题
2015/01/28 Python
vscode 远程调试python的方法
2017/12/01 Python
基于Python实现拆分和合并GIF动态图
2019/10/22 Python
用python拟合等角螺线的实现示例
2019/12/27 Python
使用Python实现Wake On Lan远程开机功能
2020/01/22 Python
一款CSS3实现多功能下拉菜单(带分享按)的教程
2014/11/05 HTML / CSS
解决CSS3 transition-delay 属性默认值0不带单位失效的问题
2020/10/29 HTML / CSS
俄罗斯第一家篮球店:StreetBall
2020/07/30 全球购物
环保项目建议书
2014/08/26 职场文书
职业生涯规划书怎么写?
2014/09/14 职场文书
教师个人总结范文
2015/02/11 职场文书
百万英镑观后感
2015/06/09 职场文书
学校财务管理制度
2015/08/04 职场文书
银行求职信范文
2019/05/13 职场文书
Java反应式框架Reactor中的Mono和Flux
2021/07/25 Java/Android
Python Matplotlib绘制等高线图与渐变色扇形图
2022/04/14 Python
Python通用验证码识别OCR库ddddocr的安装使用教程
2022/07/07 Python