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的direction图片渐变动画效果
May 24 Javascript
让innerText在firefox火狐和IE浏览器都能用的写法
May 14 Javascript
JS实现简单的Canvas画图实例
Jul 04 Javascript
Ext JS 4实现带week(星期)的日期选择控件(实战二)
Aug 21 Javascript
了解Javascript的模块化开发
Mar 02 Javascript
JavaScript中日期的相关操作方法总结
Oct 24 Javascript
springMVC结合AjaxForm上传文件
Jul 12 Javascript
jQuery插件zTree实现的基本树与节点获取操作示例
Mar 08 Javascript
vue2.0使用swiper组件实现轮播效果
Nov 27 Javascript
Vue使用vue-area-linkage实现地址三级联动效果的示例
Jun 27 Javascript
详解vue-cli项目在IE浏览器打开报错解决方法
Dec 10 Vue.js
JS如何实现基于websocket的多端桥接平台
May 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
dedecms采集中可以过滤多行代码的正则表达式
2007/03/17 PHP
php文件夹与文件目录操作函数介绍
2013/09/09 PHP
php日期操作技巧小结
2016/06/25 PHP
js类中的公有变量和私有变量
2008/07/24 Javascript
JQuery最佳实践之精妙的自定义事件
2010/08/11 Javascript
JavaScript调试工具汇总
2014/12/23 Javascript
jquery渐隐渐显的图片幻灯闪烁切换实现方法
2015/02/26 Javascript
JavaScript中window.open用法实例详解
2015/04/15 Javascript
详细解读JavaScript编程中的Promise使用
2015/07/27 Javascript
jQuery超赞的评分插件(8款)
2015/08/20 Javascript
JavaScript事件类型中焦点、鼠标和滚轮事件详解
2016/01/25 Javascript
js中获取jsp表单中radio类型的值简单实例
2016/08/15 Javascript
WebSocket的通信过程与实现方法详解
2018/04/29 Javascript
详解redis在nodejs中的应用
2018/05/02 NodeJs
使用layui 的layedit定义自己的toolbar方法
2019/09/18 Javascript
js获取本日、本周、本月的时间代码
2020/02/01 Javascript
微信小程序:报错(in promise) MiniProgramError
2020/10/30 Javascript
vue动态合并单元格并添加小计合计功能示例
2020/11/26 Vue.js
[01:14:34]DOTA2上海特级锦标赛C组资格赛#2 LGD VS Newbee第一局
2016/02/28 DOTA
python如何实现int函数的方法示例
2018/02/19 Python
python 多线程将大文件分开下载后在合并的实例
2018/11/09 Python
通过pykafka接收Kafka消息队列的方法
2018/12/27 Python
python程序运行进程、使用时间、剩余时间显示功能的实现代码
2019/07/11 Python
Pytorch 定义MyDatasets实现多通道分别输入不同数据方式
2020/01/15 Python
python编写一个会算账的脚本的示例代码
2020/06/02 Python
HTML5 Canvas实现平移/放缩/旋转deom示例(附截图)
2013/07/04 HTML / CSS
日本面向世界,国际级的免税在线购物商城:DOKODEMO
2017/02/01 全球购物
美国糖果店:Sugarfina
2019/02/21 全球购物
2019年.net常见面试问题
2012/02/12 面试题
公务员职务工作的自我评价
2013/11/01 职场文书
客服专员岗位职责范本
2013/11/29 职场文书
矿泉水广告词
2014/03/20 职场文书
大学生军训自我鉴定范文
2014/09/18 职场文书
信访工作汇报材料
2014/10/27 职场文书
库房管理员岗位职责
2015/02/12 职场文书
党支部创先争优公开承诺书
2015/04/30 职场文书