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基础整理1
Dec 06 Javascript
iframe异步加载实现点击左边菜单加载右边内容实例讲解
Mar 04 Javascript
在javascript中对于DOM的加强
Apr 11 Javascript
网站繁简切换的JS遇到页面卡死的解决方法
Mar 12 Javascript
图解js图片轮播效果
Dec 20 Javascript
7个jQuery最佳实践
Jan 12 Javascript
用原生js统计文本行数的简单示例
Aug 19 Javascript
jquery一键控制checkbox全选、反选或全不选
Oct 16 jQuery
Vue 刷新当前路由的实现代码
Sep 26 Javascript
微信小程序scroll-view的滚动条设置实现
Mar 02 Javascript
原生js实现购物车功能
Sep 23 Javascript
vue3.0 的 Composition API 的使用示例
Oct 26 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
将酷狗krc歌词解析并转换为lrc歌词php源码
2014/06/20 PHP
PHP PDO fetch 模式各种参数的输出结果一览
2015/01/07 PHP
PHP图片裁剪与缩放示例(无损裁剪图片)
2017/02/08 PHP
完美的php分页类
2017/10/24 PHP
PHP封装cURL工具类与应用示例
2019/07/01 PHP
js屏蔽鼠标键盘(右键/Ctrl+N/Shift+F10/F11/F5刷新/退格键)
2013/01/24 Javascript
JavaScript操纵窗口的方法小结
2013/06/28 Javascript
javascript jq 弹出层实例
2013/08/25 Javascript
jquery库文件略庞大用纯js替换jquery的方法
2014/08/12 Javascript
jQuery实现带渐显效果的人物多级关系图代码
2015/10/16 Javascript
BootStrap入门教程(一)之可视化布局
2016/09/19 Javascript
用js实现简单算法的实例代码
2016/09/24 Javascript
JavaScript轻松创建级联函数的方法示例
2017/02/10 Javascript
微信小程序实现弹出菜单功能
2018/06/12 Javascript
Vue登录注册并保持登录状态的方法
2018/08/17 Javascript
vue .js绑定checkbox并获取、改变选中状态的实例
2018/08/24 Javascript
nuxt.js中间件实现拦截权限判断的方法
2018/11/21 Javascript
详解vue开发中调用微信jssdk的问题
2019/04/16 Javascript
Vue快速实现通用表单验证功能
2019/12/05 Javascript
[01:04:05]VG vs Newbee 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/20 DOTA
Python lambda和Python def区别分析
2014/11/30 Python
django利用request id便于定位及给日志加上request_id
2018/08/26 Python
python使用wxpy轻松实现微信防撤回的方法
2019/02/21 Python
OpenCV HSV颜色识别及HSV基本颜色分量范围
2019/03/22 Python
Python Numpy中数据的常用保存与读取方法
2020/04/01 Python
Django Channel实时推送与聊天的示例代码
2020/04/30 Python
Python暴力破解Mysql数据的示例
2020/11/09 Python
Python 利用argparse模块实现脚本命令行参数解析
2020/12/28 Python
html5之Canvas路径绘图、坐标变换应用实例
2012/12/26 HTML / CSS
蔻驰意大利官网:COACH意大利
2019/01/16 全球购物
物业电工岗位职责
2013/11/20 职场文书
校园招聘策划书
2014/01/09 职场文书
单位活动策划方案
2014/08/17 职场文书
停车场管理协议书范本
2014/10/08 职场文书
2015年全国爱眼日活动方案
2015/05/05 职场文书
音乐会主持人开场白
2015/05/28 职场文书