JS 之高级函数

时间:2021-09-01 14:10:14

作用域安全的构造函数

当使用new调用构造函数时,构造函数内部this对象会指向新创建的对象实例。如果不使用new,直接调用的话,则this对象会映射到window对象上。所以需要判断下。

eg:

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

  }

}

惰性载入函数

惰性载入函数执行的分支只会发生一次:即第一次函数调用的时候。在第一次调用的过程中,该函数会被覆盖为另一个按合适方式执行的函数。也就是说,不需要每次经过多层的判断来执行函数,而是在第一次执行的时候,就把变量定义好。后续再执行的话只需要执行这个变量所定义的函数即可。

函数绑定

函数绑定要创建一个函数,可以在特定环境中以指定参数调用另一个函数,同时保留另一个函数的代码执行环境。将函数绑定到指定环境的函数的代码如下:

function bind(fn,context){    //fn:函数  context:执行环境

  return function(){

    return fn.apply(context,arguments);

  }

}

函数柯里化

函数柯里化用于创建已经设置好了的一个或多个参数的函数。函数柯里化的基本方法和函数绑定是一样的,使用一个闭包返回一个函数。两者的区别在于,当函数被调用时,返回的函数可以传入一些参数。柯里化函数的通用代码如下:

function curry(fn){

  var args = Array.prototype.slice.call(arguments,1);

  return function(){

    var innerArgs = Array.prototype.slice.call(arguments);

    var finalArgs = args.concat(innerArgs);

    return fn.apply(null,finalArgs);

  }

}

通过函数柯里化构造出更为复杂的bind()函数。

function bind(fn,context){

  var args = Array.prototype.slice.call(arguments,2);

  return function(){

    var innerArgs = Array.prototype.slice.call(arguments);

    var finalArgs = args.concat(innerArgs);

    return fn.apply(context,finalArgs);

  }

}

高级定时器

JS是运行于单线程环境中的。定时器(setTimeout()和setInterval())是指在特定的时间后将代码插入到队列中,等待进程空闲的时候立刻执行。其指定的时间间隔是指代码被插入到队列的间隔时间,不是何时执行代码的时间。使用setTimeout模拟setInterval,可以避免重复启动定时器。

数组分块

核心思想是使用定时器分隔循环。避免一次性执行循环中的代码操作导致页面脚本运行时间过久。通用函数如下:

function chunk(array,process,context){    //array列表,process要处理的函数,context执行的上下文环境

  setTimout(function(){

    var item = array.shift();

    process.call(context,item);

    

    if(array.length > 0){

      setTimeout(arguments.callee,100)

    }

  },100)

}

数组分块的重要性在于它可以将多个项目的处理在执行队列上分开,在每个项目处理之后,给予其他的浏览器处理机会运行,这样可能避免长时间运行脚本的错误。

函数节流

函数节流的思想是某些代码不可以在没有间断的情况下连续重复执行。第一次调用函数,创建一个定时器,在指定的时间间隔之后运行代码。当第二次调用该函数时,会清除前一次的定时器并设置另一个。代码思路如下:

function throttle(method,context){

  clearTimeout(method.tid);

  method.tid = setTimeout(function(){

    method.call(context);

  },100)

}

使用场景较多的是window.resize(),使用函数节流来控制函数处理的频率,以确保浏览器不会在极短的时间内进行过多的计算。只要代码是周期性执行的,都应该使用节流。

总结自:《javascript 高级程序设计》