4.1 JS中原始值和引用值的区别

JS中原始值和引用值的区别

  ECMAScript 变量可能包含两种不同类型的值：原始值和引用值。

• 原始值：指的是简单的数据，包括 Undefined、Null、Boolean、Number、String 和 Symbol 这六种基本数据类型。
• 引用值：指的是保存在内存中的对象。

  保存原始值的变量是按值(by value)访问的，因为我们操作的就是存储在变量中的实际值。保存引用值的变量是按引用(by reference)访问的。操作的是对该对象的引用(reference)而非实际的对象本身。

1 动态的属性

  对于引用类型的值，可以为其随时添加属性和方法，也可以改变和删除其属性和方法。例如：

let person = new Object();
person.name = "andy";
alert(person.name);     // andy

  不能给基本类型的值添加属性，虽然不会导致任何错误，但是没有作用。例如:

let a = "andy";
a.age = 27;
alert(a.age);       //undefined

2 复制值

  从一个变量向另一个变量复制原始值和引用值时，方式也是不同的。

• 复制基本数据类型值

  如果复制的是基本类型的值，会在变量对象上创建一个新值，然后把该值复制到新变量分配的位置上。例子：

var num1 = 5;
var num2 = num1;

  如上，两个变量的值都是5，但互不干扰，相互独立。过程如下图。

• 复制引用数据类型值

  当从一个变量向另一个变量复制引用数据类型时，同样也会将存储在变量对象中的值复制一份放到新变量分配的空间中。不同的是这个值是一个指针，指向存储在堆内存当中的一个对象。结果是两个变量都引用同一个对象。如下例子：

var obj1 = new Object();
var obj2 = obj1;
obj1.name = "andy";
alert(obj2.name);   // andy

3 传递参数

  ECMAScript 中所有函数的参数都是按值传递的。基本类型值的传递如同基本类型变量的复制一样，而引用类型值的传递，则如同引用类型变量的复制一样。

• 向参数传递基本类型值

  被传递的值会被复制给一个局部变量(即命名参数，就是arguments 中的一个元素)。如下例子：

function addTen(num){
    num += 10;
    return num;
}
var count = 20;
var result = addTen(count);
alert(count);       // 20,没有变化
alert(result);      // 30

  在上述函数中，参数 num 实际上是函数的局部变量，变量 count 作为参数被传递给函数，数值 20 被复制给参数 num 进行函数内部的计算，参数 num 和 count 是互不相识的。不会影响彼此。

• 向参数传递引用类型值

  在向参数传递引用类型的值时，会把这个值在内存中的地址复制给一个局部变量，因此这个局部变量的变化会反映在函数的外部。例子：

function setName(obj){
    obj.name = "andy";
}
var person = new Object();
setName(person);
alert(person.name);     // andy

  上述代码主要步骤执行如下图所示：

4 确定类型

  检测一个变量是不是基本数据类型可以用 typeof 操作符，它可以确定一个变量是字符串、数值、布尔值、还是 undefined。如果变量的值是一个对象或 null，则 typeof 操作符会返回 Object。如下所示：

var s = "andy";
var b = true;
var i = 2;
var u;
var n = null;
var o = new Object();
function f(){
}
alert(typeof s);    // string
alert(typeof b);    // boolean
alert(typeof i);    // number
alert(typeof u);    // undefined
alert(typeof n);    // object
alert(typeof o);    // object
alert(typeof f);    // function

  typeof 在检测函数时会返回 function。typeof 在检测基本数据类型时非常得力，但在检测引用数据类型的值时，它只能告诉你这是一个 object 。不能告诉你它具体是什么类型的对象，为此，ECMAScript 提供了 instanceof 操作符，其语法如下所示：

result= variable instanceof constructor

  如果变量是给定引用类型的实例(根据它的原型链来识别)。那么 instanceof 会返回 true。例子如下：

var person = new Object();
// 变量 person 是 Object 吗？
alert(person instanceof Object);    // true

  所有引用类型的值都是 Object 类型的实例。如果使用 instanceof 操作符检测基本数据类型的值，始终会返回 false ，因为基本类型不是对象。