javascript高级部分

来源：互联网发布：大数据研发工程师笔试编辑：程序博客网时间：2024/06/05 04:11

一、构造作用域安全的函数

 <script type="text/javascript">    //构造作用域安全的函数       function Person(name,age,job){       if(this instanceof Person){       this.name=name;       this.age=age;       this.job=job;       }else{       return new Person(name,age,job);       }              this.toString=function(){       return this.name+"---"+this.age+"---"+this.job;       };       }      /*   var p1=new Person("王",22,"工程师");        alert(p1.toString());        var p2=Person("lu",23,"工程师");        alert(p2.toString()); */               /*  function People(name,age,job){        this.name=name;        this.age=age;        this.job=job;        }        var p2=People(1,2,3);        alert(p2.age+"--"+window.age); */        function People(){            Person.call(this,1,2,3);        }        People.prototype=new Person();        var p=new People();        alert(p.name);            </script>

二、惰性载入函数

  <script type="text/javascript">    //惰性载入函数        优点：为所有的后续调用会比较快。        function productFruits(flag){         var name=null;         if(flag==1){         productFruits=function(){          name="苹果";          return name;         }         }else if(flag==2){         productFruits=function(){          name="香蕉";          return name;         }         }else{         productFruits=function(){         name="其他水果";            return name;         }         }                 return productFruits;        }    var pf=new productFruits(2);    alert(pf());    alert(productFruits());    </script>

三、函数的绑定和函数的柯里化

<script type="text/javascript" src="../js/eventUtil.js"></script>//见上篇文章  跨所有浏览器的event事件工具类<button id="my-btn">惦记我</button>    <script type="text/javascript">    //函数绑定    var handler={    message:"Event handled",    handleClick:function(event){    alert(this.message);    }    };    var btn=document.getElementById("my-btn");/*     EventUtil.addHandler(btn, "click", function(event){    handler.handleClick(event);    }); */    EventUtil.addHandler(btn, "click",bind(handler.handleClick,handler));    function bind(fn,context){    return function(){    return fn.apply(context,arguments);    }    }    function bind(fn,context){    return function(){    return fn.apply(context,arguments);    }    }    function curry(fn){    var new_arguments=Array.prototype.slice.call(arguments,1);        return function(){        var innerArgs=Array.prototype.slice.call(arguments);        var finalArgs=new_arguments.concat(innerArgs);        return fn.apply(null,finalArgs);        }    }    function add(num1,num2){    return num1+num2;    }    var curriedAdd=curry(add,4);   alert(curriedAdd(5));   //函数柯里化   function bind(fn,context){   var new_arguments=Array.prototype.slice.call(arguments,2);   return function(){       var innerArgs=Array.prototype.slice.call(arguments);       var finalArgs=new_arguments.concat(innerArgs);       return fn.apply(context,finalArgs);       }   }        </script>

四、setTimeout代替setInterval 和数组分块技术

<%@ page language="java" contentType="text/html; charset=UTF-8"    pageEncoding="UTF-8"%><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Insert title here</title><script type="text/javascript" src="../js/eventUtil.js"></script></head><body> <button id="my-btn">惦记我</button> <div id="my-div"></div>    <script type="text/javascript">      function showMessage(){      alert("1");      }       var i=10;  var div=document.getElementById("my-div");  //div.innerHTML="发射倒计时："+i;      //setTimeout(showMessage,2000);      //setInterval(showMessage,2000);    /*   setTimeout(function(){         i--;        if(i<0){        alert("开火!");        return;        }div.innerHTML="发射倒计时："+i;setTimeout(arguments.callee,1000);              },1000); */            //数组分块技术      function chunk(array,process,context){      setTimeout(function(){     var item=array.shift();     process.call(context,item);     if(array.length>0){     setTimeout(arguments.callee,2000);     }      },      2000      );      }      var arrayDatas=[2,3,5,7];      function process_fun(num){      div.innerHTML=num;      }      chunk(arrayDatas,process_fun,null);           </script>    </body></html>

五、函数节流技术

<%@ page language="java" contentType="text/html; charset=UTF-8"    pageEncoding="UTF-8"%><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Insert title here</title><script type="text/javascript" src="../js/eventUtil.js"></script></head><body> <div id="my-div" style="border:5px solid;width:200px;height:300px" ></div>    <script type="text/javascript">    //函数节流：基本思想-某些代码不可以在没有间断的情况下重复执行。比如window.onresize         window.onresize=function(){        throttle(resizeDiv);         }         function throttle(method,context){        clearTimeout(method.tid);        method.tid=setTimeout(function(){        method.call(context);        },100);        }        function resizeDiv(){        var div=document.getElementById("my-div");        div.style.height=div.offsetWidth+"px";                }             </script>    </body></html>