《6小时jQuery实现小应用》中定义全局变量引发的错误

最新推荐文章于 2020-12-19 12:32:20 发布

sgzl111

最新推荐文章于 2020-12-19 12:32:20 发布

阅读量283

点赞数

分类专栏： JavaScript 文章标签： js 变量

本文链接：https://blog.csdn.net/sgzl111/article/details/88908005

版权

JavaScript 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

连续输入a,b,c,d并点击submit提交，正常情况应如下图：

然而实际运行结果如下：

如上图所示，每次添加新的Task，导致task_list中存储的Task内容都变为新的Task内容。

检查发现原因如下：
错误定义new_task为全局变量，导致task_list[i].content都一样，都指向全局变量new_list，因为JS数组的push方法操作的是地址指针，而非内存块操作。正确做法是在click事件回调函数中定义new_list为局部变量，这样每次click时函数内部都会定义一个独立的new_list变量。

$(function () {
    var list = [];
    var s = 10;
    list.push(s);
    console.log(list[0] === s); //true;证明JS数组的push操作的是地址指针，而非内存块
    
    init();
    function init() {
        var c = 30;
        list.push(c);
        console.log(list[1] === c); //true
        var a = [3,6,9];
        list.push(a[0]);
        console.log(list[2] === a[0]); //true
    }
   });

如果push()方法存入局部变量的引用地址,离开函数作用域后,局部变量不应该释放内存吗？那么引用地址还有效吗？？这里涉及JS的内存和垃圾回收机制。
(一)JS的栈内存和堆内存

JS变量分为基本类型（undefined/null/boolean/number/string）和引用类型(对象/数组/函数)；
栈内存和堆内存。栈内存存放基本数据类型，按值访问，在当前执行环境结束时销毁；堆内存存放引用数据类型，按引用访问（同时在栈内存中保存一个基本类型值存储对象在堆内存中的地址），引用类型不会随执行环境结束而销毁，只有当所有引用它的变量不存在时这个对象才被垃圾回收机制回收。
当基本数据类型传递时，是复制了一个新的数据给另一个变量；而当引用类型传递时，复制的仅仅是引用数据类型的地址，两个变量通过地址指向的是同一个堆内存中的数据。JS代码运行图示参考

（二）JS的执行环境和作用域

执行环境和执行环境栈。每个函数都有自己的执行环境，当执行流进入一个函数时，函数的环境会被推入一个环境栈中，在函数执行之后，栈将其环境弹出。全局执行环境直到应用程序退出——如关闭网页或浏览器时才会被销毁。参考：https://www.jianshu.com/p/903b18d70baa
当代码在一个环境中执行时，会创建变量对象的一个作用域链，作用域链的前端始终是当前执行环境的变量对象，全局执行环境的变量对象始终是作用域链中的最后一个对象。每个环境都可以向上搜索作用域链，但不能向下搜索。牢记内部环境可通过作用域链访问所有外部环境，但外部环境不能访问内部环境中的任何变量和函数。

（三）JS的自动垃圾收集机制——标记清除和引用计数

标记清除。垃圾回收器会在运行时给存储在内存中的所有变量加一个标记，然后去除环境中的变量以及被环境中的变量所引用的变量（闭包），剩下仍存在标记的就是要删除的变量了，因为环境中的变量已经无法访问到这些变量了。
引用计数。跟踪记录每个值被使用的次数，当引用次数为0的时候，将其占用的空间回收。缺点：存在内存泄漏，没有解决循环引用的问题。
IE中有一部分对象并不是原生J对象。例如，其BOM和DOM中的对象就是使用C++以COM对象（组件对象）的形式实现的，而COM对象的垃圾回收器就是采用的引用计数的策略。因此，即使IE的Javascript引擎使用标记清除的策略来实现的，但JavaScript访问的COM对象依然是基于引用计数的策略的。说白了，只要IE中涉及COM对象，就会存在循环引用的问题。解决方法：手动将变量设置为null，切断循环引用的连接。IE9中把BOM和DOM对象都转换成了真正的JS对象，从而消除了内存泄漏现象。
内存性能优化：尽量不使用全局变量、全局变量不再有用时可手动解除引用（设置值为null，解除一个值的引用并不是自动回收该值占用的内存，而是让该值脱离执行环境，以便垃圾收集器下次运行时将其回收）。

HTML代码：

<!DOCTYPE html>
 <html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/main.css">
</head> 
<body>
<div class="container">
    <h1>My task</h1>
    <div class="add-task">
        <input id="txt" type="text" name="content" placeholder="e.g.下午记得买菜...">
        <button type="submit" id="btn">submit</button>
    </div>
    <div class="tasks-list" id="tasks-list">
    </div> </div>
<script src='js/jquery-1.7.2.js'></script> <script src="js/store.js"></script> <script src="js/main.js"></script>
</body> 
</html>

JS脚本：

$(function () {
    var $btn = $('#btn'),
        new_task = {},
        task_list = {};

    //store为本地存储，调用了store.js
    store.clear();

    init();
    function init() {
        //初始化时要注意若task_list中一条数据都没有，则会返回undefined;
        // task_list = store.get('task_list');
        task_list = store.get('task_list') || [];
        if(task_list.length)
        {
            render_task_list();
        }
    }

    $btn.on('click',function (e) {
        //var new_task = {}; //定义为局部变量
        
        //禁用默认行为
        e.preventDefault();
        //获取task的值
        new_task.content = $('#txt').val();
        if(!new_task.content) return;
        //将新task存入到task_list中
        addTask(new_task);
        //重新显示task_list内容
        render_task_list();
    });
    function addTask(new_task) {
        task_list.push(new_task);
        store.set('task_list',task_list);
    }
    function render_task_list() {
        var $tasks_list = $('#tasks-list');
        $tasks_list.html('');
        for(var i=0;i<task_list.length;i++)
        {
            var $task = render_task_item(task_list[i]);
            $tasks_list.append($task);
        }
    }
    function render_task_item(data) {
        var list_item =
            '<div class="task-item">'+
            '<span><input type=\'checkbox\'></span>'+
            '<span class="task-content">'+ data.content+'</span>'+
            ' <div class="right">'+
            '<span class="delete">删除</span>'+
            '<span class="detail">详细</span>'+
            '</div>';
        return $(list_item);
    }
})

sgzl111

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
《6小时jQuery实现小应用》中定义全局变量引发的错误

连续输入a,b,c,d并点击submit提交，正常情况应如下图：然而实际运行结果如下：如上图所示，每次添加新的Task，导致task_list中存储的Task内容都变为新的Task内容。检查发现原因如下：错误定义new_task为全局变量，导致task_list[i].content都一样，都指向全局变量new_list，因为JS数组的push方法操作的是地址指针，而非内存块操作...
复制链接

扫一扫

专栏目录