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($.load)事件的用法和分析
Apr 09 Javascript
js中通过split函数分割字符串成数组小例子
Sep 21 Javascript
Js+Jq获取URL参数的集中方法示例代码
May 20 Javascript
jQuery的animate函数学习记录
Aug 08 Javascript
node.js中的url.parse方法使用说明
Dec 10 Javascript
JavaScript获得url查询参数的方法
Jul 02 Javascript
JS+CSS实现另类带提示效果的竖向导航菜单
Oct 15 Javascript
javascript省市级联功能实现方法实例详解
Oct 20 Javascript
Node.js中环境变量process.env的一些事详解
Oct 26 Javascript
vue: WebStorm设置快速编译运行的方法
Oct 18 Javascript
vue tab滚动到一定高度,固定在顶部,点击tab切换不同的内容操作
Jul 22 Javascript
JS实现简易图片自动轮播
Oct 16 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
PHP4实际应用经验篇(9)
2006/10/09 PHP
PHP实现操作redis的封装类完整实例
2015/11/14 PHP
微信公众号判断用户是否已关注php代码解析
2016/06/24 PHP
详解php命令注入攻击
2019/04/06 PHP
JavaScript 编程引入命名空间的方法与代码
2007/08/13 Javascript
javascript 火狐(firefox)不显示本地图片问题解决
2008/07/05 Javascript
jquery 弹出层注册页面等(asp.net后台)
2010/06/17 Javascript
jquery更换文章内容与改变字体大小代码
2013/09/30 Javascript
jQuery设置div一直在页面顶部显示的方法
2013/10/24 Javascript
jQuery实现鼠标单击网页文字后在文本框显示的方法
2015/05/06 Javascript
JavaScript事件详细讲解
2016/06/27 Javascript
Ionic2调用本地SQlite实例
2017/04/22 Javascript
JS实现汉字与Unicode码相互转换的方法详解
2017/04/28 Javascript
JavaScript中Array方法你该知道的正确打开方法
2018/09/11 Javascript
vue中v-for循环给标签属性赋值的方法
2018/10/18 Javascript
vue路由--网站导航功能详解
2019/03/29 Javascript
python 正则表达式 概述及常用字符
2009/05/04 Python
python持久性管理pickle模块详细介绍
2015/02/18 Python
python写入xml文件的方法
2015/05/08 Python
Python压缩解压缩zip文件及破解zip文件密码的方法
2015/11/04 Python
python发送邮件实例分享
2017/07/28 Python
Python实现时钟显示效果思路详解
2018/04/11 Python
Python3 Post登录并且保存cookie登录其他页面的方法
2018/12/28 Python
Pytorch 实现权重初始化
2019/12/31 Python
Python解释器及PyCharm工具安装过程
2020/02/26 Python
html5 Canvas画图教程(2)—画直线与设置线条的样式如颜色/端点/交汇点
2013/01/09 HTML / CSS
HTML5 视频播放(video),JavaScript控制视频的实例代码
2018/10/08 HTML / CSS
澳大利亚在线床零售商:Bedworks
2020/09/01 全球购物
Python里面如何拷贝一个对象
2014/02/17 面试题
工程招投标邀请书
2014/01/26 职场文书
铅球加油稿100字
2014/09/26 职场文书
小学一年级学生评语大全
2014/12/25 职场文书
教师师德表现自我评价
2015/03/05 职场文书
幼儿园毕业典礼家长致辞
2015/07/29 职场文书
图解上海144收音机
2021/04/22 无线电
一次SQL如何查重及去重的实战记录
2022/03/13 MySQL