JS 之高级函数

作用域安全的构造函数

当使用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 高级程序设计》

时间: 2024-10-24 11:06:34

JS 之高级函数的相关文章

js之匿名函数

js之匿名函数   这篇博文内容来自于javascript高级程序设计第2版,向作者致敬 函数声明: function functionName(arg0,arg1){ //函数体 } 函数表达式: var functionName = function(arg0,arg1){ //函数体 } 函数声明和函数表达式之间的主要区别是前者会在代码执行前被加载到作用域中,而后者是在代码执行到那一行的时候才会有定义.另一个区别是函数声明会给函数指定一个名字,而函数表达式则创建一个匿名函数,然后将这个函数

高级函数

高级函数 安全的类型检测 js内置的类型检测并非完全可靠,typeof操作符难以判断某个值是否为函数 instanceof在多个frame的情况下,会出现问题. 例如:var isArray = value instance of Array ; 会由于存在多个window,而value与Array不属于同个window的情况而导致出错 对于这样的问题,最好的解决方法是通过调用Object的toString方法,例如: 1 function isArray(){ 2 return Object.

什么是回调或高级函数?

http://blog.csdn.net/luoweifu/article/details/41466537    在JavaScrip中,function是内置的类对象,也就是说它是一种类型的对象,可以和其它String.Array.Number.Object类的对象一样用于内置对象的管理.因为function实际上是一种对象,它可以“存储在变量中,通过参数传递给(别一个)函数(function),在函数内部创建,从函数中返回结果值”. 因为function是内置对象,我们可以将它作为参数传递

【前端小小白的学习之路】---->用JS编写一个函数,返回数组中重复出现过的元素

用JS编写一个函数,返回数组中重复出现过的元素,见下面的代码: var arr = [1, 2, 3, 1, 2, 3, 4, 5]; var getRepeat = function (arr) { var obj = {}; for (var i = 0, len = arr.length; i < len; i++) { if (obj[arr[i]] == undefined) { obj[arr[i]] = 1; } else { obj[arr[i]]++; } } for (var

js中一些函数(一)【丫头, 今天去哪儿了呢,好些没有】

Math.Rondom()   ==>  0 到 1 之间的小数 Math.floor(x)  ==>  小于或者等于 x 的整数(即转换成整数后是不能比 x 大的整数) setInterval(hanshu,1000)  ==>  意思为调用下面的 hanshu(), 间隔时间为 1000 ms(毫秒) js中一些函数(一)[丫头, 今天去哪儿了呢,好些没有],码迷,mamicode.com

JS Replace() 高级用法(转)

在很多项目中,我们经常需要使用JS,在页面前面对前台的某些元素做做修改,js 的replace()方法就必不可少. 经常使用"ABCABCabc".replace("A","B")的同学应该会比较清楚,改语句的最终结果是BBCABC,这种方法只能替换 第一个匹配的元素.如果替换所有呢?使用正则表达式即可: "ABCABCabc".replace(/A/g,"B") 即可. 那如果想替换A的同时也可以替换a呢

让js中的函数只有一次有效调用的三种常用方法

如何让js中的函数只被有效执行一次,请看下面的三种常用方法. 1. <script> window.onload = function () { function once(fn) { var result; return function() { if(fn) { result = fn.apply(this, arguments); fn = null; } return result; }; } var callOnce = once(function() { console.log('

JS多个函数之间传递参数问题

JS多个函数之间传递参数的一个重要思想是在页面定义一个隐藏域,当第一个函数请求到数据时候修改隐藏域的值,第二个函数用jQuery的选择器选择页面中隐藏域的值. 比如: 页面中定义一个隐藏的页号. <!-- 隐藏查询条件的页号 --> <input type="hidden" name="currentPage" id="currentPage"> 第一个ajax函数获取页面中的页号: function queryNum(c

JS中的函数、Bom、DOM及JS事件

本期博主给大家带来JS的函数.Bom.DOM操作,以及JS各种常用的数据类型的相关知识,同时,这也是JavaScript极其重要的部分,博主将详细介绍各种属性的用法和方法. 一.JS中的函数 [函数的声明及调用] 1.函数声明的格式: function 函数名(参数1,参数2,参数3,--){//函数体 return 结果; } >>>函数的调用格式: 直接调用:函数调用的格式:函数名(参数一的值,参数二的值,--): 事件调用:事件名=函数名( ); 2.函数声明的几点强调: ①函数名