美文网首页程序员让前端飞前端技术
【JS基础进阶】(六)JavaScript变量、作用域和内存问题

【JS基础进阶】(六)JavaScript变量、作用域和内存问题

作者: 虹猫1992 | 来源:发表于2018-12-22 22:04 被阅读10次

    对基本类型和引用类型的值的内存空间、按值访问或按引用访问、以及变量值的复制可参考《【JS基础进阶】JavaScript栈内存与堆内存》

    (一)函数参数的传递

    ECMAScript所有函数的参数都是按值传递的。也就是说,把函数外部的值复制给函数内部的参数,就和把值从一个变量复制到另一个变量一样

    • 基本类型值的传递如同基本类型变量的复制一样;
    • 引用类型值的传递,则如同引用类型变量的复制一样。
    • 访问变量有按值和按引用两种方式,而参数只能按值传递;
    • 可以把 ECMAScript 函数的参数想象成局部变量
    1. 在向参数传递基本类型的值时,被传递的值会被复制给一个局部变量,这个局部变量的变化不会影响函数的外部
    function addTen(num) { 
        num += 10; 
        return num; 
    }
    var count = 20; 
    var result = addTen(count); 
    alert(count);   //20,没有变化 
    alert(result);  //30 
    

    变量count的值被传递给函数的参数num以便在函数中使用,此时变量count和参数num的值虽然是一样的,但是它们是两个相互独立的变量,在函数中改变参数num的值并不会影响函数外部的变量count的值。

    1. 在向参数传递引用类型的值时,会把 这个值在内存中的地址复制给一个局部变量,因此这个局部变量的变化会反映在函数的外部
    function setName(obj) {
         obj.name = "Nicholas";
     }
     
     var person = new Object();
     setName(person);   // obj = person
     alert(person.name); 
    

    var person = new Object(); 时,可以用下图表示变量和对象的关系:

    引用类型参数传递-1

    当调用函数 setName(person); 时,下图可以表示全局变量person和局部变量obj的关系:

    引用类型参数传递-2

    以上代码中创建一个对象,并将其保存在变量person中。然后,这个变量被传递到setName(obj)函数中之后就被复制给了obj。在这个函数内部,objperson引用的是同一个对象。于是,在函数内部为obj添加name属性后,函数外部的person也将有所反应;因为这时的personobj指向同一个堆内存地址。所以,很多人错误的认为:在局部作用域中修改的对象会在全局对象中反映出来,就说明参数是按引用传递的。

    为了证明对象也是按值传递的,我们再来看看下面这个经过修改的例子:

    function setName(obj) {
         obj.name = "Nicholas";
         //改变obj的指向,此时obj指向一个新的内存地址,不再和person指向同一个
         obj = new Object(); 
         obj.name = "Greg";
     }
     
     var person = new Object();
     setName(person);  
     alert(person.name);  //"Nicholas"
    

    当创建obj对象 obj = new Object(); 时,来看看这时personobj的关系图:

    引用类型参数传递-3

    这个例子与前一个唯一的区别,就是setName()函数中添加了两行代码: obj = new Object(); 用来改变obj的指向; obj.name = "Greg";用来给新创建的obj添加属性。如果是按引用传递的,那么person就会自动被修改为指向新创建的obj的内存地址,则personname属性值被修改为"Greg"。但是,当访问person.name时,显示的结果为"Nicholas"。这说明即使在函数内部修改了参数的值,但原始的引用仍然保持未变。实际上,当在函数内部重写obj时,这个变量引用的就是一个局部对象了。而这个局部对象会在函数执行完毕后被立即销毁!

    (二)执行环境及作用域

    1. 执行环境概念

    执行环境定义了变量或函数有权访问的其他数据,决定了它们各自的行为。每个执行环境都有一个 与之关联的变量对象variable object),环境中定义的所有变量和函数都保存在这个对象中。

    每个函数都有自己的执行环境。当执行流进入一个函数时,函数的环境就会被推入一个环境栈中。 而在函数执行之后,栈将其环境弹出,把控制权返回给之前的执行环境。

    当代码在一个环境中执行时,会创建变量对象的一个作用域链scope chain)。作用域链的用途,是保证对执行环境有权访问的所有变量和函数的有序访问。

    var color = "blue"; 
    function changeColor(){ 
        var anotherColor = "red"; 
        function swapColors() { 
            var tempColor = anotherColor; 
            anotherColor = color; 
            color = tempColor; 
            // 这里可以访问 color、anotherColor 和 tempColor 
        } 
        // 这里可以访问 color 和 anotherColor,但不能访问 tempColor         
        swapColors(); 
    } 
    // 这里只能访问 color changeColor(); 
    

    关于执行环境的几 点总结

    • 执行环境有全局执行环境(也称为全局环境)和函数执行环境之分;
    • 每次进入一个新执行环境,都会创建一个用于搜索变量和函数的作用域链;
    • 函数的局部环境不仅有权访问函数作用域中的变量,而且有权访问其包含(父)环境,乃至全 局环境;
    • 全局环境只能访问在全局环境中定义的变量和函数,而不能直接访问局部环境中的任何数据;
    • 变量的执行环境有助于确定应该何时释放内存;
    • 函数参数也被当作变量来对待,因此其访问规则与执行环境中的其他变量相同。
    1. 没有块级作用域
    for (var i=0; i < 10; i++){ 
        doSomething(i); 
    } 
    alert(i);      //10 
    

    对于有块级作用域的语言来说,for 语句初始化变量的表达式所定义的变量,只会存在于循环的环 境之中。而对于 JavaScript 来说,由 for 语句创建的变量 i 即使在 for 循环执行结束后,也依旧会存在 于循环外部的执行环境中。

    (1)声明变量

    • 使用 var 声明的变量会自动被添加到最接近的环境中。在函数内部,最接近的环境就是函数的局部环境;在with 语句中,最接近的环境是函数环境。
    • 如果初始化变量时没有使用 var 声明,该变量会自 动被添加到全局环境。
    function add(num1, num2) { 
        sum = num1 + num2; 
        return sum; } 
    var result = add(10, 20);  //30 alert(sum);
    

    (2)查询标识符

    • 当在某个环境中为了读取或写入而引用一个标识符时,必须通过搜索来确定该标识符实际代表什 么。搜索过程从作用域链的前端开始,向上逐级查询与给定名字匹配的标识符
    • 如果在局部环境中找到 了该标识符,搜索过程停止,变量就绪。
    • 如果在局部环境中没有找到该变量名,则继续沿作用域链向上 搜索。搜索过程将一直追溯到全局环境的变量对象。
    • 如果在全局环境中也没有找到这个标识符,则意味 着该变量尚未声明。
    var color = "blue"; 
    function getColor(){ 
        var color = "red"; 
        return color; 
    } 
    alert(getColor());  //"red"
    

    (三)垃圾收集

    JavaScript 是一门具有自动垃圾收集机制的编程语言,开发人员不必关心内存分配和回收问题。
    关于JavaScript 的垃圾收集的一些总结:

    • 离开作用域的值将被自动标记为可以回收,因此将在垃圾收集期间被删除。
    • “标记清除”是目前主流的垃圾收集算法,这种算法的思想是给当前不使用的值加上标记,然 后再回收其内存。
    • 另一种垃圾收集算法是“引用计数”,这种算法的思想是跟踪记录所有值被引用的次数。JavaScript 引擎目前都不再使用这种算法;但在IE 中访问非原生 JavaScript 对象(如 DOM 元素)时,这种 算法仍然可能会导致问题。
    • 当代码中存在循环引用现象时,“引用计数”算法就会导致问题。
    • 解除变量的引用不仅有助于消除循环引用现象,而且对垃圾收集也有好处。为了确保有效地回 收内存,应该及时解除不再使用的全局对象、全局对象属性以及循环引用变量的引用。

    相关文章

      网友评论

        本文标题:【JS基础进阶】(六)JavaScript变量、作用域和内存问题

        本文链接:https://www.haomeiwen.com/subject/veswkqtx.html