- 浏览: 316400 次
- 性别:
- 来自: 广州
最新评论
-
ganbo:
我也遇到了,非常感谢。
实体类注解错误:Could not determine type for: java.util.List -
low_profile:
太感谢了,,,接手别人的项目/..代码风格不同 坑死我了 ...
实体类注解错误:Could not determine type for: java.util.List -
apang:
2016年6月15日 14:05:02,非常感谢,解决我的问题 ...
实体类注解错误:Could not determine type for: java.util.List -
liveabc:
你好,能发送一份代码不? liveabc@163.com 谢谢 ...
单点登录cas与权限管理框架shiro集成-spring项目方式 . -
zqb666kkk:
请问有示例源码吗
单点登录cas与权限管理框架shiro集成-spring项目方式 .
关于javascript的apply和call函数
- 博客分类:
- view
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.
}
<script type="text/javascript"></script>
发表评论
-
jquery获得select option的值 和对select option的操作
2012-06-09 21:33 1331获取Select : 获取select 选中的 t ... -
JQuery设置select控件只读
2012-06-09 17:33 16724select控件是一个特别的控件,没有readOnly属性 ... -
IE浏览器上传文件时本地路径变成”C:\fakepath\”的问题
2011-11-15 12:03 5525//判断浏览器类型 2 var is ... -
用VML画图(一些基本的矢量图)
2011-08-03 22:53 1185注:其中所有的left:top:都是针对图左上角的,比如圆,他 ... -
数据类型和Json格式
2011-07-30 20:02 8361. 前几天,我才知道有一种简化的数据交换格式,叫做ya ... -
freemark中split()的用法
2011-06-21 16:31 1112<#assign tvalue="my,nam ... -
限制文本域(textarea)输入字符数
2011-06-10 18:28 728以下为限制用户在文本域中输入的字符为100以内: 写道 & ... -
Velocity手册
2011-05-07 13:30 808Velocity是什么?Velocity是 ... -
Velocity的学习笔记
2011-05-07 13:28 1185简要 References begin with $ and ... -
7个非常优秀的高质量图标搜索引擎
2011-04-11 16:05 9661.http://www.iconfinder.com/ ... -
FusionCharts参数设置
2011-03-28 11:48 1487FusionCharts 参数设置功能特性animation ... -
freemarker以分号或垂直线隔开而循环
2011-03-10 19:56 1635<#if areas?exists & ... -
好网址收藏
2011-02-26 17:19 950My97日期控件:http://www.my97.net/dp ... -
Javascript监听网页刷新与关闭事件
2011-02-21 10:18 2232<script language="jav ... -
关于一个javascript的replaceAll()
2011-02-18 12:14 1092javascript本身没有replaceAll()这个方法, ... -
Document对象内容集合
2011-01-20 11:54 1049document 文挡对象 - J ... -
FreeMark内置函数使用说明
2011-01-11 09:47 982在我们应用Freemarker过程中,经常会操作例如字符串,数 ... -
freemarker语法2
2011-01-07 17:21 6278最常用的概念1、 scalars:存储单值 字符串:简单文本 ... -
window.location.target控制问题
2011-01-05 11:28 11917location对象没有target属性.用js遍历所有的a, ... -
div属性
2011-01-03 11:23 1095div属性 div属性 color : #9999 ...
相关推荐
JavaScript中的apply和call函数详解_.docx
JavaScript函数之call、apply以及bind方法案例详解 总结 1、相同点 2、区别 call() 方法 /* 正常模式 */ let obj = { sum(a, b) { console.log(this) return a + b } } // 执行 sum 函数的 apply、bind...
每个JavaScript函数都会有很多附属的(attached)方法,包括toString()、call()以及apply()。听起来,你是否会感到奇怪,一个函数可能会有属于它自己的方法,但是记住,JavaScript中的每个函数都是一个对象。看一下 ...
主要介绍了JavaScript中函数(Function)的apply与call理解,本文讲解了JavaScript函数调用分为4中模式以及通过apply和call实现扩展和继承两方面,需要的朋友可以参考下
一些简单的Javascript操作中较少会用到call和apply函数,在另外一些较大型的操作中,如web应用开发,js框架开发中可能会经常遇到这两个函数。关于这两个函数的解释,网上的资料也很多,但是本人认为很多资料要么...
apply和call,它们的作用都是将函数绑定到另外一个对象上去运行,两者仅在定义参数的方式有所区别: Function.prototype.apply(thisArg,argArray); Function.prototype.call(thisArg[,arg1[,arg2…]]); 从函数原型...
一.call函数 a.call(b); 简单的理解:把a对象的方法应用到b对象上(a里如果有this,会指向b) call()的用法:用在函数上面 var Dog=function(){ this.name="汪星人"; this.shout=function(){ alert(this.name&...
js代码-JavaScript的call/apply/bind函数实现
主要介绍了javascript基于原型链的继承及call和apply函数用法,结合实例形式较为详细的分析了javascript中继承的概念、创建方法以及call和apply函数的功能与使用技巧,需要的朋友可以参考下
在Javascript中,Function是一种对象。Function对象中的this指向决定于函数被调用的方式,使用apply,call 与 bind 均可以改变函数对象中this的指向。
本文实例分析了JavaScript函数apply()和call()用法与异同。分享给大家供大家参考,具体如下: JavaScript的函数是对象,因此有属性和方法。每个函数都包含两个属性:length和prototype,每个函数都包含两个非继承而...
这篇文章主要介绍了JavaScript函数Call、Apply原理实例解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 一、方法重用 使用 call() 方法,您可以编写能够在...
在谈论JavaScript中apply、call和bind这三兄弟之前,我想先说下,函数的调用方式有哪些: •作为函数 •作为方法 •作为构造函数 •通过它们的call()和apply()方法间接调用 前面的三种调用方法,我们都知道且不...
在 javascript 中,call 和 apply 都是为了改变某个函数运行时的上下文(context)而存在的,一般来说,this总是指向调用某个方法的对象,但是使用call()和apply()方法时,就会改变this的指向 语法: apply() 接收两...
主要介绍了从JQuery源码分析JavaScript函数的apply方法与call方法,本文结合JQuery源码和js高级程序设计再次探究apply方法与call方法,需要的朋友可以参考下
目录 一、 函数内 this 的指向1、普通函数2、构造函数3、对象方法4、事件绑定方法5、定时器函数6、立即执行函数二、改变函数内部 this 指向1、call 方法2、apply 方法3、bind 方法三、call apply bind 总结1、...
简单的说就是改变函数执行的上下文,... 这两个方法通常被用来类的继承和回调函数: 作用一、类的继承: 先来看这个例子: 代码如下: function Person(name,age){ this.name = name; this.age=age; this.alertName = f