前几天在javaeye上看到一篇帖子:【JS优化系列】从一个计时器的写法探讨js多种实现方式的优劣,感觉楼主确实厉害,一个计时器能有那么多优雅的写法,而且全部是用的面向对象的思想,我花了整整一天时间把那些写法全部消化,也看了那些留下的评论,发现javaeye上面确实人才辈出,难怪我师兄把博客都从csdn搬到javaeye了。这里我把我发现的一个很奇怪的问题贴出来,希望有大牛能帮我解惑哈
帖子里的“代码六”是这样的:
function Timer(id){
this.id = id;
this.timer = null;
this.count = 0;
}
Timer.prototype = {
begin : function(count){
this.count = count;
this.show(this)();//注意这里不是Timer.show(this)();
this.timer = setInterval(this.show(this),1000);//注意这里不是Timer.show(this)();
},
show : function(obj){
return function(){
if(obj.count < 0){
document.getElementById(obj.id).innerHTML = "over";
clearInterval(obj.timer);
return ;
}
document.getElementById(obj.id).innerHTML = obj.count;
obj.count--;
}
}
}
这份代码没有任何问题,运行结果一切正常,可是,当我把“Timer.prototype={”这一行以及后面的移到Timer构造函数内部的时候,却发现在firebug下面提示:“t1.begin is not a function”这样的错误,代码如下:
<body>
<div id="time1">time1</div>
<div id="time2">time2</div>
</body>
<script>
function Timer(id){
this.id = id;
this.timer = null;
this.count = 0;
Timer.prototype = {
begin : function(count){
//alert(this);
this.count = count;
this.show(this)();//注意这里不是Timer.show(this)();
this.timer = setInterval(this.show(this),1000);//注意这里不是Timer.show(this)();
},
show : function(obj){
return function(){
if(obj.count < 0){
document.getElementById(obj.id).innerHTML = "over";
clearInterval(obj.timer);
return ;
}
document.getElementById(obj.id).innerHTML = obj.count;
obj.count--;
}
}
};
}
t1 = new Timer("time1");
t2 = new Timer("time2");
t1.begin(10);
t2.begin(10);
</script>
而且,看到“代码七”就发现,都用Timer.prototype.begin和Timer.prototype.show就算写在里面也能运行:
function Timer(id){
this.id = id;
this.timer = null;
this.count = 0;
Timer.prototype.begin = function(count){
this.count = count;
this.show(this)();//主要这里不是Timer.show(this)();
this.timer = setInterval(this.show(this),1000);//主要这里不是Timer.show(this)();
}
Timer.prototype.show = function(obj){
return function(){
if(obj.count < 0){
document.getElementById(obj.id).innerHTML = "over";
clearInterval(obj.timer);
return ;
}
document.getElementById(obj.id).innerHTML = obj.count;
obj.count--;
}
}
}
我不明白为什么会这么诡异,希望俺帖能起到抛砖引玉的效果。期待大牛们的精彩解答!
分享到:
相关推荐
Baseline.js, 一个简单的jQuery插件,用于恢复由奇怪图像大小抛出的垂直基线 Baseline.jsBaseline.js 是一个简单的jquery/zepto插件,用于恢复由奇数图像大小抛出的基线。像这样调用插件,将基线的高度作为变量传递...
JavaScript
a.type = “text/javascript”; a.src=path; var head=document.getElementsByTagName(“head”)[0]; head.appendChild(a); } include(“http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js”) 这样的脚本...
在使用ajax提交的时候将返回值赋给一个变量,无论怎么写都没法赋值,刚开始怀疑js有错但是ie没有反应过来,多次清缓存、部程序都没效果
场景 网络上已经存在了大量的有关 防抖 和 节流 的文章,为何吾辈还要再写一篇呢?事实上,防抖和节流,吾辈在...我们先实现一个简单的去抖函数 function debounce(delay, action) { let tId return function(...a
vue项目在开发环境下,让项目运行起来,是通过npm run dev命令,原理是在本地搭建了一个express服务器。 但是在服务器上就不是这样的,必须要通npm run build命令来对整个项目进行打包,打包后会在项目目录下生成...
SWFUpload是一个客户端文件上传工具,最初由Vinterwebb.se开发,它通过整合Flash与JavaScript技术为WEB开发者提供了一个具有丰富功能继而超越传统标签的文件上传模式。 [编辑本段]SWFUpload的主要特点 * 可以...
转换.js Transform.js 是一个用于将 3D 点投影到 2D 空间的小型 JavaScript 库。 Transform.js不是3D 渲染器。 不要尝试渲染网格,因为如果您希望深度映射起作用,您会得到奇怪的结果。 线和点都很好。
奇怪功能的集合 :file_folder: 输出包中的主要源代码为: @dr-js/core/library :可直接使用,请使用require() / exports.*=并具有Dr.browser.js @dr-js/core/module :用于重新打包,保持import / export和...
现场语言 field语言实际上很奇怪,这很多来自我。 稍后我必须解释。 这是field解释器的设计尖峰。
一个用于使用属性及其值而不是类来设置 HTML 元素样式的 javascript 库。 基于用于 CSS 的AMCSS属性模块 - 规范 。 ** 适用于所有支持属性和 ~= 选择器的浏览器 ** 安装 [removed][removed] 在不支持 Array....
这三个事件都都有一个 timeStamp 的属性,查看 timeStamp 属性,可以看到顺序是 touchstart -> touchmove ->touchmove -> … -> touchmove ->touchend。 下面是一段代码实例: document.getElementsByTagName_r('...
微信小程序开发过程中出现错误,经过一番思考解决此问题,这里给大家提醒下!...感觉很奇怪,然后忽然想起前几天新建了一个一样的项目名称,所以才出现上面的报错。 于是重新命名一个,就没有这个问
rawViz.js 是一个可重用的 JavaScript 库,用于在浏览器中创建粗略/手绘样式的图表,基于 D3v5、roughjs 和 handy。 为什么? 在沟通目标是显示意图或一般性而非绝对精确性的情况下使用这些图表。 或者只是因为...
这是一个实验,结果是 ,一个更好的纯 PHP 编译器。 也有更好的脚本来完成这项工作,就像所有的 JavaScript 构建工具一样。 请记住这一点 :) !... 这看起来很奇怪,但很有意义,因为检查文件中的更改比简单
小K.二十几岁,刚刚转到一家软件咨询公司上班。刚刚进来也没有被安排什么事情做,就到处逛逛。...我在前一个公司都写了两年了.去给他们露两手吧。”小K面露微笑。和团队的老大Mike说了一下.小K就算正式入伙了
js-钢琴一个简单的 Javascript 钢琴。 特征: 28 键,A2-C5 半音。 16 位、44.1 KHz 施坦威采样。 每键延音,加上延音踏板。 100% HTML/Javascript。 已知的问题: 密钥翻转。 基本的 USB 键盘有一个物理限制,您...
奴才 一组奇怪的 JavaScript 小助手