变量赋值

本文转载自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. .NET 中各种混淆(Obfuscation)的含义、原理、实际效果和不同级别的差异(使用 SmartAssembly)

    长文预警!!! UWP 程序有 .NET Native 可以将程序集编译为本机代码,逆向的难度会大很多:而基于 .NET Framework 和 .NET Core 的程序却没有 .NET Nativ ...

  2. MySQL优化之表结构优化的5大建议

    很多人都将 数据库设计范式 作为数据库表结构设计“圣经”,认为只要按照这个范式需求设计,就能让设计出来的表结构足够优化,既能保证性能优异同时还能满足扩展性要求殊不知,在N年前被奉为“圣经”的数据库设计 ...

  3. 动态添加 items to PopupMenu

    引用自http://stackoverflow.com/questions/10175140/adding-items-to-popupmenu DevExpress.XtraBars.BarMana ...

  4. openssl 查看证书细节

    打印证书的过期时间 openssl x509 -in signed.crt -noout -dates 打印出证书的内容: openssl x509 -in cert.pem -noout -text ...

  5. 开始创建一个 Vue 项目

    开始创建一个 Vue 项目 安装 nodejs 略 安装 npm 默认安装时自带了 npm 安装 cnpm 为了更快的下载组件,使用cnpm,cnpm 是淘宝前端的镜像. 使用 npm 安装 cnpm ...

  6. 揭晓UX(用户体验)最大的秘密

    我是佩恩和特勒的粉丝已经多年了.我第一次在现实中看到他们是在上个月,被他们的表演完全迷住了. 我真的很喜欢佩恩和特勒,他们经常“回拉窗帘”,并揭示他们是怎么完成他们的魔法.其他魔术师营造神秘主义和虚假 ...

  7. rails里面添加妹子ui

    妹子ui看起来很不错,以为在rails里面添加自定义的css和js和平时一样,结果可想而知,不过弄完以后发现还是比较简单的,这里记录一下 妹子ui需要加载的css和js如下 http://cdn.am ...

  8. Markdown初步使用

    一.兼容 HTML Markdown 的理念是,能让文档更容易读.写和随意改.HTML 是一种发布的格式,Markdown 是一种书写的格式.就这样,Markdown 的格式语法只涵盖纯文本可以涵盖的 ...

  9. find: ‘/run/user/1000/gvfs’: Permission denied

    linux使用命令   find / -name ***  查找文件的时候会遇到以下报错 /gvfs’: Permission denied 其实这个目录是空的,查不查都没关系.所以,以下解决方式比较 ...

  10. POJ 2785 4 Values whose Sum is 0(折半枚举+二分)

    4 Values whose Sum is 0 Time Limit: 15000MS   Memory Limit: 228000K Total Submissions: 25675   Accep ...