作用域安全的构造函数

当使用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 删除 Main.storyboard 和 LaunchScreen.storyboard

    第一步: 右键选中Main.storyboard —- delete —— Move to Trash LaunchScreen同理 第二步 点击工程名,就是最顶级目录 右侧出现general选项卡 ...

  2. iOS开发之网络数据解析--GDataXML解析框架的使用

      前言:GDataXML是google基于C语言libxml2写的第三方框架,该源码文件就一个类,看其源码,基本使用了C语言的底层的很多lib编译库代码,所以刚导入使用,会报错提示需要设置导入需要的 ...

  3. JSON取值前判断

    public static void main(String[] args)throws Exception{ String jsonStr1="{\"access_token\& ...

  4. nginx设置反向代理后,页面上的js css文件无法加载

    问题现象: nginx配置反向代理后,网页可以正常访问,但是页面上的js css文件无法加载,页面样式乱了. (1)nginx配置如下: (2)域名访问:js css文件无法加载: (3)IP访问:j ...

  5. C++基础——子类转父类转子类 (派生类转基类转派生类)

    ==================================声明================================== 本文原创,转载在正文中显要的注明作者和出处,并保证文章的完 ...

  6. Solr 参考资料

    solr 的入门好资料 https://cwiki.apache.org/confluence/display/solr/Apache+Solr+Reference+Guide https://two ...

  7. windows 进程管理器中的内存是什么意思?

    *内存 - 工作集:私人工作集中的内存数量与进程正在使用且可以由其他进程共享的内存数量的总和. *内存 - 峰值工作集:进程所使用的工作集内存的最大数量. *内存 - 工作集增量:进程所使用的工作集内 ...

  8. Azure 自动化里添加ResourceManager模块

    最近想尝试通过Azure里的自动化功能来控制VM的定时开关机,找到网上的一篇文章,  按照文章操作到"Import Azure Resource manager module"的第 ...

  9. ZooKeeper 安装部署及hello world(转)

    ZooKeeper  安装部署及hello world 先给一堆学习文档,方便以后查看官网文档地址大全:OverView(概述)http://zookeeper.apache.org/doc/r3.4 ...

  10. UESTC 917 方老师的分身IV --求欧拉路径

    判断欧拉路径是否存在及求出字典序最小的欧拉路径问题(如果存在). 将字符串的第一个字母和最后一个字母间连边,将字母看成点,最多可能有26个点(a-z),如果有欧拉路径,还要判断是否有欧拉回路,如果有, ...