变量赋值

本文转载自http://hellobug.github.io/blog/javascript-variable-assignment/

开始之前先来几个例子,确保起始点是晕的状态~ :P

例1.1

1
2
3
4
var a = "apple";
var b = a;
a = "banana";
b

按理说,b = a后,a是啥值b就应该跟着是啥值了~
但,b结果是"apple",还是一开始赋值时a的值。

例1.2

1
2
3
4
var a = {name: "apple"};
var b = a;
a.name = "banana";
b.name

这回,b又不争气的跟着a变了,b.name结果是"banana"

例1.3

1
2
3
4
var a = {name: "apple"};
var b = a;
a = {name: "banana"};
b.name

这回b又坚持自己了,b.name结果是"apple"

例1.4

1
2
3
4
var a = {count: 2};
var b = a.count;
a.count = 3;
b

同样b的结果还是最开始的2,b到底是要闹哪样?!

======================开始解释的分割线==============================

其实b很无辜,这个要从ECMAScript的变量值类型说起~

类型共有两种:

  • 基本类型 (primitive values) - 包括Undefined, Null, Boolean, Number和String五种基本数据类型
  • 引用类型 (reference values) - 保存在内存中的对象们,不能直接操作,只能通过保存在变量中的地址引用对其进行操作

现在回来看第一个例子例1.1

1
var a = "apple";

"apple"是String类型,属于基本类型,这时值是这样储存的:

1
var b = a;

这时a的值被copy了一份赋给了b:

所以,从此a和b井水不犯河水,各自怎么修改都不会影响对方了~

再来看第二个例子例1.2

1
var a = {name: "apple"};

{name: "apple"}是一个Object,属于引用类型,赋值前后值是这样存储的:

所以当a.name = "banana";时,修改的是大家共同指向的内存中的object的属性值,所以b.name的值也就跟着变了。

例1.3中,

例1.3

1
2
3
4
5
6
var a = {name: "apple"};
var b = a;
a = {name: "banana"};
// {name: "banana"} 是内存中的一个新的Object了,
// a变量存储的地址也是指向这个新的Object的了,所以和b又无关了
b.name //还是"apple"

例1.4中,

例1.4

1
2
3
4
5
6
var a = {count: 2};
var b = a.count;
// a.count是Number类型,所以值被copy给b,
// 从此再怎么修改与b无关了
a.count = 3;
b //还是2

小总结,变量赋值时总是会copy一份的,如果是基本类型,copy的就是实际的值,如果是引用类型,copy的是指向Object的地址值,所以指向的还是同一个Object。


变量比较

顺手再来看看变量的比较~

例2.1

1
2
3
var a = "apple";
var b = "apple";
a == b

这个没问题,结果肯定是true

那这个呢?

例2.2

1
2
3
var a = ["apple"];
var b = ["apple"];
a == b

虽然俩数组长一模一样,结果还是false

其实原理还是一样,对于基本类型,比较的就是实际的值,而对于引用类型(Array也是一种Object),比较的是地址值,虽然两个数组内容是一样的,但它们在内存中是两个Object,地址是不一样,所以比较的结果是false

Posted by hellobug Jan 27th, 2013  javascript

[JS] 让人犯晕的JavaScript变量赋值的更多相关文章

  1. js:Razor视图下服务器代码给Javascript变量赋值

    namespace Razor.Controllers { public class JSController : Controller { public ActionResult Index() { ...

  2. JavaScript 变量克隆和判断变量类型

    一.变量克隆 在js中经常会遇到将一个变量赋值给一个新的变量这种情况,这对于基本类型很容易去实现,直接通过等号赋值就可以了,对于引用类型就不能这样了.(注:像函数,正则也可以直接通过等号赋值) 这里我 ...

  3. JavaScript 基础(一) - JavaScript的引入方式,JavaScript 变量命名规则,JS 的五种基本数据类型,ECMAScript 算数运算符,逻辑运算符

    JavaScript的引入方式 直接编写 <!DOCTYPE html> <html lang="en"> <head> <meta ch ...

  4. JS规则 多样化的我(变量赋值)我们使用"="号给变量存储内容,你可以把任何东西存储在变量里,如数值、字符串、布尔值等,

    多样化的我(变量赋值) 我们可以把变量看做一个盒子,盒子用来存放物品,那如何在变量中存储内容呢? 我们使用"="号给变量存储内容,看下面的语句: var mynum = 5 ; / ...

  5. JavaScript (一) js的介绍及基本语法变量

    个人博客网:https://wushaopei.github.io/    (你想要这里多有) 一.JS 的 介绍 1.JavaScript :简称 : js js 分为三个部分: 1. ECMASc ...

  6. js学习之路2: JavaScript 变量

    1. 变量的创建 首先,可以创建一个变量 var firstVar; 这时候,并没有给它赋值.这个变量还是空的. 然后,我们可以给这个变量赋值. firstVar = 128: 2. 变量的赋值 变量 ...

  7. JS跨页面或跨JS文件对变量赋值

    JS跨页面或跨JS文件对变量赋值,这是很小的一个问题. 但问题虽小,却总觉得有点不够自然,不爽. 为什么呢?访问一个页面上的变量不是什么难事,比如用parent.变量名,或者windows名.变量名, ...

  8. JavaScript变量声明及赋值

    1.变量声明 var a; //声明一个变量 a var b,c,d; //同时申明多个变量时,变量名之间用逗号隔开 console.log(a); //在控制台显示变量a的值,输出为undefine ...

  9. javascript中函数声明、变量声明以及变量赋值之间的关系与影响

    javascript中函数声明.变量声明以及变量赋值之间的关系与影响 函数声明.变量声明以及变量赋值之间有以下几点共识: 1.所有的全局变量都是window的属性 2.函数声明被提升到范围作用域的顶端 ...

随机推荐

  1. MySQL的一些常用sql函数(持续更新。。)

    1. 字符串拼接函数 :CONCAT(str1,str2,...) SELECT CONCAT('AAA','BBB') STR; //AAABBB 2. 判断是否为null,为null就指定另外一个 ...

  2. 解决 mklink 使用中的各种坑(硬链接,软链接/符号链接,目录链接)

    通过 mklink 命令可以创建文件或文件夹的链接,而这种链接跟快捷方式是不一样的.然而我们还可能会遇到其使用过程中的一些坑,本文将整理这些坑并提供解决方法.   0x00 背景介绍:mklink m ...

  3. UICollectionView官方使用示例代码研究

    注:这里是iOS6新特征汇总贴链接 iOS6新特征:参考资料和示例汇总 这个链接可以学习到UICollectionView的相关介绍:iOS6新特征:UICollectionView介绍 由于UICo ...

  4. MySQL5.7中使用JSON

    一.创建表 CREATE TABLE `user` ( `uid` int(11) NOT NULL AUTO_INCREMENT, `info` json DEFAULT NULL, #注意desc ...

  5. 实用符号Alt+小键盘快输

    键盘输入:①Word.写字板.QQ2011等,Alt+Unicode之十进制数:②记事簿.网页框.浏览器之地址栏.TM2009等,Alt+GBK之十进制数. 字符 Unicode 十进制数 GBK ...

  6. DIV,CSS学习

    如何将页脚固定在页面底部 http://web.jobbole.com/10408/

  7. bzoj 1001 [BeiJing2006]狼抓兔子——最小割转最短路

    题目:https://www.lydsy.com/JudgeOnline/problem.php?id=1001 #include<cstdio> #include<cstring& ...

  8. 军哥 LNMP 常见问题

    安装memcached出错: Install memcached...Notice: memcached-1.4.25.tar.gz not found!!!download now...--2016 ...

  9. 【转载】细粒度图像识别Object-Part Attention Driven Discriminative Localization for Fine-grained Image Classification

    细粒度图像识别Object-Part Attention Driven Discriminative Localization for Fine-grained Image Classificatio ...

  10. [转]nginx虚拟目录(alias与root的区别)

    今天配置awstats,awstats创建出的文件目录在/home/awstats下,在nginx中加入配置后狂报404,发现还是忽略了root和alias的区别,特将修改配置记录如下: 1.失败:s ...