作用域安全的构造函数

当使用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. IOS之UI--小实例项目--添加商品和商品名

    *:first-child { margin-top: 0 !important; } body > *:last-child { margin-bottom: 0 !important; } ...

  2. Java 之 内部类

    (static修饰的成员属于整个类,而不属于单个对象) 定义:将一个类放到另一个类的内部定义,这个在内部定义的类就叫做内部类(也有的成嵌套类),包含内部类的类被称为外部类(也有的称宿主类). 1.非静 ...

  3. [LoadRunner]性能测试实践_Hessian协议脚本编写2

    协议选取和运行配置请参考:http://www.cnblogs.com/whylaughing/p/5430821.html 这次直接贴代码让大家参考: import lrapi.lr; import ...

  4. Entity Framework做IN查询

    开发中遇到的Too high level of nesting for select错误 项目使用了Entity Framework结合Mysql, 遇到了一个非常奇怪的性能问题,一个看起来非常简单的 ...

  5. 《SQL Server企业级平台管理实践》读书笔记——SQL Server中关于系统库Tempdb总结

    Tempdb系统数据库是一个全局资源,可供连接到SQL Server实例的所有用户使用. 存储的内容项: 1.用户对象 用户对象由用户显示创建.这些对象可以位于用户会话的作用域中,也可以位于创建对象所 ...

  6. Redis下载及安装部署

    官网介绍:Redis is an open source advanced key-value store.It is often referred to as a data structure se ...

  7. sphinx增量索引

    首先建立一个计数表,保存数据表的最新记录ID CREATE TABLE `sph_counter` (  `id` int(11) unsigned NOT NULL,  `max_id` int(1 ...

  8. IE11的API变化

    IE11已经登录Win8.1,它的API有了很大变更 一.User-agent字符串的更改 IE10的是 Mozilla/5.0 (compatible; MSIE 10.0; Windows NT ...

  9. CentOS下一键安装Openstack

    CentOS下一键安装Openstack 系统环境:Oracle VirtualBox 4.38CentOS-6.5-x86_64-bin-DVD1.iso 安装前需要修改 /etc/hosts文件, ...

  10. HTTP详解2-请求、响应、缓存

    1. HTTP请求格式 做过Socket编程的人都知道,当我们设计一个通信协议时,“消息头/消息体”的分割方式是很常用的,消息头告诉对方这个消息是干什么的,消息体告诉对方怎么干.HTTP协议传输的消息 ...