Javascript 赋值机制详解


Posted in Javascript onNovember 23, 2014

今天回答了一个关于 Javascript 的问题,涉及到了赋值问题,因此想把这个问题好好总结下。

var a = 'test';

var b = function() {};

b.a = 'test';

function change(m, n) {

    m = 'change';

    n.a = 'change';

}

change(a, b);

执行上述代码后,变量 a 和 b 的值会发生改变吗?

原始值和引用值

在 之前的文章中介绍过原始值和引用值,原始值指的 Undefined, Null, Boolean, Number, String 等,它们存放在栈中,而引用值则集成自 Object,它被存放在堆中。
这里要把两者区分清楚:

var a = 'test';

var b = new String('test');

var A = 'true';

var B = new Boolean('true');

以上四个变量,a 和 A 为原始值,而 b 和 B 则为引用值。

赋值机制

清楚了原始值和引用值的区别后,就可以具体介绍 Javascript 的赋值机制:

在 Javascript 中,对于原始值类型的变量,每次赋值都将生成一份拷贝,而对于引用值,则正如其名,是通过引用赋值,指向同一个存储对象的内存处。
原始值的赋值:

var a = 1;//原始值 

var b = a;//生成一份拷贝给变量 b

b = 2;//与 a 无关

alert(a);//输出 1

引用值的赋值:

var A= new Object();//引用值

A.x = 1;

var B = A;//引用赋值,指向同一个内存处

B.x = 2;//修改 B 将影响 A

alert(A.x);//输出 2

参数传递

现在我们来看看传递两种类型的值给函数形参时时怎么处理的。
1.传递原始值

var a = 1;

function test(m) {

    m = 2;

}

test(a);

alert(a);//输出 1

输出为1,所以我们知道函数只是将变量的值传递进去了,所以在函数体内的 m 得到传来的值1,再被赋值为2,这个过程不影响外部的变量 a。

2.传递引用值

var A= new Object();

A.x = 1

function test(M) {

    M.x = 2;

}

test(A);

alert(A.x);//输出 2

输出为2,所以我们知道函数将变量的地址传递进去了,所以函数体内的 M 得到传递来的地址,因此属性 x 被赋值为2的同时也会影响指向同一内存地址的 A。

总结

现在再回到开篇的问题:

var a = 'test';

var b = function() {};

b.a = 'test';

function change(m, n) {

    m = 'change';

    n.a = 'change';

}

change(a, b);

变量 a 为原始值,变量 b 为引用值,传递进函数体内一个为值,一个为地址,所以函数运行后,变量 a 不会改变,而变量 b 的值将会改变。

Javascript 相关文章推荐
自己写了一个展开和收起的多更能型的js效果
Mar 05 Javascript
javascript标签在页面中的位置探讨
Apr 11 Javascript
JavaScript计算字符串中每个字符出现次数的小例子
Jul 02 Javascript
js实现鼠标点击左上角滑动菜单效果代码
Sep 06 Javascript
javascript中闭包(Closure)详解
Jan 06 Javascript
JS基于面向对象实现的选项卡效果示例
Dec 20 Javascript
JS实现图片高斯模糊切换效果的焦点图实例
Jan 21 Javascript
requirejs按需加载angularjs文件实例
Jun 08 Javascript
JS时间控制实现动态效果的实例讲解
Jul 31 Javascript
基于js粘贴事件paste简单解析以及遇到的坑
Sep 07 Javascript
vue-router启用history模式下的开发及非根目录部署方法
Dec 23 Javascript
JS中的函数与对象的创建方式
May 12 Javascript
Javascript学习笔记之函数篇(六) : 作用域与命名空间
Nov 23 #Javascript
Javascript学习笔记之函数篇(五) : 构造函数
Nov 23 #Javascript
Javascript学习笔记之函数篇(四):arguments 对象
Nov 23 #Javascript
Javascript学习笔记之 函数篇(三) : 闭包和引用
Nov 23 #Javascript
js实例属性和原型属性示例详解
Nov 23 #Javascript
JS常用函数使用指南
Nov 23 #Javascript
浅谈JSON和JSONP区别及jQuery的ajax jsonp的使用
Nov 23 #Javascript
You might like
CodeIgniter错误mysql_connect(): No such file or directory解决方法
2014/09/06 PHP
初识php MVC
2014/09/10 PHP
Zend Framework框架教程之Zend_Db_Table_Rowset用法实例分析
2016/03/21 PHP
利用PHP实现开心消消乐的算法示例
2017/10/12 PHP
php+ajax实现仿百度查询下拉内容功能示例
2017/10/20 PHP
Mootools 1.2教程 输入过滤第一部分(数字)
2009/09/15 Javascript
jquery的live使用注意事项
2014/02/18 Javascript
使用JavaScript脚本无法直接改变Asp.net中Checkbox控件的Enable属性的解决方法
2015/09/16 Javascript
jQuery-1.9.1源码分析系列(十一)DOM操作续之克隆节点
2015/12/01 Javascript
Avalon中文长字符截取、关键字符隐藏、自定义过滤器
2016/05/18 Javascript
无阻塞加载js,防止因js加载不了影响页面显示的问题
2016/12/18 Javascript
Bootstrap面板(Panels)的简单实现代码
2017/03/17 Javascript
详解vue或uni-app的跨域问题解决方案
2020/02/21 Javascript
解决VUE项目localhost端口服务器拒绝连接,只能用127.0.0.1的问题
2020/08/14 Javascript
布同 Python中文问题解决方法(总结了多位前人经验,初学者必看)
2011/03/13 Python
跟老齐学Python之用Python计算
2014/09/12 Python
python高手之路python处理excel文件(方法汇总)
2016/01/07 Python
Windows下安装python2和python3多版本教程
2017/03/30 Python
Python sqlite3事务处理方法实例分析
2017/06/19 Python
pycharm远程linux开发和调试代码的方法
2018/07/17 Python
Python实现查找数组中任意第k大的数字算法示例
2019/01/23 Python
Python 转换RGB颜色值的示例代码
2019/10/13 Python
Python爬虫如何应对Cloudflare邮箱加密
2020/06/24 Python
详解HTML5 canvas绘图基本使用方法
2018/01/29 HTML / CSS
法国在线药房:1001Pharmacies
2021/03/07 全球购物
大门门卫岗位职责
2013/11/30 职场文书
说明书怎么写
2014/05/06 职场文书
餐饮服务食品安全责任书
2014/07/25 职场文书
大学感恩节活动策划方案
2014/10/11 职场文书
二年级语文下册复习计划
2015/01/19 职场文书
员工离职感谢信
2015/01/22 职场文书
2015年保育员个人工作总结
2015/05/13 职场文书
女方离婚起诉书
2015/05/18 职场文书
看雷锋电影观后感
2015/06/10 职场文书
红色电影观后感
2015/06/18 职场文书
详解apache编译安装httpd-2.4.54及三种风格的init程序特点和区别
2022/07/15 Servers