Javascript高级技巧

时间:2020-11-22 19:37:09 JavaScript 我要投稿

Javascript高级技巧汇总

Javascript高级技巧汇总

  1、类型检测

  使用Object.prototype.toString.call(obj)的方式。

  因为无论typeof还是instanceof都无法做到精确判断变量类型。

  2、安全的构造函数

  通常我们定义构造函数的时候,会使用类似

  复制代码 代码如下:

  function Person(name){

  this.name = name;

  }

  然而之后如果不是去 var person = new Person("cnblogs")。

  而是 var person = Person("cnblogs")。那么this就会指向别处,导致污染其余对象。

  解决方法就是在设置this.property的时候判断

  this instanceof Person

  如果不是,则new Person(x,x,x);

  复制代码 代码如下:

  function Person(name){

  if(this instanceof Person){

  this.name = name;

  }else{

  return new Person(name);

  }

  }

  但是要注意一点,如果其余构造函数试图通过Person.call(this,x)这种方式实现继承的时候。

  需要注意,在实例化之前把那个函数的原型指向到Person去。

  3、惰性载入函数

  在调用函数时,经常会存在一种情况,就是函数中需要对浏览器功能进行判断。

  例如

  复制代码 代码如下:

  function createSomething(){

  if(supportH5){

  //do something

  }else{

  //do otherthing

  }

  }

  但是,如果一个浏览器支持一个功能,那么必然是一直都支持,所以这里面每次执行代码时都去判断是不必要的,因为判断一次就够了。

  所以可以改写成

  复制代码 代码如下:

  function createSomething(){

  if(supportH5){

  createSomething = function(){ //重写了createSomething 函数

  //do something

  }

  }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事件中的操作时。

  你每操作一下,其实执行了很多遍了。例如:

  复制代码 代码如下:

  var i = 0;

  window.onresize = function(){

  console.log(i++);

  }

  尝试着去拉伸浏览器,就会发现控制台瞬间显示i都超过100多了。

  改变一下写法,例如:

  复制代码 代码如下:

  var i = 0, j = 1;

  window.onresize = function(){

  if(j % 2 == 0){

  console.log(i++);

  }

  j++;

  }

  创建一个变量j,让j每次只有偶数的时候才执行,也就是少了一半的实行次数。

  像这样处理下,可以减少50%的执行次数,但是对用户来说,并感受不到区别。

  还有一种使用定时器实现的函数节流。

  核心代码如下:

  复制代码 代码如下:

  function throttle(method , context){

  clearTimeout(method.tId);

  method.tId = setTimeout(function(){

  method.call(context);

  },100);

  }

  这里传入执行函数和函数的执行环境(也就是执行函数中的this的指向对象),然后先清除动作队列,接着执行动作。

  这种形式可以对动作频率做更好的控制。

  假设是一个浏览器拉伸动作,那么只要你拉伸的速度够快,每次触发的时间间隔在100ms之内,那么就只会执行最后一下的结果。

  8、自定义事件

  本质是观察者模式。基本模式是需要3个函数,

  一个函数是绑定事件,一个函数是触发事件,一个是移除绑定。

  这种模式可以很大程度降低代码耦合性。

  

【Javascript高级技巧汇总】相关文章:

1.Javascript高级手势使用介绍

2.CSS高级技巧汇总

3.javascript编程技巧方法

4.javascript闭包的高级使用方法

5.JavaScript高级程序设计:本地对象Array

6.13 个提升JavaScript 性能技巧

7.高效编写JavaScript代码的技巧

8.JavaScript常用方法汇总