Javascript高级技巧.docx

Javascript高级技巧

Javascript高级技巧汇总Javascript高级技巧汇总1、类型检测使用Object.prototype.toString.call(obj)的方式。因为无论typeof还是instanceof都无法做到精确判断变量类型。2、安全的构造函数通常我们定义构造函数的时候，会使用类似复制代码代码如下:functionPerson(name){this.name=name;}然而之后如果不是去varperson=newPerson("cnblogs")。而是varperson=Person("cnblogs")。那么this就会指向别处，导致污染其余对象。解决方法就是在设置this.property的时候判断thisinstanceofPerson如果不是，则newPerson(x,x,x);复制代码代码如下:functionPerson(name){if(thisinstanceofPerson){this.name=name;}else{returnnewPerson(name);}}但是要注意一点，如果其余构造函数试图通过Person.call(this,x)这种方式实现继承的时候。需要注意，在实例化之前把那个函数的原型指向到Person去。3、惰性载入函数在调用函数时，经常会存在一种情况，就是函数中需要对浏览器功能进行判断。例如复制代码代码如下:functioncreateSomething(){if(supportH5){//dosomething}else{//dootherthing}}但是，如果一个浏览器支持一个功能，那么必然是一直都支持，所以这里面每次执行代码时都去判断是不必要的，因为判断一次就够了。所以可以改写成复制代码代码如下:functioncreateSomething(){if(supportH5){createSomething=function(){//重写了createSomething函数//dosomething}}else{//同上}}这样，第一次调用时会做判断，之后重写了这个函数，也就自然不会判断了。4、函数绑定在js中，最搞混的应该就是this指向谁的问题。其实，在我学习js这么久的.时间里，发现一个结论在函数中的this会指向最终调用这个函数的对象，换句话说就是，哪个对象调用了这个函数，this就指向那个对象。搞清楚了这个，函数绑定就不是问题了。改变函数里面this指向的方法就是call和apply，不过用这两个方法都会执行函数。如果不想执行函数，而是把函数当参数传给某个函数，还想改变this，那么就用最新的bind。5、定时器setTimeou、setInterval或者Ajax等虽然是异步，像多线程一样，但是js是单线程的。其实这些方法并没有增加一个线程。setTimeout(fn,300)代表的意思是300毫秒后把fn放入js的执行队列里面。如果这是队列里面没有事务要执行（也就是说js解释器处于空闲状态），那么便会立刻执行。否则，便会等队列的事务处理完再执行这个函数。所以，用setTimeout或者setInterval都不是准确的控制时间。还有一点要注意的就是，使用setTimeout模拟setInterval可以准确控制最小执行时间间隔。6、使用定时器固定时间执行方法。如果一个方法要执行很久，也许造成浏览器短时间没响应，那么可以用定时器固定每段时间执行一部分。这样可以不至于让js一直处于忙碌状态（浏览器无响应），有空闲的时间处理其余事务。比如有一个1000长度数组循环，那么可以100每次的执行，中间隔点时间让js处于空闲去做别的操作。7、函数节流。函数节流是一种提高性能很好的方式，在某些场合可以提高几倍效率。比如在做拖动或者是一些发生在onresize事件中的操作时。你每操作一下，其实执行了很多遍了。例如：复制代码代码如下:vari=0;window.onresize=function(){console.log(i++);}尝试着去拉伸浏览器，就会发现控制台瞬间显示i都超过100多了。改变一下写法，例如：复制代码代码如下:vari=0,j=1;window.onresize=function(){if(j%2==0){console.log(i++);}j++;}创建一个变量j，让j每次只有偶数的时候才执行，也就是少了一半的实行次数。像这样处理下，可以减少50%的执行次数，但是对用户来说，并感受不到区别。还有一种使用定时器实现的函数节流。核心代码如下：复制代码代码如下:functionthrottle(method,context){clearTimeout(method.tId);method.t