变量赋值

本文转载自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. 如何快速编写和调试 Emit 生成 IL 的代码

    .NET Core/.NET Framework 的 System.Reflection.Emit 命名空间为我们提供了动态生成 IL 代码的能力.利用这项能力,我们能够在运行时生成一段代码/一个方法 ...

  2. java基础:eclipse编程不得不知道的技巧

    如果你是位具有开发经丰富的工程师,在开发的过程中,你就会很强烈的要求快捷的编程.如何快捷编程,只有更加熟悉开发工具.那么eclipse是同样也有很多技巧.可以带着下面问题来阅读1.如何查找类相关信息? ...

  3. python(七):元类与抽象基类

    一.实例创建 在创建实例时,调用__new__方法和__init__方法,这两个方法在没有定义时,是自动调用了object来实现的.python3默认创建的类是继承了object. class A(o ...

  4. CCF 集合竞价

    题目: 问题描述 某股票交易所请你编写一个程序,根据开盘前客户提交的订单来确定某特定股票的开盘价和开盘成交量. 该程序的输入由很多行构成,每一行为一条记录,记录可能有以下几种: 1. buy p s ...

  5. [BZOJ5338][TJOI2018]xor

    bzoj luogu descirption 现在有一棵以 \(1\) 为根节点的由 \(n\) 个节点组成的树,树上每个节点上都有一个权值 \(v_i\) .现在有 \(Q\) 次操作,操作如下: ...

  6. fopen()和fclose()

    1.fopen()函数的用法fopen函数用于打开文件, 其调用格式为:FILE *fopen(char *filename, *type);fopen()函数中第一个形式参数表示文件名, 可以包含路 ...

  7. lapis 处理接收到的json 数据

     备注:      在restful api 开发过程中,大家一般使用的都是json 格式的数据lapis       在处理json 数据上也是比较方便的   1. 使用的api 说明 local ...

  8. piezo film 压电相关信息记录 (2018-05-04 更新)

    piezo film 压电相关信息记录 起因需要使用 Piezo 做一些设计 http://www.te.com.cn/chn-zh/videos/transportation/piezo-film- ...

  9. 在ng中的select的使用方法的讲解

    项目中我们可能会使用到条件过滤选择框之类的东西,最简单的就是input.select. 关于select的使用我们通常会需要从数据库中返回数据进行动态绑定. 此时我们会有两种方式: 1)使用ng-re ...

  10. C语言实现简单的单向链表(创建、插入、删除)及等效STL实现代码

    实现个算法,懒得手写链表,于是用C++的forward_list,没有next()方法感觉很不好使,比如一个对单向链表的最简单功能要求: input: 1 2 5 3 4 output: 1-> ...