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 相关文章推荐
高效的表格行背景隔行变色及选定高亮的JS代码
Dec 04 Javascript
javascript限制文本框只允许输入数字(曾经与现在的方法对比)
Jan 18 Javascript
jQuery拖动图片删除示例
May 10 Javascript
javascript查找字符串中出现最多的字符和次数的小例子
Oct 29 Javascript
jquery简单实现带渐显效果的选项卡菜单代码
Sep 01 Javascript
JS常用算法实现代码
Nov 14 Javascript
js input输入百分号保存数据库失败的解决方法
May 26 Javascript
微信小程序实现跑马灯效果完整代码(附效果图)
May 30 Javascript
JavaScript new对象的四个过程实例浅析
Jul 31 Javascript
原生js实现each方法实例代码详解
May 27 Javascript
Vue中keep-alive组件作用详解
Feb 04 Javascript
Vue数组响应式操作及高阶函数使用代码详解
Aug 01 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获取ip的三个属性区别介绍(HTTP_X_FORWARDED_FOR,HTTP_VIA,REMOTE_ADDR)
2012/09/23 PHP
关于ob_get_contents(),ob_end_clean(),ob_start(),的具体用法详解
2013/06/24 PHP
php数据库备份还原类分享
2014/03/20 PHP
PHP小白必须要知道的php基础知识(超实用)
2017/10/10 PHP
PHP通过调用新浪API生成t.cn格式短网址链接的方法详解
2019/02/20 PHP
Javascript 定时器调用传递参数的方法
2009/11/12 Javascript
类似GMAIL的Ajax信息反馈显示
2010/02/16 Javascript
js 如何实现对数据库的增删改查
2012/11/23 Javascript
如何在一个页面显示多个百度地图
2013/04/07 Javascript
jQuery实现 注册时选择阅读条款 左右移动
2013/04/11 Javascript
jQuery使用fadein方法实现渐出效果实例
2015/03/27 Javascript
JavaScript使用slice函数获取数组部分元素的方法
2015/04/06 Javascript
jQuery版本升级踩坑大全
2016/01/12 Javascript
AngularJS入门教程之多视图切换用法示例
2016/11/02 Javascript
jQuery remove()过滤被删除的元素(推荐)
2017/07/18 jQuery
vue内置组件transition简单原理图文详解(小结)
2018/07/12 Javascript
IE8中jQuery.load()加载页面不显示的原因
2018/11/15 jQuery
JS脚本实现定时到网站上签到/签退功能
2020/04/22 Javascript
JS访问对象两种方式区别解析
2020/08/29 Javascript
[38:32]完美世界DOTA2联赛循环赛 Forest vs DM 第二场 11.06
2020/11/06 DOTA
用TensorFlow实现lasso回归和岭回归算法的示例
2018/05/02 Python
如何用Python实现简单的Markdown转换器
2018/07/16 Python
python的sys.path模块路径添加方式
2020/03/09 Python
tensorflow指定CPU与GPU运算的方法实现
2020/04/21 Python
利用Python将图片中扭曲矩形的复原
2020/09/07 Python
python 星号(*)的多种用途
2020/09/21 Python
html5的新增的标签和废除的标签简要概述
2013/02/20 HTML / CSS
新西兰珠宝品牌:Michael Hill
2017/09/16 全球购物
意大利时尚奢侈品店:D’Aniello Boutique
2021/01/19 全球购物
什么是重载?CTS、CLS和CLR分别做何解释
2012/05/06 面试题
公司承诺书怎么写
2014/05/24 职场文书
个人作风建设剖析材料
2014/10/11 职场文书
写景作文评语集锦
2014/12/25 职场文书
初婚初育证明范本
2015/06/18 职场文书
学雷锋主题班会教案
2015/08/13 职场文书
2016年春节问候语
2015/11/11 职场文书