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 相关文章推荐
Div自动滚动到末尾的代码
Oct 26 Javascript
IE6、IE7中setAttribute不支持class/for/rowspan/colspan等属性
Aug 28 Javascript
js时间日期和毫秒的相互转换
Feb 22 Javascript
ajaxFileUpload.js插件支持多文件上传的方法
Sep 02 Javascript
使用jQuery实现input数值增量和减量的方法
Jan 24 Javascript
微信小程序 安全包括(框架、功能模块、账户使用)详解
Jan 16 Javascript
Echarts基本用法_动力节点Java学院整理
Aug 11 Javascript
React数据传递之组件内部通信的方法
Dec 31 Javascript
简述pm2常用命令集合及配置文件说明
May 30 Javascript
vue项目中锚点定位替代方式
Nov 13 Javascript
vuex管理状态仓库使用详解
Jul 29 Javascript
使用webpack5从0到1搭建一个react项目的实现步骤
Dec 16 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
绿山咖啡和蓝山咖啡
2021/03/04 新手入门
Linux下从零开始安装配置Nginx服务器+PHP开发环境
2015/12/21 PHP
在laravel中实现事务回滚的方法
2019/10/10 PHP
鼠标滚轴控制文本框值的JS代码
2013/11/19 Javascript
javascript页面渲染速度测试脚本分享
2014/04/15 Javascript
javascript屏蔽右键代码
2014/05/15 Javascript
微信+angularJS的SPA应用中用router进行页面跳转,jssdk校验失败问题解决
2016/09/09 Javascript
JS获取html元素的标记名实现方法
2016/10/08 Javascript
JavaScript 用fetch 实现异步下载文件功能
2017/07/21 Javascript
javascript中的隐式调用
2018/02/10 Javascript
vue.js 获取select中的value实例
2018/03/01 Javascript
vue  自定义组件实现通讯录功能
2018/09/30 Javascript
浅析微信扫码登录原理(小结)
2018/10/29 Javascript
Vue-CLI 3.X 部署项目至生产服务器的方法
2019/03/22 Javascript
详解vuex持久化插件解决浏览器刷新数据消失问题
2019/04/15 Javascript
Vue安装浏览器开发工具的步骤详解
2019/05/12 Javascript
React生命周期原理与用法踩坑笔记
2020/04/28 Javascript
详解为什么Vue中的v-if和v-for不建议一起用
2021/01/13 Vue.js
[07:57]DOTA2热力大趴狂欢夜 广州站活动回顾
2013/11/27 DOTA
[46:04]Liquid vs VP Supermajor决赛 BO 第四场 6.10
2018/07/05 DOTA
使用python语言,比较两个字符串是否相同的实例
2018/06/29 Python
Python global全局变量函数详解
2018/09/18 Python
python样条插值的实现代码
2018/12/17 Python
python代码 输入数字使其反向输出的方法
2018/12/22 Python
Solaris操作系统的线程机制
2012/12/23 面试题
实习教师自我鉴定
2013/09/27 职场文书
外语系大学生自荐信范文
2014/03/01 职场文书
新春联欢会主持词
2014/03/24 职场文书
开展党的群众路线教育实践活动工作总结
2014/11/05 职场文书
给朋友的道歉短信
2015/05/12 职场文书
党员证明模板
2015/06/19 职场文书
小学四年级班主任工作经验交流材料
2015/11/02 职场文书
优秀共产党员主要事迹材料
2015/11/05 职场文书
redis 存储对象的方法对比分析
2021/08/02 Redis
使用javascript解析二维码的三种方式
2021/11/11 Javascript
vue实现滑动解锁功能
2022/03/03 Vue.js