javascript函式基礎--擴充套件函式的方法,鏈式語法,函式節流,模擬過載
javascript允許為 基本資料型別 定義方法。通過為Object.prototype新增原型方法,該方法被所有的物件可用,這樣的方式對 函式 陣列 字串 數字 正則表示式 和布林值都適用,如:通過給Funciton.prototype增加方法,使該方法對 所有函式 可用,
Function.prototype.method=function(name,func){
if(!this.prototype[name]){//避免覆蓋基類的原生方法
this.prototype[name]=func;
return this;
}
}
為Function.prototype增加一個method()方法後,就不必使用prototype這個屬性了,然後呼叫method()方法直接為 各種
基本型別 新增方法,如javascript沒有單獨的整數型別,
我們可以通過Number.prototype新增一個integer()方法來 只提取數字中的整數
Number.method('integer',function(){
return Math[this<0?'ceil':'floor'](this);
})
console.log((-10/3).integer());//-3
String.method('trim',funciton(){
return this.replace(/^\s+|\s+$/g,'');
})
console.log(""+" abc ".trim()+""); //"abc"
2.鏈式語法:讓某些方法返回this而不是沒有返回值(undefined),就可以進行級聯操作 --鏈式語法
Function.prototype.method=function(name,func){
if(!this.prototype[name]){//避免覆蓋基類的原生方法
this.prototype[name]=func;
return this;
}
}
String.method('trim',funciton(){
return this.replace(/^\s+|\s+$/g,'');
})
String.method('writeln',funciton(){
document.writeln(this)
return this
})
String.method('alert',funciton(){
return this;
})
var str=" abc ";
str.trim().writeln().alert()
3.函式節流
讓某些程式碼可以在 間斷的情況下連續重複執行,實現的 方法是使用定時器對函式進行節流
var processor={
timeoutId:null;
performProcessing:function(){//實際執行的方法}
process:function(0{
clearTimeout(this.timeoutId);
var that=this;
this.timeoutId=setTimeout(function(){
that.performProcessing();
},100);
}
}
Processor.process();
簡化:
function.throttle(mehtod,context){
clearTimeout(method.tId);
metod.tId=setTimeout(function(){
method.call(context)
})
}
函式節流解決一些程式碼(特別是事件)的無間斷執行,這些問題嚴重影響瀏覽器的效能,可能造成瀏覽器變慢或直接崩潰
如resize mousemove mouseover mouseout等事件的無間斷進行,加入定時器將事件 節流(在事件觸發時加入一個定時器來執行事件處理程式)
oTrigger.onmouserover=function(e){
oContainer.autoTimeoutId&&clearTimeout(oContainer.autoTimeoutId);
e=e||window.event;
var target=e.target||e.srcElement;
if((/li$/i).test(target.nodeName)){
oContainer.timeoutId=setTimeout(function(){
addTweenForContainer(oContainer,Otrigger,target);
},300);
}
}
4.模擬過載
function sayHello(){
switch(arguments.length){
case 0:
return "Hello";
case 1:
return "Hello,"+arguments[0];
case 2:
return (arguments[1]=="cn"?"您好,":"Hello,")+arguments[0];
}
}
sayHello();//"hello"
sayHello("Alex");//"hello,Alex"
sayHello("Alex","cn"); //"你好,Alex"
arguments.callee的使用:使匿名function可以被遞迴呼叫
function fibonacci(num){
return (function(num){
if(typeof num !=="number")
return -1;
number=parseInt(num);
if(num<1)
return -1;
if(num==1||num==2)
return 1;
return arguments.callee(num-1)+arguments.callee(num-2);
})(num)
}
fibonacci(100)
5.繫結函式bind()(糾正this上下文)
function bind(fn,context){
return function(){
return fn.apply(context,arguments)
};
}
var handler={
message:'Event handled',
handleClick:function(event){
alert(this.message)
}
};
var btn=document.getElementById('my-btn');
EventUtil.addHandler(btn,'click',handler.handleClick)//undefined,說明this指向了DOM按鈕,沒有指向handle
EventUtil.addHandler(btn,'click',funciton(event){//這裡使用閉包
handler.handleClick(event)
})
下面使用bind()
function bind(fn,context){
return function(){
return fn.apply(context,arguments)
};
}
var handler={
message:'Event handled',
handleClick:function(event){
alert(this.message)
}
};
var btn=document.getElementById('my-btn');
EventUtil.addHandler(btn,'click',bind( handler.handleClick,handler));