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 相关文章推荐
JavaScript实现动态增加文件域表单
Feb 12 Javascript
jQuery Ajax请求状态管理器打包
May 03 Javascript
js实现的常用的左侧导航效果
Oct 17 Javascript
jQuery实例—选项卡的简单实现(js源码和jQuery)
Jun 14 Javascript
Bootstrap基本组件学习笔记之input输入框组(9)
Dec 07 Javascript
ES6中Symbol类型用法实例详解
Apr 06 Javascript
一个可复用的vue分页组件
May 15 Javascript
微信小程序实现时间预约功能
Nov 27 Javascript
详解JavaScript中的坐标和距离
May 27 Javascript
node.js express捕获全局异常的三种方法实例分析
Dec 27 Javascript
jQuery带控制按钮轮播图插件
Jul 31 jQuery
vue实现简易音乐播放器
Aug 14 Vue.js
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
php中session与cookie的比较
2015/01/27 PHP
Dojo Javascript 编程规范 规范自己的JavaScript书写
2014/10/26 Javascript
JS判断日期格式是否合法的简单实例
2016/07/11 Javascript
最常见的左侧分类菜单栏jQuery实现代码
2016/11/28 Javascript
javascript中活灵活现的Array对象详解
2016/11/30 Javascript
js判断iframe中元素是否存在的实现代码
2016/12/24 Javascript
AngularJs表单校验功能实例代码
2017/02/09 Javascript
使用sessionStorage解决vuex在页面刷新后数据被清除的问题
2018/04/13 Javascript
js技巧之十几行的代码实现vue.watch代码
2018/06/09 Javascript
基于nodejs的雪碧图制作工具的示例代码
2018/11/05 NodeJs
微信小程序自定义组件实现环形进度条
2020/11/17 Javascript
JS Math对象与Math方法实例小结
2019/07/05 Javascript
js实现登录时记住密码的方法分析
2020/04/05 Javascript
浅谈vue项目利用Hbuilder打包成APP流程,以及遇到的坑
2020/09/12 Javascript
[02:41]《西雅图我们来了》2015国际邀请赛出征全记录
2015/07/23 DOTA
Django Highcharts制作图表
2016/08/27 Python
使用Python对MySQL数据操作
2017/04/06 Python
Python中执行存储过程及获取存储过程返回值的方法
2017/10/07 Python
Python比较2个时间大小的实现方法
2018/04/10 Python
Python函数any()和all()的用法及区别介绍
2018/09/14 Python
python中协程实现TCP连接的实例分析
2018/10/14 Python
解决Python2.7中IDLE启动没有反应的问题
2018/11/30 Python
matplotlib.pyplot绘图显示控制方法
2019/01/15 Python
python 执行终端/控制台命令的例子
2019/07/12 Python
Python3从零开始搭建一个语音对话机器人的实现
2019/08/23 Python
python中的RSA加密与解密实例解析
2019/11/18 Python
HTML5 播放 RTSP 视频的实例代码
2019/07/29 HTML / CSS
Europcar澳大利亚官网:全球汽车租赁领域的领导者
2019/03/24 全球购物
历史专业个人求职信分享
2013/12/20 职场文书
内业资料员岗位职责
2014/01/04 职场文书
护士见习期自我鉴定
2014/02/08 职场文书
故宫导游词
2015/01/31 职场文书
涪陵白鹤梁导游词
2015/02/09 职场文书
离婚案件上诉状
2015/05/23 职场文书
销售口号霸气押韵
2015/12/24 职场文书
总结一下关于在Java8中使用stream流踩过的一些坑
2021/06/24 Java/Android