这段js代码得节约你多少时间
2023-06-13 09:14:31 时间
1.应用案例:
复制代码代码如下:
varMouse=function(){
//Look!nothat=this!
this.position=[0,0];
if(document.addEventListener){
document.addEventListener("mousemove",?);//this.move?
}elseif(document.attachEvent){
document.attachEvent("onmousemove",?);//this.move?怎么放进去
}
};
Mouse.prototype.move=function(arg1,arg2,event){
event=window.event||event;
varx=event.pageX||event.offsetX,
y=event.pageY||event.offsetY;
this.position=position=[x,y];
this.log(arg1,arg2);
};
Mouse.prototype.log=function(arg1,arg2){
console.log(arg1+","+arg2);
console.log(this.position);
};
newMouse();
上面你知道"?"号那里要干嘛了吗?我想给document的mousemove绑定我的move方法,但是遇到难题了,这样的话,Mouse.prototype.move
里的this就不会指向Mouse的对象,相信大家经常碰到这种问题.也许你早知道了怎么解决,但是有更快更简单的方法吗?答案是:
Function.prototype.bind()这个神奇的玩意,但是ie678都不支持,一般现代浏览器都支持了,我们接下来要做的就是模仿他,
这么好的方法当然要模仿它,怎么模仿见下面nothing的原创方法
(function(){
varproxy=function(fn,target){
varproxy=function(){
if(2<arguments.length){//存在被代理的函数有参数的时候
varprivateArgs=Array.prototype.slice.call(arguments,2);
//从第二个开始取出来,[this,绑定的对象,参数列表]
returnfunction(){
varargs=Array.prototype.slice.call(arguments);
-->这里的arguments与外面的不是同一个,这个是被代理的函数内部的arguments对象,
比如这里的move函数的arguments[0]=[objectEvent]就是这个事件内部的e参数
Array.prototype.unshift.apply(args,privateArgs);
-->这里在加上传进来的参数,就实现了,和原生bind一样的参数形式
//->而且这里是把私有的参数放到前面的比如a=newMouse();a.move(1,2);
//如果这个move方法没有参数,意思就是prototype.move=fn(){arguments},
//而我传进来了参数,参数的arguments.length=3,
//arguments[0]=1,arguments[1]=2,arguments[2]=[objectevent].
returnfn.apply(target,args);
}
//这里之所以搞复杂了,是因为,在被代理的函数可以直接访问arguments,比如我不给被代理的函数传参数,而直接使用
//这样这个arguments就会包含与原生Function.prototype.bind的arguments一样的对象,
//这里代码深奥,是因为你没理解这里原生的bind里面的arguments是什么,知道了,就知道为什么绑定我自己的arguments
//做这么多,主要目的就是使你被代理的函数内部的arguments与function.prototype.bind里的arguments对象包含的东西一致
}
returnfunction(){
returnfn.apply(target,arguments);
}
}
returnproxy.apply(null,arguments);
};
/*支持原生的使用原生的*/
Function.prototype.bind=Function.prototype.bind||
function(target){//这里的this指代要被代理的函数
if(1<arguments.length){
varargs=Array.prototype.slice.call(arguments,1);//取出参数列表
args.unshift(this,target);//这个args最终变成了[this,绑定的对象,参数列表]
returnproxy.apply(null,args);
--如果直接proxy(args),麻烦来了,args成了proxy函数的一个参数,就会报错,
其实这里主要是分开任务处理,proxy只关心代理和参数是怎么传给proxy,如果被代理的没参数,直接;
returnproxy(this,target)-->returnfn.apply(target,arguments);就是17楼的那个答案
-->估计大家会跟17楼犯一样的错误,这里之所以这么复杂的操作arguments对象,只是为了能保证传进proxy函数中,保证arguments对象不失效
}
returnproxy(this,target);
};
})();
以上代码为什么我要一直return回来代理,因为这样你才能这样调用this.move.bind(this,1,2)()然后这里会立即执行函数!
有了以上代码,我们就可以轻松的实现了"?"号这里要写什么代码了,^_^,简单吧
if(document.addEventListener){
document.addEventListener("mousemove",this.move.bind(this,1,2));
}elseif(document.attachEvent){
document.attachEvent("onmousemove",this.move.bind(this,1,2));
}
是不是以后凡是碰到要添加事件,然后调用的方法的this又想指向其他对象,这样是不是很简单呢..
看到大家对以上代码有点难理解,来个简单点得
vara=function(){
console.log(arguments[0]);//1
console.log(arguments[1]);//2
console.log(this.key1);
//这样绑定参数的话,我的参数列出来才能和原生的bind一样,就这么简单,
};
varb={
key1:"value1"
};
a.bind(b,1,2)();
反驳17楼同学的代码错误,我想这是很多人会犯的错误,代码如下
Function.prototype.bind=function(target){
varself=this;
returnfunction(){
returnself.apply(target,arguments);//这里的arguments根本传不进来
}
}
vara=function(){
console.log(arguments.length);//这样bind的话,arguments参数失效
//arguments.length=0.
console.log(this.key1);
};
varb={
key1:"value1"
};
a.bind(b,[1,2],3)();//从这里可以看出,期望的arguments.length=2
//这也是我为什么苦口婆心的操作arguments参数
//我知道这里大部分人都会觉得对的,但是你错了,17楼的同学你还得在思考下
不带注释的源码,
(function(){
varproxy=function(fn,target){
varproxy=function(){
if(2<arguments.length){
varprivateArgs=Array.prototype.slice.call(arguments,2);
returnfunction(){
varargs=Array.prototype.slice.call(arguments);
Array.prototype.unshift.apply(args,privateArgs);
returnfn.apply(target,args);
}
}
returnfunction(){
returnfn.apply(target,arguments);
}
}
returnproxy.apply(null,arguments);
};
/*支持原生的使用原生的*/
Function.prototype.bind=Function.prototype.bind||
function(target){
if(1<arguments.length){
varargs=Array.prototype.slice.call(arguments,1);
args.unshift(this,target);
returnproxy.apply(null,args);
}
returnproxy(this,target);
};
})();
这篇文章是接着上篇文章讲得,我这个讲个详细的列子,如果没看就点
先看列子,本博客没时间去搞华丽的布局,只求朴实的代码,只为js代码爱好者使用
varMouse=function(){
if(document.addEventListener){
document.addEventListener("mousemove",this.move.bind(this,1,2,[3,4]));
}elseif(document.attachEvent){
document.attachEvent("onmousemove",this.move.bind(this,1,2,[3,4]));
}
};
Mouse.prototype.move=function(){
console.log(arguments[arguments.length-1].clientX);
};
这里的arguments的输出结果很好的解释了上文代码,不懂得请结合新给出得列子配合理解.
varprivateArgs=Array.prototype.slice.call(arguments,2);
//私有的参数,表示代理者的参数,这里代表1,2,[3,4]
returnfunction(){
varargs=Array.prototype.slice.call(arguments);
//这里的参数,代表被代理者的参数,这里如事件函数内部的e
Array.prototype.unshift.apply(args,privateArgs);
//这里是将两者的参数合并在一起,然后私有参数在前,目的也是为了和原生的参数顺序一致
returnfn.apply(target,args);
//将合并后的参数这里包括1,2,[3,4]e传进去,并apply
}
好,到了这里,你会发现一个不错的js技巧,就是不用兼容处理e=window.event||e,直接使用arguments[arguments.length-1]就能兼容代表
所有浏览器的事件e对象,节省了不少的代码与思考的时间,
之所以写出这段代码,是希望大家对js代码有个真正的理解,知道js的真正魅力在哪里,如果了真看懂了此文,至少你知道了arguments到底是
怎么回事了,本博客破烂无比,只有朴实的代码,适合js代码爱好者学习.
其实真正的js魅力何止这点.有了以上的实例加上说明,相信你也应该了解得差不多了,不懂得多demo几下就知道了.
一个js爱好者,会时不时贴出一些较为新鲜的代码供大家学习,本博客的目的就是为了共同学习js代码的精髓.
相关文章
- 几个js实用代码——动态加载时间、滚动条优化、两个数组转化为map对象等
- JS跳转代码_javascript跳转代码
- JS距离2022过年倒计时代码
- QQ客服 右侧悬浮JS实现代码详解编程语言
- js中eval详解编程语言
- js实现用滚动条来放大缩小图片的代码
- js双色时间效果代码
- 用js实现页面显示当前日期和时间的代码
- js判断变量是否空值的代码
- jquery.AutoComplete.js中文修正版(支持firefox)
- js下通过prototype扩展实现indexOf的代码
- js禁止小键盘输入数字功能代码
- js两行代码按指定格式输出日期时间
- 把时间戳转换为日期格式的js代码
- js按指定格式显示日期时间的样式代码
- java与js代码互调示例代码
- IE下JS读取xml文件示例代码
- JS毫秒转时间示例代码
- js判断选择时间不能小于当前时间的示例代码
- js动态添加事件并可传参数示例代码
- js计算两个时间之间天数差的实例代码
- JS保留两位小数四舍五入函数的小例子
- JS控件ASP.NET的treeview控件全选或者取消(示例代码)
- 页面实时更新时间的JS实例代码
- js完美的div拖拽实例代码
- JS图片无缝、平滑滚动代码