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));