- 浏览: 591141 次
文章分类
- 全部博客 (174)
- Core Java 学习 (6)
- Hibernate 学习 (3)
- Struts 学习 (3)
- Spring 学习 (9)
- EJB 学习 (0)
- 设计模式 (0)
- Oracle 学习 (6)
- JRuby (0)
- PHP (18)
- MySql (7)
- Apache (6)
- Informix (2)
- JSTL (1)
- CSS+HTML (8)
- Ajax (2)
- javaScript (16)
- reverse Ajax (1)
- Discuz (7)
- 网站 (11)
- SEO (5)
- Linux (4)
- ecshop (1)
- 电子商务 (1)
- 文档在线浏览 (18)
- 服务器技术 (10)
- flex (17)
- 用户体验 (1)
- java (1)
- flex+blazeDS (1)
- tomcat (1)
- 开发管理 (1)
最新评论
-
niaoqq1:
真坑爹,全是中文字符,复制全部报错!
<c:forEach 详解 -
jhys7s8jd:
pdf打印机下载http://www.onlinedown.n ...
命令行下转换word文档成PDF -
海豚12315:
flashPaper读取磁盘上的文件路径,
最好是放到某个系统 ...
在线文档阅读实现的解决方案 -
八月约克:
火狐不支持这个东东
Scripting.Dictionary的使用 -
longgol:
有一问:怎么通过flashPaper读取磁盘上的文件路径呢。我 ...
在线文档阅读实现的解决方案
1、关于javascript的apply和call函数
prototype.js中用了大量的apply和call函数,不注意会造成理解偏差。
官方解释:应用某一对象的一个方法,用另一个对象替换当前对象。
apply与call的区别是第二个参数不同。apply是 数组或者arguments 对象。而call是逗号隔开的任何类型。
apply,call方法最让人混淆的地方也是apply,call的特色。但最好不要滥用。
能改变调用函数的对象。如下例,函数中用到this关键字,这时候this代表的是apply,call函数的第一个参数。
<script src="prototype1.3.1.js"></script>
<input type="text" id="myText" value="input text">
<script>
function Obj(){
this.value="对象!";
}
var value="global 变量";
function Fun1(){
alert(this.value);
}
window.Fun1();
Fun1.apply(window);
Fun1.apply($('myText'));
Fun1.apply(new Obj());
</script>
2、关于闭包
prototype.js在Class.create,bind等中用到javascript的闭包特色。但整体上prototype.js对于强大的闭包特性用的不多。大家可以参阅我翻译的篇文章了解闭包。
3、让我比较反感的两个方法
(1)
var Class = {
create: function() {
return function() {
this.initialize.apply(this, arguments);
}
}
}
很讨厌用别的语言的风格来写javascript。用这个方法构造自定义类 并没有觉得有多方便,减少代码行数,只会让人难理解,多定义一个initialize方法。
其实讨厌这条有些牵强,不过修改Object的原型对象就有点过分了。
(2)Object.prototype.extend
先不过你取个extend的名字会让熟悉java的人引起的歧义。修改Object的prototype就说不过去了。不知道作者是怎么考虑的。当你for in循环对象是,麻烦就来了。可能有人会问你for in干吗。 我一个项目中既用了DWR,也用了prototype.js,dwr返回的javascript对象都多了个exetend属性,还得特殊处理。
以前我比较过dojo和prototype.js中继承的实现,现在我明白个道理。对于javascript这种没有静态类型检查,语法宽松的语言来讲,如果你选择了某个js类库,那你也必须适应作者写javascript的风格。prototype.js的作者对extend的使用炉火纯青,如果我们不当它只是个属性拷贝的函数的话,多读读prototype.js的代码是好的。
4、关于函数的绑定
类库提供了Function.prototype.bind Function.prototype.bindAsEventListener两个方法。首先我们从概念上解释一个这两个方法。
任何一个函数都可以调用这两个方法;参数的是javascript对象或网页上元素对象;返回类型是个函数对象。
本来我就是个函数,返回还是函数,到这两个函数有什么不同呢。看实现代码,关键还是apply\call函数的代码。其实这里只是转化了一下方法调用的对象。
<script src="prototype1.3.1.js"></script>
<input type=checkbox id=myChk name="asf" value=1> Test
<script>
var CheckboxWatcher = Class.create();
CheckboxWatcher.prototype = {
initialize: function(chkBox, message) {
this.chkBox = $(chkBox);
this.message = message;
this.chkBox.onclick = this.showMessage.bindAsEventListener(this);
},
showMessage: function(evt) {
alert(this.message + ' (' + evt.type + ')');
}
};
new CheckboxWatcher('myChk','message!!!!');
//$('myChk').onclick=function(){};
</script>
这是 https://compdoc2cn.dev.java.net/ 上举的例子,个人感觉没什么意思,反而让我对bind,bindAsEventListener有些反感。(javascript就是这样,明明大家都知道的语法,但写出来的代码差别确很大)
看下面代码:
<script src="prototype1.3.1.js"></script>
<input type=checkbox id=myChk name="chk" value=1> Test
<script>
function Class(){
this.name="class";
}
Class.prototype.getName=function(){
alert(this.name);
}
var obj=new Class();
//$('myChk').onclick=obj.getName;
$('myChk').onclick=obj.getName.bind(obj);
//$('myChk').onclick=obj.getName.bind($('myChk'));
</script>
从上面代码可以看出bind/bindAsEventListener只是包装了一下apply/call方法,改变方法的调用对象。如例子,你可以把obj.getName方法转化成任何对象调用,并且把方法让表单元素触发。(bind和bindAsEventListener之间只是返回函数的参数不同)
这两个方法也可以用在对象之间的方法重用,实现类似继承方法的概念。看以下代码,其实是比较无聊的。
<script src="prototype1.3.1.js"></script>
<script>
function Class1(name){
this.name=name;
}
Class1.prototype.getName=function(){
alert(this.name);
}
function Class2(name){
this.name=name;
this.getName=Class1.prototype.getName.bind(this);
}
var obj1=new Class2("yql");
obj1.getName();
var obj2=new Object();
obj2.name="zkj";
obj2.fun=Class1.prototype.getName.bind(obj2);
obj2.fun();
</script>
我从来没读过prototype.js的扩展项目代码,也不知道bind..的最佳实践,一起挖掘吧。但你绝对不要把bind/bindAsEventListener从绑定的词义上来理解,可能会让你更加迷惑。从apply/call理解本质。应用某一对象的一个方法,用另一个对象替换当前对象。
5、关于事件的注册
<script src="prototype1.3.1.js"></script>
<input type=checkbox id=myChk name="chk" value=1> Test
<script>
Event.observe(myChk, 'click', showMessage, false);
//$('myChk').onclick=showMessage;
//$('myChk').onclick=showMessage.bind();
$('myChk').onclick=showMessage.bind($('myChk'));
function showMessage() {
alert(this.value);
}
</script>
执行上面代码,你就能明白Event.observe与bind/bindAsEventListener之间的区别:
(1) 显然Event.observe有限制,只能处理简单的函数,并函数中不能有this之类的东西。
(2)Event.observe内部用到addEventListener/attachEvent。能把多个函数加到一个触发事件(window.onload)。bind是覆盖。
6、关于事件监听最佳实践
很显然prototype.js提供的事件注册方法不是很完善。那看看dojo的时间注册吧(中文版),更加复杂,估计很多人像我一样,对于dojo暂时持观望态度。
如果你看过的前篇关于闭包的介绍,可能见过以下代码。
看以下代码前我想表述一个观点,任何网页中元素,浏览器都会为你创建一个对象(见)。(我觉得)这些对象与你建立javascript对象区别是它们有事件监听,会响应鼠标键盘的事件。如果你用了以下代码,那么把事件监听代码很好的转化到你的javascript代码中。
function associateObjWithEvent(obj, methodName){
return (function(e){
e = e||window.event;
return obj[methodName](e, this);
});
}
function DhtmlObject(elementId){
var el = getElementWithId(elementId);
if(el){
el.onclick = associateObjWithEvent(this, "doOnClick");
el.onmouseover = associateObjWithEvent(this, "doMouseOver");
el.onmouseout = associateObjWithEvent(this, "doMouseOut");
}
}
DhtmlObject.prototype.doOnClick = function(event, element){
... // doOnClick method body.
}
DhtmlObject.prototype.doMouseOver = function(event, element){
... // doMouseOver method body.
}
DhtmlObject.prototype.doMouseOut = function(event, element){
... // doMouseOut method body.
}
有时间我想用以上思想实现一个网页浮动框拖拉的代码(其实已经有很多了),待续........
发表评论
-
JS中对象中的公有方法、私有方法、特权方法
2012-05-26 18:25 4752了解如何创建一个对象的时候,我们就需要给这个对象增加方法 ... -
注意细节:Javascript中的变量作用域
2012-05-21 03:04 934先看一下这段Javascript脚本代码: 1< ... -
JavaScript中对象的构造方法
2012-03-07 13:03 990第一种方式: 工厂方法 能创建并返回特定类型的对象的工厂 ... -
函数中定义 var self = this 的作用
2011-12-21 16:19 3449function Class1(){ ... -
ie6下的js调试工具companion.js
2010-12-03 15:28 1473做web开发的朋友都清楚,js程序的调试是相当郁闷的,因为 ... -
gb2312转换utf-8 utf-8转换gb2312 javascript urlencode解码 Hex Asc Chr
2010-06-23 16:44 3981在我的前一篇文章里面已经实现了用javascript给urle ... -
avascript判断浏览器和操作系统类型
2009-11-07 00:35 840var ua = navigator.userAgent. ... -
JS eval()函数
2009-08-27 23:30 1542eval()函数 Jav ... -
几种js方法调用
2009-08-25 23:35 949// 第一种var i = function() { re ... -
js计算字符个数,包括中文
2009-07-14 09:55 3908<SCRIPT language="JavaS ... -
揭开正则表达式的神秘面纱
2009-03-25 14:16 965引言 正则表达式(regular expres ... -
js判断浏览器版本
2009-02-07 17:19 1384function getIEVersion() { i ... -
JS获取表格单元格
2009-02-04 21:00 2486var ccell = document.getE ... -
javascript---window.location和window.open
2008-11-20 18:57 4422window.open 用来打开新窗口 window.loca ... -
setInterval()、setTimeout()的区别与停止
2008-11-20 18:26 1593区别:setTimeout(表达式,延时时间);//只执行一次 ...
相关推荐
在JavaScript中,`apply`和`call`是两种非常重要的函数调用方式,它们都用于改变函数内部`this`的指向以及动态传递参数。这两者的主要区别在于参数的传递方式。 首先,`this`在JavaScript中是一个关键字,它在不同...
在JavaScript中,`call`和`apply`是两个非常重要的方法,它们都用于改变函数调用时的上下文(即`this`的值),并且可以灵活地传递参数。本篇文章将深入探讨这两个方法的用法、区别以及实际应用场景。 `call`方法...
在JavaScript中,apply和call是两个非常重要的函数,它们允许开发者在调用函数时指定函数体内this的值。了解apply和call的用法对于深入掌握JavaScript编程是非常有帮助的。首先,我们需要明白在JavaScript中,函数也...
new、apply和call等特性使得JavaScript的函数和对象之间的关系更加灵活,但也带来了理解和调试代码的挑战。因此,深入理解this、new、apply和call的原理和使用方法,对于提升JavaScript编程能力至关重要。
JavaScript中的call、apply和bind方法都是用来改变函数调用时的上下文(即this值)以及传递参数。它们之间的相同点在于,都能够指定函数执行时的this对象,并且都能接收参数。不同点在于它们的调用方式和执行时机。 ...
在JavaScript编程中,`apply`、`call`和`bind`这三个方法被广泛用于改变函数内部`this`的指向,这对于理解和编写复杂的JavaScript代码至关重要。虽然它们的功能相似,但在具体用法上存在一定的差异。 #### 相同之处...
### 理解JavaScript中的`caller`...综上所述,理解`caller`、`callee`、`call`、`apply`以及`arguments`对象在JavaScript编程中至关重要,它们不仅增强了函数的灵活性和复用性,还提供了深入分析和调试代码的强大工具。
首先,我们需要明确JavaScript中的函数实际上是一个对象,其拥有自己的方法,比如apply和call。这两个方法允许开发者显式地指定函数内this的指向,并传入参数来执行函数。在JQuery源码中,我们可以看到apply和call...
bind 方法是 ES5 新增的一个方法,它的传参和 call 类似,但又和 call/apply 有着显著的不同,即调用 call 或 apply 都会自动执行对应的函数,而 bind 不会执行对应的函数,只是返回了对函数的引用。 粗略一看,...
主要介绍了JavaScript中函数(Function)的apply与call理解,本文讲解了JavaScript函数调用分为4中模式以及通过apply和call实现扩展和继承两方面,需要的朋友可以参考下
在JavaScript中,`apply()`和`call()`方法都是用于改变函数调用时的上下文(即`this`关键字指向的对象)以及传递参数。这两个方法都隶属于`Function.prototype`,因此所有函数实例都拥有这两个方法。它们的主要作用...
总结来说,apply、call和bind是JavaScript中非常重要的函数方法,它们提供了控制函数上下文的能力,无论是直接调用函数、扩展数组元素,还是改变对象的方法调用,这些方法都是不可或缺的工具。掌握它们的用法,能够...
本文将详细介绍 JavaScript 中的数组函数、数字函数、字符串函数、表单验证、HashMap、堆栈、日期函数、call 函数等。 数组函数 JavaScript 中的数组函数提供了多种方法来操作数组,包括: * `push()`: 将参数...
在JavaScript中,`call()` 和 `apply()` 是两种非常重要的函数调用方式,它们都用于改变函数内部 `this` 的指向。尽管它们的作用相似,但使用方式略有不同。 `call()` 方法允许你调用一个函数,并指定这个函数的 `...
本文将详细解释JavaScript中call(), apply(), 和 bind() 方法的作用、语法以及使用场景,并且会探讨回调函数的使用,帮助理解这些概念在实际编程中的应用。 首先,我们来探讨call() 和 apply() 方法。这两个方法都...
在JavaScript中,`apply`和`call`方法都是Function对象的内置方法,它们的主要作用是改变函数调用时的上下文(即`this`值),并允许我们在不同对象上执行同一方法,从而实现方法的借用。这两者在功能上相似,但参数...
通过上述介绍可以看出,`call`和`apply`在JavaScript编程中是非常实用的工具,能够帮助开发者灵活地改变函数的执行上下文,从而解决很多实际问题。在使用时,可以根据具体的参数情况选择使用`call`还是`apply`,以便...
apply和call,它们的作用都是将函数绑定到另外一个对象上去运行,两者仅在定义参数的方式有所区别: Function.prototype.apply(thisArg,argArray); Function.prototype.call(thisArg[,arg1[,arg2…]]); 从函数原型...
这篇文章将深入探讨四个关键概念:caller、callee、call和apply,它们都是JavaScript函数操作的核心部分,对于理解和使用高级JavaScript编程至关重要。 首先,我们来了解`caller`和`callee`。在JavaScript的函数...