惰性函数——JS高级

原文地址:http://www.cnblogs.com/galenyip/p/4613430.html

我们先来看一下js的异步提交。

XHR我们在原生的时候常常用到,因为常用到,我们更多把封装到了工具库中

先看下他最常用的实现

 1 // 旧方法
 2
 3 function createXHR() {
 4     var xhr;
 5     try{
 6         xhr = new XMLHttpRequest();
 7     }catch(e) {
 8         handleErr(e);
 9
10         try {
11             xhr = new ActiveXObject("Msxml2.XMLHTTP");
12         }catch(e) {
13             try{
14                 xhr = new ActiveXObject("Microsoft.XMLHTTP");
15             }catch(e) {
16                 xhr = null;
17             }
18         }
19     }
20
21     return xhr ;
22 }
23
24 function handleErr(error) {
25     // 这一步在实战中很重要,因为catch会延长作用域链,所以是在全局作用域声明的e
26     // 这里我们把它赋给局部变量,则查找更快
27     var err = error;
28
29     // do sth.
30 }

没错吧?这是最常见的createXHR实现方法了。

如题,这里要说的 惰性函数 是什么东西呢?

我们先说它的作用: 优化被经常调用到的函数。

这也属于JS高级中的一部分

不多说,直接上代码

 1 // 惰性函数
 2 // 第二次才生效
 3 // 作用:优化对于被频繁使用的函数
 4 function createXHR() {
 5     var xhr;
 6     if(typeof XMLHttpRequest != ‘undefined‘) {
 7         xhr = new XMLHttpRequest();
 8         createXHR = function() {
 9             return new XMLHttpRequest();
10         }
11     }else {
12         try {
13             xhr = new ActiveXObject("Msxml2.XMLHTTP");
14             createXHR = function() {
15                 return new ActiveXObject("Msxml2.XMLHTTP");
16             }
17         }catch(e) {
18             try {
19                 xhr = new ActiveXObject("Microsoft.XMLHTTP");
20                 createXHR = function() {
21                     return new ActiveXObject("Microsoft.XMLHTTP");
22                 }
23             }catch(e) {
24                 createXHR = function () {
25                     return null;
26                 }
27             }
28         }
29     }
30     return xhr
31 }

代码中,我们让函数在第一次运行之后,则判断除了浏览器的环境,就被重新赋值了。赋值后的函数是直接return 对应的方法。

所以,这个函数,需要第二次调用的时候才真正的被调用。

正是因为它第二次调用函数的时候,没有去走第一次调用那样复杂的判断的路,所以显得“懒惰”。因此我们叫它 惰性函数

时间: 2024-10-23 14:19:31

惰性函数——JS高级的相关文章

JS 惰性函数 的简单案例

今天了解到一个新的名词叫惰性函数,在js中的重复计算可以省事很多 var add = function(a) { var e = a+a ; console.log("通道 1"); add = function(a) { console.log("通道 2") return e; }; return e; } alert(add(3)); // 通道1 弹出6 alert(add(5)); // 通道2 弹出6 alert(add(9)); // 通道2 弹出6

js之惰性函数

惰性函数是js函数式编程的另一个应用,惰性函数表示函数执行的分支只会在函数第一次调用的时候执行,他的应用情景在于当我们遇到一个需要判断场景去调用不同的方法时,避免重复进入函数内的if判断,也就是说if判断只进行一次,之后函数就会被分支里的代码替换掉 我们先看个例子 function a(){ console.log("this is a"); } function a(){ console.log("this is other a"); } a(); //输出thi

JavaScript惰性函数定义

函数是js世界的一等公民,js的动态性.易变性在函数的应用上,体现的淋漓尽致.做为参数,做为返回值等,正是函数这些特性,使得js开发变的有趣. 下面就阐述一下,js一个有趣的应用--惰性函数定义(Lazy Function Definition). 惰性载入表示函数执行的分支只会在函数第一次掉用的时候执行,在第一次调用过程中,该函数会被覆盖为另一个按照合适方式执行的函数,这样任何对原函数的调用就不用再经过执行的分支了. 下面我们看几个典型的例子: 1 function addEvent (typ

<JS高级程序设计3>_PART3

1.ECMAScript中所有数都以IEEE-754 64位格式存储,但位操作符不直接操作64位的值.是先64位转换成32位的整数,再操作,得到结果再转成64位. 2.首位是符号位.之后的31位代表整数的值. 3.用toString(2)打印二进制,得到的是被处理过的二进制. 4.按位非(NOT)~,数转成二进制,取反.相当于把操作数先变负再-1; 5.按位与(AND)&,两个数的二进制,有一个0结果就是0,两个都是1才为1. 6.按位或(OR)|,有一个1结果为1,都是0才为0. 7.按位异或

<JS高级程序设计3>_PART4

1.基本数据类型:Undefined,null,Number,String,Boolean.引用数据类型:保存在内存中的对象. 2.JS不允许直接访问内存中的位置,不能直接操作对象的内存空间.所以操作对象时,实际上是操作的对象的引用,而不是实际的对象. 3. var num1 = 1; var num2 = num1; 一个基本类型的变量向另一个赋值时,执行了复制操作,两个变量互不影响. var obj1 = new Object(); var obj2 = obj1; obj1.age = 2

JS高级特性

一.JavaScript的同源策略 参考链接:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Same_origin_policy_for_JavaScript 同源策略限制了一个源(origin)中加载文本或脚本与来自其它源(origin)中资源的交互方式. 同源定义 如果两个页面拥有相同的协议(protocol),端口(如果指定),和主机,那么这两个页面就属于同一个源(origin). 下表给出了相对http://store.c

读书笔记 - js高级程序设计 - 第十五章 使用Canvas绘图

读书笔记 - js高级程序设计 - 第十三章 事件 canvas 具备绘图能力的2D上下文 及文本API 很多浏览器对WebGL的3D上下文支持还不够好 有时候即使浏览器支持,操作系统如果缺缺乏必要的绘图驱动程序,则浏览器即使支持了也没用   <canvas> var drawing = document.getElementById("drawing"); if( drawing.getContext ){ drawing.getContext("2d"

JS高级——闭包

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <script type="text/javascrip

js高级程序设计笔记之-addEventListener()与removeEventListener(),事件解除与绑定

js高级程序设计笔记之-addEventListener()与removeEventListener(),事件解除与绑定 addEventListener()与removeEventListener()用于处理指定和删除事件处理程序操作.所有的DOM节点中都包含这两种方法,并且它们都接受3个参数:要处理的事件名.作为事件处理程序的函数和一个布尔值.最有这个布尔值参数是true,表示在捕获阶段调用事件处理程序:如果是false,表示在冒泡阶段调用事件处理程序. 要在按钮上为click事件添加事件处