欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

這段js代碼得節(jié)約你多少時間

 更新時間：2011年12月20日 03:01:11   作者：  
這段js代碼得節(jié)約你多少時間，學習js的朋友可以參考下。
1.應用案例:
復制代碼 代碼如下:

var Mouse = function () {
// Look! no that = this!
this.position = [0, 0];
if (document.addEventListener) {
document.addEventListener('mousemove', ?); //this.move?
} else if (document.attachEvent) {
document.attachEvent("onmousemove", ?); //this.move?怎么放進去
}
};
Mouse.prototype.move = function (arg1,arg2,event) {
event = window.event || event;
var x = 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);
};
new Mouse();

上面你知道'?'號那里要干嘛了嗎?我想給document的mousemove綁定我的move方法,但是遇到難題了,這樣的話,Mouse.prototype.move
里的this就不會指向Mouse的對象,相信大家經(jīng)常碰到這種問題.也許你早知道了怎么解決,但是有更快更簡單的方法嗎?答案是:
Function.prototype.bind()這個神奇的玩意,但是ie6 7 8都不支持,一般現(xiàn)代瀏覽器都支持了,我們接下來要做的就是模仿他,
這么好的方法當然要模仿它,怎么模仿見下面nothing的原創(chuàng)方法
復制代碼 代碼如下:

(function () {
var proxy = function (fn, target) {
var proxy = function () {
if (2 < arguments.length) { //存在被代理的函數(shù)有參數(shù)的時候
var privateArgs = Array.prototype.slice.call(arguments, 2);
//從第二個開始取出來,[this,綁定的對象,參數(shù)列表]
return function () {
var args = Array.prototype.slice.call(arguments);
-->這里的arguments與外面的不是同一個,這個是被代理的函數(shù)內(nèi)部的arguments對象,
比如這里的move函數(shù)的 arguments[0]=[object Event]就是這個事件內(nèi)部的e參數(shù)
Array.prototype.unshift.apply(args, privateArgs);
-->這里在加上傳進來的參數(shù),就實現(xiàn)了,和原生bind一樣的參數(shù)形式
//->而且這里是把私有的參數(shù)放到前面的比如a=new Mouse();a.move(1,2);
//如果這個move方法沒有參數(shù),意思就是prototype.move=fn(){arguments} ,
//而我傳進來了參數(shù),參數(shù)的arguments.length=3,
//arguments[0]=1,arguments[1]=2,arguments[2]=[object event].
return fn.apply(target, args);
}
//這里之所以搞復雜了,是因為,在被代理的函數(shù)可以直接訪問arguments,比如我不給被代理的函數(shù)傳參數(shù),而直接使用
//這樣這個arguments就會包含與原生Function.prototype.bind的arguments一樣的對象,
//這里代碼深奧,是因為你沒理解這里原生的bind里面的arguments是什么,知道了,就知道為什么綁定我自己的arguments
//做這么多,主要目的就是使你被代理的函數(shù)內(nèi)部的arguments與function.prototype.bind里的arguments對象包含的東西一致
}
return function () {
return fn.apply(target, arguments);
}
}
return proxy.apply(null, arguments);
};
/*支持原生的使用原生的*/
Function.prototype.bind = Function.prototype.bind ||
function (target) { //這里的this指代要被代理的函數(shù)
if (1 < arguments.length) {
var args = Array.prototype.slice.call(arguments, 1); //取出參數(shù)列表
args.unshift(this, target); //這個args最終變成了[this,綁定的對象,參數(shù)列表]
return proxy.apply(null, args);
--如果直接proxy(args),麻煩來了,args成了proxy函數(shù)的一個參數(shù),就會報錯,
其實這里主要是分開任務處理,proxy只關心代理和參數(shù)是怎么傳給proxy,如果被代理的沒參數(shù),直接;
return proxy(this, target)--> return fn.apply(target, arguments); 就是17樓的那個答案
-->估計大家會跟17樓犯一樣的錯誤,這里之所以這么復雜的操作arguments對象,只是為了能保證傳進proxy函數(shù)中,保證arguments對象不失效
}
return proxy(this, target);
};
})();

以上代碼為什么我要一直return回來代理,因為這樣你才能這樣調(diào)用this.move.bind(this,1,2)()然后這里會立即執(zhí)行函數(shù)!
有了以上代碼,我們就可以輕松的實現(xiàn)了"?"號這里要寫什么代碼了,^_^,簡單吧
復制代碼 代碼如下:

if (document.addEventListener) {
document.addEventListener('mousemove', this.move.bind(this,1,2));
} else if (document.attachEvent) {
document.attachEvent("onmousemove", this.move.bind(this,1,2));
}

是不是以后凡是碰到要添加事件,然后調(diào)用的方法的this又想指向其他對象,這樣是不是很簡單呢..
看到大家對以上代碼有點難理解,來個簡單點得
復制代碼 代碼如下:

var a = function () {
console.log(arguments[0]); //1
console.log(arguments[1]); //2
console.log(this.key1);
//這樣綁定參數(shù)的話,我的參數(shù)列出來才能和原生的bind一樣,就這么簡單,
};
var b = {
key1: "value1"
};
a.bind(b, 1, 2)();

反駁17樓同學的代碼錯誤,我想這是很多人會犯的錯誤,代碼如下
復制代碼 代碼如下:

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參數(shù)失效
//arguments.length=0.
console.log(this.key1);
};
var b = {
key1: "value1"
};
a.bind(b, [1, 2], 3)(); //從這里可以看出,期望的arguments.length=2
//這也是我為什么苦口婆心的操作arguments參數(shù)
//我知道這里大部分人都會覺得對的,但是你錯了,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);
//私有的參數(shù),表示代理者的參數(shù),這里代表1,2,[3,4]
return function () {
var args = Array.prototype.slice.call(arguments);
//這里的參數(shù),代表被代理者的參數(shù),這里如事件函數(shù)內(nèi)部的e
Array.prototype.unshift.apply(args, privateArgs);
//這里是將兩者的參數(shù)合并在一起,然后私有參數(shù)在前,目的也是為了和原生的參數(shù)順序一致
return fn.apply(target, args);
//將合并后的參數(shù)這里包括1,2,[3,4] e傳進去,并apply
}

好,到了這里,你會發(fā)現(xiàn)一個不錯的js技巧,就是不用兼容處理e=window.event||e,直接使用arguments[arguments.length-1]就能兼容代表
所有瀏覽器的事件e對象,節(jié)省了不少的代碼與思考的時間,
之所以寫出這段代碼,是希望大家對js代碼有個真正的理解,知道js的真正魅力在哪里,如果了真看懂了此文,至少你知道了arguments到底是
怎么回事了,本博客破爛無比,只有樸實的代碼,適合js代碼愛好者學習.
其實真正的js魅力何止這點.有了以上的實例加上說明,相信你也應該了解得差不多了,不懂得多demo幾下就知道了.
一個js愛好者,會時不時貼出一些較為新鮮的代碼供大家學習,本博客的目的就是為了共同學習js代碼的精髓.

相關文章

最新評論