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.simple.tree插件 更简单,兼容性更好的无限树插件
Sep 03 Javascript
Raphael一个用于在网页中绘制矢量图形的Javascript库
Jan 08 Javascript
浅析Node在构建超媒体API中的作用
Jul 30 Javascript
基于jQuery实现文本框缩放以及上下移动功能
Nov 24 Javascript
JavaScript入门基础
Aug 12 Javascript
在JavaScript中如何解决用execCommand(
Oct 19 Javascript
基于BootStrap实现局部刷新分页实例代码
Aug 08 Javascript
JavaScript使用delete删除数组元素用法示例【数组长度不变】
Jan 17 Javascript
Javascript中字符串和数字的操作方法整理
Jan 22 Javascript
AngularJS路由切换实现方法分析
Mar 17 Javascript
详解微信小程序scroll-view横向滚动的实践踩坑及隐藏其滚动条的实现
Mar 14 Javascript
小程序调用微信支付的方法
Sep 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
解析PHP计算页面执行时间的实现代码
2013/06/18 PHP
浅析php数据类型转换
2014/01/09 PHP
[原创]php简单隔行变色功能实现代码
2016/07/09 PHP
两个DIV等高的JS的实现代码
2007/12/23 Javascript
ext combox 下拉框不出现自动提示,自动选中的解决方法
2010/02/24 Javascript
Javascript异步编程的4种方法让你写出更出色的程序
2013/01/17 Javascript
为jQuery添加Webkit的触摸的方法分享
2014/02/02 Javascript
纯js写的分页表格数据为json串
2014/02/18 Javascript
JSON字符串和对象之间的转换详解
2015/05/26 Javascript
使用Node.js配合Nginx实现高负载网络
2015/06/28 Javascript
jQuery Validate表单验证插件 添加class属性形式的校验
2016/01/18 Javascript
关于数据与后端进行交流匹配(点亮星星)
2016/08/03 Javascript
jQuery弹出div层过2秒自动消失
2016/11/29 Javascript
基于JS实现限时抢购倒计时间表代码
2017/05/09 Javascript
vue中的inject学习教程
2019/04/24 Javascript
JavaScript实现HSL拾色器
2020/05/21 Javascript
浅谈JavaScript中你可能不知道URL构造函数的属性
2020/07/13 Javascript
python支持断点续传的多线程下载示例
2014/01/16 Python
简单介绍Python中用于求最小值的min()方法
2015/05/15 Python
Python读写unicode文件的方法
2015/07/10 Python
python匹配两个短语之间的字符实例
2018/12/25 Python
python+pyqt5编写md5生成器
2019/03/18 Python
python图像和办公文档处理总结
2019/05/28 Python
利用Python实现Shp格式向GeoJSON的转换方法
2019/07/09 Python
python实现键盘输入的实操方法
2019/07/16 Python
python实现操作文件(文件夹)
2019/10/31 Python
使用 Supervisor 监控 Python3 进程方式
2019/12/05 Python
python新手学习使用库
2020/06/11 Python
HTML5实现的震撼3D焦点图动画的示例代码
2019/09/26 HTML / CSS
床上用品全球在线购物:BeddingInn
2016/12/18 全球购物
jurlique茱莉蔻英国官网:澳洲天然护肤品
2018/08/03 全球购物
美国领先的家庭健康检测试剂盒提供商:LetsGetChecked
2019/03/18 全球购物
Trip.com澳大利亚:在线旅行社
2019/12/01 全球购物
中东最大的在线宠物店:Dubai Pet Food
2020/06/11 全球购物
电子商务系毕业生自荐信
2014/05/29 职场文书
好人好事新闻稿
2015/07/17 职场文书