作用域安全的构造函数

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

JS 之高级函数的更多相关文章

  1. js正则高级函数(replace,matchAll用法),实现正则替换(实测很有效)

    有这么一个文档,这是在PC端显示的效果,如果放在移动端,会发现字体大小是非常大的,那么现在想让这个字体在移动端能按照某个比例缩小,后台返回的数据格式是: <html> <head&g ...

  2. js 高级函数 之示例

    js 高级函数作用域安全构造函数 function Person(name, age)    {        this.name = name;        this.age = age;     ...

  3. 浅谈JS中的高级函数

    在JavaScript中,函数的功能十分强大.它们是第一类对象,也可以作为另一个对象的方法,还可以作为参数传入另一个函数,不仅如此,还能被一个函数返回!可以说,在JS中,函数无处不在,无所不能,堪比孙 ...

  4. 谈谈JS中的高级函数

    博客原文地址:Claiyre的个人博客如需转载,请在文章开头注明原文地址 在JavaScript中,函数的功能十分强大.它们是第一类对象,也可以作为另一个对象的方法,还可以作为参数传入另一个函数,不仅 ...

  5. javascript高级函数

    高级函数 安全的类型检测 js内置的类型检测并非完全可靠,typeof操作符难以判断某个值是否为函数 instanceof在多个frame的情况下,会出现问题. 例如:var isArray = va ...

  6. js高阶函数应用—函数防抖和节流

    高阶函数指的是至少满足下列两个条件之一的函数: 1. 函数可以作为参数被传递:2.函数可以作为返回值输出: javaScript中的函数显然具备高级函数的特征,这使得函数运用更灵活,作为学习js必定会 ...

  7. js自执行函数的常见写法

    js自执行函数的常见写法 2016-12-20 20:02:26 1.关于自执行函数 1.1 写自执行函数的好处:独立的作用域,不会污染全局环境 (function() { })(); 1.2 理解重 ...

  8. legend---十二、js中的js语句和函数和ready函数的关系是什么

    legend---十二.js中的js语句和函数和ready函数的关系是什么 一.总结 一句话总结: 函数和全局变量不必放到ready函数中 语句(调用函数和全局变量)的必须放到ready函数中 1.在 ...

  9. 基于JS的高级脚本语言 Sara

    Sara-基于JS的高级脚本语言 欢迎使用Sara,Sara是一款基于JavaScript的全新的高级脚本语言! Sara不像我们工作室上一款编程语言作品-Ginit一样,他属于更高级的语言 Sara ...

随机推荐

  1. 深入理解CSS中的层叠上下文和层叠顺序

    零.世间的道理都是想通的 在这个世界上,凡事都有个先后顺序,凡物都有个论资排辈.比方说食堂排队打饭,对吧,讲求先到先得,总不可能一拥而上.再比如说话语权,老婆的话永远是对的,领导的话永远是对的. 在C ...

  2. JQuery判断radio是否选中,获取选中值

    本文摘自:http://www.cnblogs.com/xcj1989/archive/2011/06/29/JQUERY_RADIO.html   /*----------------------- ...

  3. 数据库性能调优——sql语句优化(转载及整理) —— 篇2

    下面是在网上搜集的一些个人认为比较正确的调优方案,如有错误望指出,定虚心改正 (1) 选择最有效率的表名顺序(只在基于规则的优化器中有效): ORACLE 的解析器按照从右到左的顺序处理FROM子句中 ...

  4. 响应式Web设计 – 布局

    写在前面 去年上半年,我开始着手推动项目中响应式设计的落地.以官网优化需求为契机,主动去做了响应式的页面设计,也说服了产品.设计和开发的相关同事一起把它上线落实,但不幸的是,由于各种方面的原因,比如, ...

  5. [ASP.NET MVC]: - EF框架学习手记

    1.EF(Entity Framework)实体框架EF是ADO.NET中的一组支持开发面向数据的软件应用程序的技术,是微软的一个ORM框架. 2.什么是ORM?ORM指的是面向对象的对象模型和关系型 ...

  6. [QualityCenter]设置工作流脚本-新建缺陷时字段自动生成

    需求:新建缺陷时,自动生成缺陷状态.检查者和检查日期的值. 在脚本编辑器找到Defects_Bug_New函数,然后填写以下代码: Sub Defects_Bug_New    On Error Re ...

  7. 2013MPD上海6.23 PM 光耀:读心术,用户心理的产品之道

    创新的前提是:制度与组织的创新!!!!!!!!!!!!!! 光耀:腾讯互联网业务产品经理(腾讯公司互联网业务系统产品经理.在电子商务.社会化媒体等方面有深入研究.参与腾讯多个重要项目产品工作) 什么是 ...

  8. JavaScript Patterns 2.10 Naming Conventions

    1. Capitalizing Constructors var adam = new Person(); 2. Separating Words camel case - type the word ...

  9. 第一章 Mysql 简介及安装和配置

    Mysql是最流行的关系型数据库管理系统,在WEB应用方面MySQL是最好的RDBMS(Relational Database Management System:关系数据库管理系统)应用软件之一. ...

  10. find type d 命令批量删除禁用

    [root@qike ~]# find  /usr/local/sbin/  -type d  /usr/local/sbin//usr/local/sbin/2/usr/local/sbin/g/u ...