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 相关文章推荐
新老版本juqery获取radio对象的方法
Mar 01 Javascript
Js操作Select大全(取值、设置选中等等)
Oct 29 Javascript
JavaScript中使用Substring删除字符串最后一个字符
Nov 03 Javascript
js实现jquery的offset()方法实例
Jan 10 Javascript
jquery实现九宫格大转盘抽奖
Nov 13 Javascript
jQuery模拟物体自由落体运动(附演示与demo源码下载)
Jan 21 Javascript
javascript实现延时显示提示框特效代码
Apr 27 Javascript
cordova入门基础教程及使用中遇到的一些问题总结
Nov 14 Javascript
vue.js中$set与数组更新方法
Mar 08 Javascript
微信小程序实现分享朋友圈的图片功能示例
Jan 18 Javascript
微信小程序tabBar设置实例解析
Nov 14 Javascript
11个Javascript小技巧帮你提升代码质量(小结)
Dec 28 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
Zerg建筑一览
2020/03/14 星际争霸
PHP的FTP学习(三)
2006/10/09 PHP
PHP与javascript实现变量交互的示例代码
2013/07/23 PHP
php文字水印和php图片水印实现代码(二种加水印方法)
2013/12/25 PHP
php+mysqli使用预处理技术进行数据库查询的方法
2015/01/28 PHP
php使用post数组的键值创建同名变量并赋值的方法
2015/04/03 PHP
PHP将Excel导入数据库及数据库数据导出至Excel的方法
2015/06/24 PHP
PHP中创建和验证哈希的简单方法实探
2015/07/06 PHP
php 流程控制switch的简单实例
2016/06/07 PHP
PHP生成随机数的方法总结
2018/03/01 PHP
Javascript常用运算符(Operators)-javascript基础教程
2007/12/14 Javascript
JS 获取浏览器和屏幕宽高等信息的实现思路及代码
2013/07/31 Javascript
JQuery下拉框应用示例介绍
2014/04/23 Javascript
使用window.prompt()实现弹出用户输入的对话框
2015/04/13 Javascript
JavaScript中关于iframe滚动条的去除和保留
2016/11/17 Javascript
详解JavaScript 中getElementsByName在IE中的注意事项
2017/02/21 Javascript
JS利用cookies设置每隔24小时弹出框
2017/04/20 Javascript
代码详解javascript模块加载器
2018/03/04 Javascript
JavaScript基于面向对象实现的无缝滚动轮播示例
2020/01/17 Javascript
微信小程序 wx:for 与 wx:for-items 与 wx:key的正确用法
2020/05/19 Javascript
JavaScript实现H5接金币功能(实例代码)
2021/02/22 Javascript
解决pandas中读取中文名称的csv文件报错的问题
2018/07/04 Python
Python数据集切分实例
2018/12/08 Python
python命令 -u参数用法解析
2019/10/24 Python
python的launcher用法知识点总结
2020/08/07 Python
css3实现书本翻页效果的示例代码
2021/03/08 HTML / CSS
详解三种方式实现平滑滚动页面到顶部的功能
2019/04/23 HTML / CSS
美国著名童装品牌:OshKosh B’gosh
2016/08/05 全球购物
Hotels.com爱尔兰:全球酒店预订
2017/02/24 全球购物
Carter’s官方旗舰店:美国受欢迎的婴童服装品牌
2018/01/21 全球购物
Tommy Hilfiger美国官网:美国高端休闲领导品牌
2019/01/14 全球购物
爱心捐助倡议书
2014/05/19 职场文书
规范化管理年活动总结
2014/08/29 职场文书
2014年学校财务工作总结
2014/12/06 职场文书
2015年药房工作总结
2015/04/25 职场文书
2015年图书馆个人工作总结
2015/05/26 职场文书