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 相关文章推荐
在Windows上安装Node.js模块的方法
Sep 25 Javascript
js日期对象兼容性的处理方法
Jan 28 Javascript
javascript实现base64 md5 sha1 密码加密
Sep 09 Javascript
微信小程序新增的拖动组件movable-view使用教程
May 20 Javascript
详解HTML5 使用video标签实现选择摄像头功能
Oct 25 Javascript
JS加密插件CryptoJS实现的DES加密示例
Aug 16 Javascript
React key值的作用和使用详解
Aug 23 Javascript
Vue表单输入绑定的示例代码
Nov 01 Javascript
微信小程序学习笔记之表单提交与PHP后台数据交互处理图文详解
Mar 28 Javascript
js中apply和call的理解与使用方法
Nov 27 Javascript
JS数据类型(基本数据类型、引用数据类型)及堆和栈的区别分析
Mar 04 Javascript
vue element ui validate 主动触发错误提示操作
Sep 21 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
暴雪前总裁遗憾:没尽早追赶Dota 取消星际争霸幽灵
2020/03/08 星际争霸
PHP 面向对象程序设计(oop)学习笔记 (二) - 静态变量的属性和方法及延迟绑定
2014/06/12 PHP
PHP 数组基本操作小结(推荐)
2016/06/13 PHP
php base64 编码与解码实例代码
2017/03/21 PHP
JavaScript在IE中“意外地调用了方法或属性访问”
2008/11/19 Javascript
JQuery中关于jquery.js与jquery.min.js的比较探讨
2013/05/15 Javascript
js中substr,substring,indexOf,lastIndexOf的用法小结
2013/12/27 Javascript
jQuery中has()方法用法实例
2015/01/06 Javascript
jqueryUI里拖拽排序示例分析
2015/02/26 Javascript
JS实现图片放大镜效果的方法
2015/02/27 Javascript
js实现显示当前状态的导航效果代码
2015/08/28 Javascript
Bootstrap select下拉联动(jQuery cxselect)
2017/01/04 Javascript
bootstrap导航栏、下拉菜单、表单的简单应用实例解析
2017/01/06 Javascript
js仿微信公众平台打标签功能
2017/04/08 Javascript
Django使用多数据库的方法
2017/09/06 Javascript
angular2 ng2 @input和@output理解及示例
2017/10/10 Javascript
AngularJS中下拉框的高级用法示例
2017/10/11 Javascript
Mac中安装nvm的教程分享
2017/12/11 Javascript
nodejs中用npm初始化来创建package.json的实例讲解
2018/10/10 NodeJs
JS使用百度地图API自动获取地址和经纬度操作示例
2019/04/16 Javascript
JavaScript实现星级评价效果
2019/05/17 Javascript
python使用pil生成缩略图的方法
2015/03/26 Python
常见的python正则用法实例讲解
2016/06/21 Python
scrapy spider的几种爬取方式实例代码
2018/01/25 Python
详解django三种文件下载方式
2018/04/06 Python
ORM Django 终端打印 SQL 语句实现解析
2019/08/09 Python
使用Jupyter notebooks上传文件夹或大量数据到服务器
2020/04/14 Python
Python中无限循环需要什么条件
2020/05/27 Python
意大利团购网站:Groupon意大利
2016/10/11 全球购物
比利时网上药店: Drogisterij.net
2017/03/17 全球购物
Electrolux伊莱克斯巴西商店:家用电器、小家电和配件
2018/05/23 全球购物
日本小田急百货官网:Odakyu
2018/07/19 全球购物
户外亲子活动策划方案
2014/02/07 职场文书
公司晚会主持词
2014/03/22 职场文书
Python - 10行代码集2000张美女图
2021/05/23 Python
Tensorflow与RNN、双向LSTM等的踩坑记录及解决
2021/05/31 Python