Javascript 中的变量

本章内容

• 通过变量使用原始值和引用值；

javascript 变量是松散型的，变量的值和数据类型在脚本生命期内可以改变；

原始值和引用值

---

• 原始值：最简单的数据，保存原始值的变量是按值访问的，就是存储在变量中的实际值；
• 引用值：多个值构成的对象，保存在内存中的对象，JS不能操作对象所在内存空间，操作的是该对象的引用而非实际对象本身。保存引用值的变量是按引用访问的；

动态属性

对引用值而言，可以添加、修改和删除其属性和方法：

let person = new Object();
person.name = 'Jack'; 
console.log(person.name); //  Jack
console.log(typeof person); // object

原始值不能有属性，如：

let userName = 'Jack'; 
userName. age = 29; 
console.log(userName.age); // undefined
console.log(userName); // string

复制值

除了存储方式不同，原始值和引用值在通过变量复制时也不同。

let num1 = 5; 
num2 = num1;

num2 初始化为 num1时，也会得到数值5，是那个值的副本，这两个变量可以独立使用，互不干扰；

image.png

在把引用值赋给另一个变量时，复制的值实际是一个指针，指向存储在堆内存中的对象；
两个变量实际指向同一个对象，因此在一个对象上的变化会在另一个对象上反映出来；

let obj1 = new Object();
obj1.name = 'Jack'; 
obj2 = obj1;
console.log(obj2.name); // Jack

变量obj1保存了一个新的对象实例，这个值被赋给了obj2，此时，两个变量都指向 同一个对象。在给obj1创建属性 name 并赋值后，通过 obj2 也可以访问这个属性。

image.png

传递参数

ECMAScript 中所有函数的参数都是按值传递的。这意味着函数外的值会被复制到函数内部的参数中。
变量有按值和按引用访问，而传参则只有按值传递。

按值传递参数时，值会被复制到一个局部变量（命名参数，或arguments对象中的一个槽位）。
如果：传递参数也使用按引用传递的话，那么在函数内部对变量的修改也会反映到函数外部，这就乱套了，所以，ECMAScript 中是不可能这么做的。

function addTen(num){
  num += 10;
  return num;
}
let count = 20;
let result = addTen(count);
console.log(count); // 20 没变；
console.log(result); // 30 

上面例子，函数 addTen()中的参数 num是一个局部变量，在变量count传入时，20这个值被复制到函数内部使用。在函数内部 num 被加10，但这不会影响外面的 count 。所以说：参数 num 和 变量 count 互不干扰。

原始值按值传参比较好理解，那么引用值呢？（如果传入的是对象，又是否是按值传参呢），看实例：

function setName(obj){
  obj.name = 'Jack'; 
}
let person = new Object();
setName(person);
console.log(persion.name); // Jack

这次把对象 person 传入函数，并被复制到参数 obj中，在函数内部，obj 和 person 指向同一个对象。
结果就是：即使对象是按值传进函数的，obj也会通过引用访问对象。当函数内部给 obj 设置了 name 属性时，函数外部的对象也会反映这个变化，因为 obj 指向的对象保存在全局作用域的堆内存上。
此时：可能会被错误的认为，当在局部作用域中修改对象而变化反映到全局时，就意味着参数是按引用传递的，其实不然；

function setName(obj){
  obj.name = 'Jack'; 
  obj = new Object();
  obj.name = 'Tom'; 
}
let person = new Object();
setName(person);
console.log(persion.name); // Jack

上面例子，obj 被设置为新对象，且name属性也改了，如果是按引用传递的，那么 person 应该将指针改为这个新对象。但事实是 person.name 的值没变。
原因是：obj 在函数内部被重写时，它变成了一个指向本地对象的指针，而这个本地对象在函数执行结束后就被销毁了。

注意 ： ECMAScript 中函数的参数就是局部变量。

确定类型

typeof 操作符最适合用来判断一个变量是否为原始类型，确切的说，它是判断一个变量是否为字符串、数值、布尔值或undefined 的最好方式。如果这个变量是对象或是null，typeof 会返回 object。

console.log(typeof 'Hello');  // string
console.log(typeof 123);  // number
console.log(typeof true); // boolean
console.log(typeof undefined);  // undefined
console.log(typeof null);  // objcet
console.log(typeof new Object());  // object

typeof 用来判断原始值很有用，对引用值的用处不大；
通常我们不关心一个值是不是对象，而是要知道它是什么类型的对象，于是 instanceof 操作符登场；

如果变量是给定引用类型的实例，则 instanceof 操作符返回 true。

console.log(person instanceof Object);  // 变量 person 是 Object么？
console.log(colors instanceof Array);  // 变量 colors 是 Array么？
console.log(pattern instanceof RegExp);  // 变量 pattern 是 RegExp么？

按照定义，所有引用值都是 Object 的实例， 因此通过 instanceof 操作符检测任何引用值和 Object 构造函数都会返回 true。同理，检测原始值都会返回 flase，因为原始值不是对象。

小结

• javascript 变量可以保存两种类型：原始值和引用值；
• 原始值可能是以下6种原始数据类型之一：Undefined、Null、Boolean、Number、String和 Symbol。
• 原始值大小固定，保存在栈内存上，从一个变量复制到另一个变量，原始值会创建该值的第二个副本；
• 引用值是对象，存储在堆内存上，包含引用值的变量只包含指向相应对象的指针， 而不是对象本身；
• 从一个变量到另一个变量复制引用值只会复制指针，因此，两个变量都指向同一个对象；

typeof 操作符可以确定值的原始类型，而 instanceof 操作符确保值的引用类型。