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 相关文章推荐
分析 JavaScript 中令人困惑的变量赋值
Aug 13 Javascript
JS获取父节点方法
Aug 20 Javascript
script标签的 charset 属性使用说明
Dec 04 Javascript
jQuery+ajax实现鼠标单击修改内容的思路
Jun 29 Javascript
JS实现仿微博可关闭弹出层效果
Sep 21 Javascript
jQuery点击输入框显示验证码图片
May 19 Javascript
Node.js查找当前目录下文件夹实例代码
Mar 07 Javascript
windows下vue.js开发环境搭建教程
Mar 20 Javascript
JavaScript实现三级级联特效
Nov 05 Javascript
使用 Node.js 开发资讯爬虫流程
Jan 07 Javascript
基于vue+element实现全局loading过程详解
Jul 10 Javascript
Node.js path模块,获取文件后缀名操作
Nov 07 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
手冲咖啡应该是现代精品咖啡店的必备选项吗?
2021/03/03 冲泡冲煮
php读取目录所有文件信息dir示例
2014/03/18 PHP
ThinkPHP Mobile使用方法简明教程
2014/06/18 PHP
Laravel 5框架学习之数据库迁移(Migrations)
2015/04/08 PHP
PHP cookie,session的使用与用户自动登录功能实现方法分析
2019/06/05 PHP
js实现无需数据库的县级以上联动行政区域下拉控件
2013/08/14 Javascript
jquery实现图片翻页效果
2013/12/23 Javascript
jQuery页面加载初始化常用的三种方法
2014/06/04 Javascript
nodejs中的fiber(纤程)库详解
2015/03/24 NodeJs
javascript字符串循环匹配实例分析
2015/07/17 Javascript
jQuery Validation PlugIn的使用方法详解
2015/12/18 Javascript
轻量级jQuery插件slideBox实现带底栏轮播(焦点图)代码
2016/03/28 Javascript
Angular.js与Bootstrap相结合实现表格分页代码
2016/04/12 Javascript
Vue.js如何实现路由懒加载浅析
2017/08/14 Javascript
vue2.0.js的多级联动选择器实现方法
2018/02/09 Javascript
vue项目中使用fetch的实现方法
2019/04/25 Javascript
python生成随机mac地址的方法
2015/03/16 Python
python回溯法实现数组全排列输出实例分析
2015/03/17 Python
Python中的ConfigParser模块使用详解
2015/05/04 Python
LRUCache的实现原理及利用python实现的方法
2017/11/21 Python
为什么入门大数据选择Python而不是Java?
2018/03/07 Python
Python将DataFrame的某一列作为index的方法
2018/04/08 Python
Python使用re模块正则提取字符串中括号内的内容示例
2018/06/01 Python
利用Tensorboard绘制网络识别准确率和loss曲线实例
2020/02/15 Python
NFL欧洲商店(德国):NFL Europe Shop DE
2018/11/03 全球购物
索尼巴西商店:Sony巴西
2019/06/21 全球购物
介绍一下SQL注入攻击的种类和防范手段
2012/02/18 面试题
JavaScript实现页面动态验证码的实现示例
2021/03/23 Javascript
暑期培训班招生方案
2014/08/26 职场文书
小兵张嘎观后感300字
2015/06/03 职场文书
科技馆观后感
2015/06/08 职场文书
周末问候语大全
2015/11/10 职场文书
导游词之西江千户苗寨
2019/12/24 职场文书
python文本处理的方案(结巴分词并去除符号)
2021/05/26 Python
MongoDB数据库的安装步骤
2021/06/18 MongoDB
MySQ InnoDB和MyISAM存储引擎介绍
2022/04/26 MySQL