[JS] 让人犯晕的JavaScript变量赋值

变量赋值

本文转载自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

时间: 2024-10-19 09:03:26

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

JavaScript 变量赋值

在js中经常会遇到将一个变量赋值给一个新的变量这种情况,这对于基本类型很容易去实现,直接通过等号赋值就可以了,对于引用类型就不能这样了.(注:像函数,正则也可以直接通过等号赋值) 这里我写了一个复制值的函数,可以进行深度复制,也能进行浅复制,要进行深度复制只需要将第二个参数设置为true即可 function clone(data,deep){ var cloneData = undefined; var data = arguments[0],deep = arguments[1]; if(!

javascript 变量赋值和 参数传递

先上结论! 变量赋值: 基本类型:按照值传递 (也就是会复制一份) 引用类型:按照引用传递(也就是会传递对象的引用) 参数传递 基本类型:按照值传递 (也就是会复制一份) 引用类型:按照值传递 (也就是会复制一份)//此处有疑惑!!!! 如果以上结论大家都知道,可以不用再向下看了-- 变量赋值--基本类型var num1 = 1; var num2 = num1;num2= 2;alert(num1);//1 变量赋值--对象类型 var obj1 = new Object(); //修改指向

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

namespace Razor.Controllers { public class JSController : Controller { public ActionResult Index() { List<string> FriendsId = new List<string> { "S1", "S2", "S3", "S4" }; ViewBag.FriendsId = FriendsId; r

【JavaScript基础】在写冒泡排序时遇到的JavaScript基础问题:JavaScript的数据类型和变量赋值时的原理

写冒泡排序时,遇到一个问题: function bubbleSort(arr){ var temp = 0; console.log("传入的数组:"); console.log(arr); for(var i = 0;i<arr.length;i++){ //循环arr.length-1次 console.log("外层第"+i+"次循环===============start"); for(var j = 0;j<arr.leng

php变量赋值给js

原文:php变量赋值给js $(document).ready(function(){ <?php $f="'name'"?> var t=<?php echo $f?>; alert(t) }) 或 <script language="javascript" > var t=<?php echo '"sd"'?>; alert(t) </script>  关键是sd两旁既要加单引号还要

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

函数声明.变量声明以及变量赋值之间有以下几点共识: 1.所有的全局变量都是window的属性 2.函数声明被提升到范围作用域的顶端 3.变量声明被提升到范围作用域的顶端 4.变量声明比函数声明的优先级高,变量声明优先于函数声明被提升,如果两者同名同时存在,后被提升的函数声明会覆盖先被提升的变量声明 5.变量赋值不会被提升,到执行行代码才开始赋值 补充: 6.调用javascript函数的整个过程可以分为预编译期(也叫声明期)和赋值期(也叫计算执行期). 预编译期完成对所有变量(包括形参.函数内部

javascript变量声明和作用域提升

以前的知识总是忘,遇到代码又看不懂.要再复习一下,顺便记录一下. 1 add(1,2); 2 function add(a,b){ 3 alert(a+b); 4 } 代码能输出3,为什么不是按顺序执行?应该是  //add is not defined ... javascript的变量声明具有hoisting机制,JavaScript引擎在执行的时候,会把所有变量的声明都提升到当前作用域的最前面. 也就是说,function add(a,b){alert(a+b)}是一个函数声明,告诉我们有

由浅入深JavaScript——变量和原始类型

JavaScript变量 JavaScript变量标识符标识符 var + 变量名称来定义变量.变量名称以字母,下划线_,美元$符号开头,余下字符可以是字母,数字,下划线,美元符号.eg: var  name = 'hello';     var  a1 = 'hello';    var  _test = 'hello';    var  $test = 'hello';    以上变量名称均为正确.    var  1a = 'hello'; //数字开头错误.    JavaScript允

JavaScript简介——添加到(X)HTMl文档及Javascript变量

1.JavaScript是一种专门设计用来给网页增加交互性的编程语言,其代码通常嵌入在网页中. JavaScript是一种解释型语言,不需要预先编译就可以执行 JavaScript是一种专门用来对网页进行编程的脚本语言. 2.JavaScript的作用: (1)全面控制HTML网页中的所有元素 (2)可以在HTMl网页中加入动态文本 (3)响应用户在使用网页时产生的事件 (4)用于校验用户输入的数据 (5)检测访问者的浏览器 (6)用于创建cookies 3.JavaScript技术体系包含的内