这段js代码得节约你多少时间(2)


Function.prototype.bind = function (target) {
var self = this;
return function () {
return self.apply(target, arguments); //这里的arguments根本传不进来
}
}
var a = function () {
console.log(arguments.length); //这样bind的话,arguments参数失效
//arguments.length=0.
console.log(this.key1);
};
var b = {
key1: "value1"
};
a.bind(b, [1, 2], 3)(); //从这里可以看出,期望的arguments.length=2
//这也是我为什么苦口婆心的操作arguments参数
//我知道这里大部分人都会觉得对的,但是你错了,17楼的同学你还得在思考下


不带注释的源码,

复制代码 代码如下:


(function () {
var proxy = function (fn, target) {
var proxy = function () {
if (2 < arguments.length) {
var privateArgs = Array.prototype.slice.call(arguments, 2);
return function () {
var args = Array.prototype.slice.call(arguments);
Array.prototype.unshift.apply(args,privateArgs);
return fn.apply(target, args);
}
}
return function () {
return fn.apply(target, arguments);
}
}
return proxy.apply(null, arguments);
};
/*支持原生的使用原生的*/
Function.prototype.bind = Function.prototype.bind ||
function (target) {
if (1 < arguments.length) {
var args = Array.prototype.slice.call(arguments, 1);
args.unshift(this, target);
return proxy.apply(null, args);
}
return proxy(this, target);
};
})();




这篇文章是接着上篇文章讲得,我这个讲个详细的列子,如果没看就点
先看列子,本博客没时间去搞华丽的布局,只求朴实的代码,只为js代码爱好者使用

复制代码 代码如下:


var Mouse = function () {
if (document.addEventListener) {
document.addEventListener('mousemove', this.move.bind(this,1,2,[3,4]));
} else if (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的输出结果很好的解释了上文代码,不懂得请结合新给出得列子配合理解.

复制代码 代码如下:


var privateArgs = Array.prototype.slice.call(arguments, 2);
//私有的参数,表示代理者的参数,这里代表1,2,[3,4]
return function () {
var args = Array.prototype.slice.call(arguments);
//这里的参数,代表被代理者的参数,这里如事件函数内部的e
Array.prototype.unshift.apply(args, privateArgs);
//这里是将两者的参数合并在一起,然后私有参数在前,目的也是为了和原生的参数顺序一致
return fn.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代码的精髓.

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wdjjfg.html