JS 闭包 BUG

C.js代码：

/**
 * 有BUG
 */

(function (global) {
    var _id;
    var _map;
    var _length;

    global.C = function () {
        _map = {};
        _length = 0;
    };

    global.C.prototype = {
        setId: function (id) {
            _id = id;
        },

        getId: function () {
            return _id;
        },

        put: function (key, value) {
            if (!_map.hasOwnProperty(key)) {
                _length++;
            }
            _map[key] = value;
        },

        get: function (key) {
            if (_map.hasOwnProperty(key)) {
                return _map[key];
            }
            return null;
        },
    };

    global.C.prototype.constructor = global.C;

})(window);

View Code

错误原因：代码中_id、_map、_length变量是C的所有实例共用的。

D.js代码：

/**
 * 无BUG
 */

(function (global) {

    global.D = function () {
        this._map = {};
        this._length = 0;
    };

    global.D.prototype = {
        setId: function (id) {
            this._id = id;
        },

        getId: function () {
            return this._id;
        },

        put: function (key, value) {
            if (!this._map.hasOwnProperty(key)) {
                this._length++;
            }
            this._map[key] = value;
        },

        get: function (key) {
            if (this._map.hasOwnProperty(key)) {
                return this._map[key];
            }
            return null;
        },
    };

    global.D.prototype.constructor = global.D;

})(window);

View Code

test.html代码：

<!DOCTYPE html>
<html>
<head>
    <title>JS闭包测试</title>

    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <style type="text/css">
    </style>

    <script type="text/javascript" src="jquery-1.7.1.js"></script>
    <script type="text/javascript" src="C.js"></script>
    <script type="text/javascript" src="D.js"></script>

</head>
<body>
    <input type="button" value="测试1" onclick="test()" />
    <div id="div" style="height:800px;"></div>

    <script type="text/javascript">
        var div = $("#div");

        function log(msg) {
            div.append(msg + " ");
        }

        function logLine(msg) {
            div.append(msg + "<br />");
        }

        //测试
        function test() {
            var c1 = new C();
            var c2 = new C();
            var d1 = new D();
            var d2 = new D();

            c1.setId("id1");
            c2.setId("id2");
            d1.setId("id1");
            d2.setId("id2");

            logLine(c1.getId());
            logLine(c2.getId());
            logLine(d1.getId());
            logLine(d2.getId());

            debugger;
            c1.put("key1", "value1");
            c2.put("key1", "value2");
            d1.put("key1", "value1");
            d2.put("key1", "value2");

            logLine(c1.get("key1"));
            logLine(c2.get("key1"));
            logLine(d1.get("key1"));
            logLine(d2.get("key1"));
        }

    </script>
</body>
</html>

View Code

测试截图：

相关阅读:
写的好的功能参考地址
 碰撞检测原理
 懒加载原理的实现
 jQuery图片延迟加载插件jQuery.lazyload 的使用
 电子工厂生产楼职位解析
 打印条码方式
 条码打印二
 条码打印三
 CSS实现圆角矩形
 条码打印四
原文地址：https://www.cnblogs.com/s0611163/p/15257205.html