JavaScript 【变量、作用域和内存问题】基本类型和引用类型的值

以下大部分为学习《JavaScript 高级程序设计》》(第 3 版) 所做笔记。

目录：

1、动态的属性

2、复制变量值

3、传递参数

4、检测类型

ES 变量可能包含 2 种不同数据类型的值：基本类型值和引用类型值。

基本类型值（也叫简单数据类型）指的是简单的数据段。Undefined、Null、Boolean、Number 和 String 都是基本类型，它们是按值访问的，保存在栈中。

引用类型值是保存在内存中的对象。Object 是引用类型，是按引用访问的。保存在堆中。JS不允许直接访问内存中的位置，在操作对象时，实际上是操作对象的引用而不是实际的对象。

动态的属性

 对于引用类型值，我们可以为其添加属性和方法，也可以改变其属性和方法。对于基本类型值，我们不能给其添加属性，尽管这样不会导致错误。

<script>
    //引用类型的值
    var a = new Object();
    a.name = "xiaoxu";
    console.log( a.name );      //输出：xiaoxu
    //基本类型的值
    var b = "nana";
    b.age = 22;
    console.log( b.age );       //输出：undefined
</script>

复制变量值

① 基本类型值的复制

<script>
    //num1 保存的值是 5
    var num1 = 5;
    //num2 保存了 5的一个副本，变量 num1 跟 num2 相互独立、互不影响
    var num2 = num1;
    console.log( num1 );    //输出：5
    console.log( num2 );    //输出：5
    num2 = 12;
    console.log( num1 );    //输出：5
    console.log( num2 );    //输出：12
</script>

 

②引用类型值的复制

<script>
    var obj1 = new Object();
    //一个变量向另一个变量复制引用类型的值，这个值是一个指针，指针指向存储在堆中的一个对象
    var obj2 = obj1;
    //两个变量将引用同一个对象，改变其中一个变量，会影响另一个变量
    obj.name = "xiaoxu";
    console.log( obj2.name );
</script>

传递参数

参数只能按值传递。 基本类型值的传递如同基本类型值的复制一样，引用类型值的传递如同引用类型变量的复制一样。

① 向参数传递基本类型的值

在向参数传递基本类型的值时，被传递的值会被复制给一个局部变量（即命名参数，或者用 ES 的概念来说，就是 arguments 对象的一个元素）。

<script>
    //函数的参数实际上是函数的局部变量
    function addTen( num ){
        num += 10;
        return num;
    }
    var count = 20;
    //调用函数，变量 count 作为参数被传递给函数，数值20被复制给 num
    //参数按值传递，所以 count 跟 num 相互独立互不影响
    //可以看到 num 在函数内部进行运算后变成了 30, 但是函数外部的 count 仍为20，说明了它们的确是按值传递的
    var result = addTen( count );
    console.log( count );   //输出：20
    console.log( result );  //输出：30
</script>

②向参数传递引用类型的值

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

<script>setName
    function setName( obj ){
        obj.name = "xiaoxu";
        //重写 obj ,变量 obj 这是引用的是一个局部对象，这个局部对象会在函数执行完毕立即销毁
        obj = new Object();
        obj.name = "mona";
    }
    var person = new Object();
    setName( person );
    console.log( person.name );     //输出：xiaoxu
</script>

说明：

　　根据我的理解，将变量 person 传递给 setName() 函数之后被复制给了 obj, 变量值是 person 指向的对象的内存地址。每个函数都有自己的执行环境，当执行流进入一个函数时，函数的环境就会被推入一个环境栈中。函数 setName() 执行到 obj.name = "xiaoxu"之后，内存地址2中的对象的变量 name 的值为 “xiaoxu”，此时访问 person.name ，显示的值为 “xiaoxu”。在执行到语句 obj = new Object(); 之前的内存如下：

执行到语句 obj = new Object() 之后，相当于重写了 obj，obj 引用的就是一个局部对象了。此时访问 person.name ，显示的值仍然为 “xiaoxu”。

 在函数执行完之后，栈将其环境弹出，把控制权返回给之前的执行环境。obj 引用的局部对象会在函数执行完毕之后立即销毁。

检测类型

 　　typeof 操作符在检测基本数据类型的值时用处比较大，在检测引用数据类型的值时用处不大。

<script>
    var a = "a";
    var b = 0;
    var c = true;
    var d;
    var e = null;
    var f = new Object();
    function g(){};
    var h = new Array();
    var pattern1 = /at/g;
    //基本类型值
    console.log( typeof a );    //输出：string
    console.log( typeof b );    //输出：number
    console.log( typeof c );    //输出：boolean
    //undefined、null
    console.log( typeof d );    //输出：undefined
    console.log( typeof e );    //输出：object
    //引用类型值
    console.log( typeof f );        //输出：object
    console.log( typeof g );        //输出：function
    console.log( typeof h );        //输出：object
    console.log( typeof pattern1 ); //输出：object
</script>

　　所有引用类型的值都是 Object 的实例，因此在检测一个引用类型值和 Object 构造函数时，instanceof 操作符始终会返回 true。

<script>
    var a = "a";
    var b = 0;
    var c = true;
    var d;
    var e = null;
    var f = new Object();
    function g(){};
    var h = new Array();
    var pattern1 = /at/g;
    //基本类型值
    console.log( a instanceof Object );    //输出：false
    console.log( b instanceof Object );    //输出：false
    console.log( c instanceof Object );    //输出：false
    //undefined、null
    console.log( d instanceof Object );    //输出：false
    console.log( e instanceof Object );    //输出：false
    //引用类型值
    console.log( f instanceof Object );            //输出：true
    console.log( g instanceof Object );            //输出：true
    console.log( h instanceof Object );            //输出：true
    console.log( pattern1 instanceof Object );     //输出：true
    console.log( g instanceof Function );          //输出：true
    console.log( h instanceof Array );             //输出：true
    console.log( pattern1 instanceof RegExp );     //输出：true
</script>

　　如果变量是给定引用类型的实例（根据它的原型链来识别），那 instanceof 操作符会返回 true。

<script>
    function a(){};
    function b(){};
    //b 继承了 a
    b.prototype = new a();
    var instance = new b();
    console.log( instance instanceof a );       //true
    console.log( instance instanceof b );       //true
    //所有函数的默认原型都是 Object 的实例
    console.log( instance instanceof Object );  //true
</script>