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中强制执行toString()具体实现
Apr 27 Javascript
JavaScript全排列的六种算法 具体实现
Jun 29 Javascript
jQuery制作仿腾讯web qq用户体验桌面
Aug 20 Javascript
JavaScript中实现异步编程模式的4种方法
Sep 24 Javascript
Javascript实现鼠标框选操作  不是点击选取
Apr 14 Javascript
总结jQuery插件开发中的一些要点
May 16 Javascript
快速移动鼠标触发问题及解决方法(ECharts外部调用保存为图片操作及工作流接线mouseenter和mouseleave)
Aug 29 Javascript
浅析$(function) ready和onload 的区别
Sep 03 Javascript
javascript使用闭包模拟对象的私有属性和方法
Oct 05 Javascript
JS实现拖拽的方法分析
Dec 20 Javascript
Angularjs上传文件组件flowjs功能
Aug 07 Javascript
vue实现前端列表多条件筛选
Oct 26 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
php从给定url获取文件扩展名的方法
2015/03/14 PHP
Yii+MYSQL锁表防止并发情况下重复数据的方法
2016/07/14 PHP
php获取指定数量随机字符串的方法
2017/02/06 PHP
Jquery+ajax请求data显示在GridView上(asp.net)
2010/08/27 Javascript
一个背景云变换js特效 鼠标移动背景云变化
2012/12/28 Javascript
jquery实现的带缩略图的焦点图片切换(自动播放/响应鼠标动作)
2013/01/23 Javascript
详解js闭包
2014/09/02 Javascript
关于Javascript加载执行优化的研究报告
2014/12/16 Javascript
js与jQuery实现checkbox复选框全选/全不选的方法
2016/01/05 Javascript
10个JavaScript中易犯小错误
2016/02/14 Javascript
理解javascript定时器中的setTimeout与setInterval
2016/02/23 Javascript
浅谈Javascript中的12种DOM节点类型
2016/08/19 Javascript
微信小程序-详解数据缓存
2016/11/24 Javascript
jquery easyui dataGrid动态改变排序字段名的方法
2017/03/02 Javascript
vue.js的安装方法
2017/05/12 Javascript
angularJs中$scope数据序列化的实例
2018/09/30 Javascript
微信小程序的线程架构【推荐】
2019/05/14 Javascript
React中使用外部样式的3种方式(小结)
2019/05/28 Javascript
vue实现扫码功能
2020/01/17 Javascript
axios封装与传参示例详解
2020/10/18 Javascript
python自动化测试实例解析
2014/09/28 Python
在python环境下运用kafka对数据进行实时传输的方法
2018/12/27 Python
详解字符串在Python内部是如何省内存的
2020/02/03 Python
django使用graphql的实例
2020/09/02 Python
使用css实现android系统的loading加载动画
2019/07/25 HTML / CSS
中国网上药店领导者:1药网
2017/02/16 全球购物
anello泰国官方网站:日本流行包包品牌
2019/08/08 全球购物
软件测试有哪些?什么是配置项?
2012/02/12 面试题
暑期学习心得体会
2014/09/02 职场文书
在职证明书范本(2014新版)
2014/09/25 职场文书
工程催款通知书
2015/04/17 职场文书
试用期旷工辞退通知书
2015/04/17 职场文书
学习十八大的感悟
2015/08/11 职场文书
SpringBoot 整合mongoDB并自定义连接池的示例代码
2022/02/28 MongoDB
MySQL去除密码登录告警的方法
2022/04/20 MySQL
MySQL 执行数据库更新update操作的时候数据库卡死了
2022/05/02 MySQL