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 22 Javascript
javaScript Array(数组)相关方法简述
Jul 25 Javascript
JavaScript 字符串与数组转换函数[不用split与join]
Dec 13 Javascript
超链接的禁用属性Disabled使用示例
Jul 31 Javascript
Bootstrap弹出带合法性检查的登录框实例代码【推荐】
Jun 23 Javascript
原生js实现tab选项卡切换
Mar 23 Javascript
JS实现的幻灯片切换显示效果
Sep 07 Javascript
Vue报错:Uncaught TypeError: Cannot assign to read only property’exports‘ of object’#‘的解决方法
Jun 17 Javascript
layerUI下的绑定事件实例代码
Aug 17 Javascript
使用angular-cli webpack创建多个包的方法
Oct 16 Javascript
vue实现手机号码的校验实例代码(防抖函数的应用场景)
Sep 05 Javascript
JS自定义对象创建与简单使用方法示例
Jan 15 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
第十节--抽象方法和抽象类
2006/11/16 PHP
php !function_exists(&quot;T7FC56270E7A70FA81A5935B72EACBE29&quot;))代码解密
2011/01/07 PHP
php中使用session_set_save_handler()函数把session保存到MySQL数据库实例
2014/11/06 PHP
php获取QQ头像并显示的方法
2014/12/23 PHP
php生成年月日下载列表的方法
2015/04/24 PHP
php筛选不存在的图片资源
2015/04/28 PHP
POST一个JSON格式的数据给Restful服务实例详解
2017/04/07 PHP
php使用pecl方式安装扩展操作示例
2019/08/12 PHP
prototype Element学习笔记(篇一)
2008/10/26 Javascript
js对字符的验证方法汇总
2015/02/04 Javascript
jQuery中的ready函数与window.onload谁先执行
2016/06/21 Javascript
jQuery实现ToolTip元素定位显示功能示例
2016/11/23 Javascript
jQuery实现切换隐藏与显示同时切换图标功能
2017/10/29 jQuery
React Native使用fetch实现图片上传的示例代码
2018/03/07 Javascript
在vue里面设置全局变量或数据的方法
2018/03/09 Javascript
vue组件中iview的modal组件爬坑问题之modal的显示与否应该是使用v-show
2019/04/12 Javascript
Vue移动端右滑屏幕返回上一页附源码下载
2019/06/26 Javascript
微信小程序 冒泡事件原理解析
2019/09/27 Javascript
Vue2.0 ES6语法降级ES5的操作
2020/10/30 Javascript
python 中文乱码问题深入分析
2011/03/13 Python
Python笔记(叁)继续学习
2012/10/24 Python
Pandas标记删除重复记录的方法
2018/04/08 Python
Python中的heapq模块源码详析
2019/01/08 Python
python内存管理机制原理详解
2019/08/12 Python
TFRecord文件查看包含的所有Features代码
2020/02/17 Python
python实现将两个文件夹合并至另一个文件夹(制作数据集)
2020/04/03 Python
NEW LOOK官网:英国时装零售巨头之一,快时尚品牌
2017/01/11 全球购物
什么是java序列化,如何实现java序列化
2012/11/14 面试题
什么是Linux虚拟文件系统VFS
2015/08/25 面试题
应届专科生个人的自我评价
2014/01/05 职场文书
学习教师敬业奉献模范事迹材料思想汇报
2014/09/19 职场文书
教师批评与自我批评范文
2014/10/15 职场文书
小学语文复习计划
2015/01/19 职场文书
干部考核工作总结2015
2015/07/24 职场文书
2019学生会干事辞职信
2019/06/27 职场文书
2020年元旦晚会策划书模板
2019/12/30 职场文书