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);

错误原因:代码中_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);

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>

测试截图:

JS 闭包 BUG的更多相关文章

  1. js闭包之我见

    很久前的一个问题终于得以解决,内心是无比喜悦的,不多说,先上代码: function test(){ for(var i=0;i<5;i++){ window.onclick=function( ...

  2. js闭包的作用域以及闭包案列的介绍:

    转载▼ 标签: it   js闭包的作用域以及闭包案列的介绍:   首先我们根据前面的介绍来分析js闭包有什么作用,他会给我们编程带来什么好处? 闭包是为了更方便我们在处理js函数的时候会遇到以下的几 ...

  3. 大部分人都会做错的经典JS闭包面试题

    由工作中演变而来的面试题 这是一个我工作当中的遇到的一个问题,似乎很有趣,就当做了一道题去面试,发现几乎没人能全部答对并说出原因,遂拿出来聊一聊吧. 先看题目代码: function fun(n,o) ...

  4. Js闭包常见三种用法

        Js闭包特性源于内部函数可以将外部函数的活动对象保存在自己的作用域链上,所以使内部函数的可以将外部函数的活动对象占为己有,可以在外部函数销毁时依然存有外部函数内的活动对象内容,这样做的好处是可 ...

  5. js闭包之初步理解( JavaScript closure)

    闭包一直是js中一个比较难于理解的东西,而平时用途又非常多,因此不得不对闭包进行必要的理解,现在来说说我对js闭包的理解. 要理解闭包,肯定是要先了解js的一个重要特性, 回想一下,那就是函数作用域, ...

  6. (原创)JS闭包看代码理解

    <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="C ...

  7. js闭包理解

    js闭包的作用是使函数外可以访问函数内部的变量,是通过 在函数内部 定义 访问函数内变量 的函数实现的,内部的一个函数产生一个闭包 function a() { var i=0; return fun ...

  8. js闭包理解实例小结

    Js闭包 闭包前要了解的知识  1. 函数作用域 (1).Js语言特殊之处在于函数内部可以直接读取全局变量 <script type="text/javascript"> ...

  9. Js闭包的用途

    本来想总结一点JavaScript中的闭包的一些用法,在查资料的时候发现了一篇很好的文章,就转过来收藏了,下面附上传送门: js闭包的用途 ---------sunlylorn 我们来看看闭包的用途. ...

  10. js闭包和ie内存泄露原理

    也议 js闭包和ie内存泄露原理 可以, 但小心使用. 闭包也许是 JS 中最有用的特性了. 有一份比较好的介绍闭包原理的文档. 有一点需要牢记, 闭包保留了一个指向它封闭作用域的指针, 所以, 在给 ...

随机推荐

  1. python函数str()避免类型错误

    python中当输出需要拼接字符串(char)和整数(int)时,需要用到str()函数 如果编写如下代码: age = 23 print("Happy " + age +&quo ...

  2. C语言已知单链表LA=(a1,a2,…,am)和LB=(b1,b2,…,bn),编写程序按以下规则将它们合并成一个单链表LC,

    LC=(a1,b1,-,am,bm,bm+1,-,bn),m<=n 或者 LC=(a1,b1,-,bn,an,an+1,-,am),m>n /* 开发者:慢蜗牛 开发时间:2020.6.1 ...

  3. Alist手动安装并使用教程

    一.官方文档及下载地址 1.官方文档 AList文档 2.下载地址 alist · GitHub 二.下载并解压文件 以Windows为例,下载指定版本的文件. 三.运行 1.解压文件并进入文件夹: ...

  4. Cannot resolve symbol ‘c:forEach‘;Cannot resolve taglib with uri http://java.sun.com/jsp/jstl/corede

    #### Cannot resolve taglib with uri http://java.sun.com/jsp/jstl/core:等类似,都是因为 在jsp页面中加入<%@ tagli ...

  5. serdes 常见并口位宽

    serdes主要完成串并转换功能.常见的并口位宽如下: GE/10/25GE/32GE        10/20/40/16/32位 50GE                              ...

  6. ElasticSearch 命令执行漏洞

    漏洞编号:CVE-2014-3120 漏洞详情 CVE编号 CVE-2014-3120 漏洞级别 中危6.8 标题 Elasticsearch默认配置允许动态脚本执行漏洞 披露时间 2014/07/2 ...

  7. MongoDB副本集的搭建和管理(高可用)

    使得mongodb具备自动故障转移.高可用.读写分离. 副本集默认情况下读写都只是通过主库,副节点只是备份数据而已,但是可以设置副节点允许读操作,这样就可以做成读写分离. 使用pymongo的时候也可 ...

  8. 数字孪生和GIS的融合能够为智慧水务带来什么帮助?

    数字孪生和地理信息系统(GIS)的融合在智慧水务领域有着重要的应用前景.让我们一起探讨数字孪生和GIS如何合作,为智慧水务系统带来了哪些帮助. GIS系统提供了准确的地理数据,包括水资源.管道网络.水 ...

  9. MyBatisPlus-使用步骤

    MyBatisPlus-使用步骤 第一步 引入maven坐标依赖 <dependency> <groupId>com.baomidou</groupId> < ...

  10. OSG嵌入QT的简明总结2

    正文 我之前在这篇博文<OSG嵌入QT的简明总结>中论述了OSG在QT中显示的可视化问题.其中提到官方提供的osgQt项目(地址:https://github.com/opensceneg ...