1、函数闭包

1.1 概述

  • JavaScript采用词法作用域,函数的执行依赖于变量作用域,这个作用域是在函数定义时决定的,而不是函数调用时决定的。
  • 为了实现这种词法作用域,JavaScript函数对象的内部状态不仅包含函数的代码逻辑,还必须引用当前的作用域链。
  • 函数对象可以通过作用域链相互关联起来,函数体内部的变量都可以保存在函数作用域内,这种特性被称为“闭包”
  • 从技术的角度讲,所有的JavaScript函数都是闭包:它们都是对象,它们都关联到作用域链

1.2 嵌套函数

先看下面的代码:

var scope = "globle scope";
function checkscope() {
var scope = "local scope";
function f() {
return scope;
}
return f();
}
console.log(checkscope());
var scope = "globle scope";
function checkscope() {
var scope = "local scope";
function f() {
return scope;
}
return f;
}
var ff = checkscope();
console.log(ff());

它们可以捕捉到局部变量(和参数),并一直保存下来,看起来像这些变量绑定到了在其中定义它们的外部函数。

1.3 闭包原理

  • 在JavaScript中,如果一个对象不再被引用,那么这个对象就会被垃圾回收机制回收
  • 每次调用JavaScript函数的时候,都会为之创建一个新的对象(活动对象Activation Object)用来保存局部变量,把这个对象添加至作用域链中
  • 当函数返回的时候,就从作用域链中将这个绑定变量的对象删除。 如果不存在嵌套的函数,也没有其他引用指向这个绑定对象,它就会被当做垃圾回收掉。 如果定义了嵌套的函数,每个嵌套的函数都各自对应一个作用域链,并且这个作用域链指向一个变量绑定对象。
  • 如果这个函数定义了嵌套的函数,并将它作为返回值返回或者存储在某处的属性里,这时就会有一个外部引用指向这个嵌套的函数。它就不会被当做垃圾回收,并且它所指向的变量绑定对象也不会被当做垃圾回收

1.3.1 实例1

为每个li标签添加点击事件,并输出下标和文本内容

<body>
<ul id="test">
<li>123</li>
<li>456</li>
<li>789</li>
<li>000</li>
</ul>
</body>
<script>
let items = document.querySelectorAll("ul#test li")
console.log(items);
function bindclick(nodes) {
for (var i = 0; i < nodes.length; i++) {
nodes[i].onclick = function () {
console.log(i, nodes[i].innerHTML);
}
}
}
bindclick(items)
</script>

这里li标签内容显示出来后,点击li标签,报错,如:

  • 原因: 作用域不同,所以获取不到li标签的innerHTML。

解决方案一: 将for循环里的var改成let,如下:

<script>
let items = document.querySelectorAll("ul#test li")
console.log(items);
function bindclick(nodes) {
for (let i = 0; i < nodes.length; i++) {
nodes[i].onclick = function () {
console.log(i, nodes[i].innerHTML);
}
}
}
bindclick(items)
</script>

现在就可以正常运行了,如:

  • 解释: let声明的变量会识别块作用域,块作用域中声明的函数就形成了闭包。 每次循环都会创建一个新的函数,则这些函数每一个都会形成闭包。 因此,每次调用特定函数时所访问的i,就是其闭包中引用了外部函数作用域链上的i。所以建议在js的for循环中,使用let进行变量的声明。

解决方案二: 使用立即执行函数。如:

<script>
let items = document.querySelectorAll("ul#test li")
console.log(items);
function bindclick(nodes) {
for (var i = 0; i < nodes.length; i++) {
nodes[i].onclick = (function (index) {
return function () {
console.log(index, nodes[index].innerHTML);
}
})(i)
}
}
bindclick(items)
</script>

运行结果:

  • 解释: 这里的立即执行函数,充当局部作用域,在console的外层形成闭包,每执行一次,都会产生一个AO活动对象,都会有一个index被放在AO对象里并被保留下来,返回的函数赋给onclick。

1.3.2 实例2

function fx(a, b) {
if (fx.count) fx.count++;
else fx.count = 1;
return a + b;
}
fx(1, 2);

fx(2, 3);

fx(3, 4);

fx(4, 5);

console.log(fx.count);

运行结果:4 直接运行到没有错,但这里的fx.count属性是可以被直接赋值的,会让源代码失去意义。改写后的代码:

function genfx() {
let count = 0
return function (a, b) {
count++
console.log(`第${count}次调用函数`)
return a + b
}
}
let fx = genfx()
fx(1, 2)
fx(2, 3)
fx(3, 4)
fx(4, 5)

运行结果: 第1次调用函数 第2次调用函数 第3次调用函数 第4次调用函数

1.4 闭包缺陷

闭包的缺点就是常驻内存会增大内存使用量,并且使用不当很容易造成内存泄露。

如果不是因为某些特殊任务而需要闭包,在没有必要的情况下,在其它函数中创建函数是不明智的,因为闭包对脚本性能具有负面影响,包括处理速度和内存消耗。

2、函数式编程

2.1 高阶函数

在数学和计算机科学中,高阶函数是至少满足下列一个条件的函数: (1)接受一个或多个函数作为输入; (2)输出一个函数;

2.2 函数链式调用

在设计函数(作为对象方法)返回值时,将处理后的当前对象(上下文)返回,以便进行紧凑的方法调用。

举个例子:

let str = "abc,123"
let arr = str.split(",").reverse().join("-");
console.log(arr);

这里表示先将str字符串按逗号分割成数组,然后翻转数组,加入字符-后返回新的字符串。

输出结果: 123-abc

2.3 偏函数

固定一个函数的一个或者多个参数,返回一个新的函数,这个函数用于接受剩余的参数

2.3.1 实例1

let sum = function (x, y) {
return x + y;
};
let succ = sum.bind(null, 1);
console.log(succ(2));

这里的succ被称为偏函数。

2.3.2 优点

  • 通过创建一个名称易懂的独立函数,调用是无需每次传入第一个参数,因为第一个参数通过bind提供了固定值
  • 当有一个很通用的函数,为了方便提供一个较常用的变体。例如:有函数send(from, to, text),可以创建一个针对当前用户的send函数的变体:sendTo(to, text)

2.3.3 缺陷

  • 如果想固定一些参数,但不绑定this。 bind不允许这样做,因为必须指定第一个参数(要么指定对象,要么null),不能忽略上下文并跳转到参数。

2.3.4 实例2

实现一个自定义偏函数生成器

function partial(func, ...argsBound) {
return function (...args) {
return func.call(this, ...argsBound, ...args);
};
}

2.3.5 实例3

自定义偏函数

function partial(func, ...argsBound) {
return function (...args) {
return func.call(this, ...argsBound, ...args);
};
}
let jack = {

firstName: "Jack",

say(time, phrase) {

console.log([${time}] ${this.firstName}: ${phrase});

},

};

let tom = {

firstName: "Tom",

};

jack.sayNow = partial(

jack.say,

new Date().getHours() + ":" + new Date().getMinutes()

);

tom.sayNow = jack.sayNow;

jack.sayNow("Hello");

tom.sayNow("World");

输出结果: [17:32] Jack: Hello [17:32] Tom: World

2.4 函数柯里化

转换一个调用函数f(a,b,c)为f(a)(b)(c)方式调用。

2.4.1 实例1

针对两个参数的函数柯里化

function curry(func) {
return function (a) {
return function (b) {
return func(a, b)
}
}
} function sum(a, b) {

return a + b

}
let currysum = curry(sum)

console.log(currysum(1)(2));

输出结果:3

2.4.2 实例2

实现高级柯里化函数,针对n个参数的函数

function curry(func) {
return function curried(...args) {
if (args.length >= func.length) {
return func.apply(this, args);
} else {
return function pass(...args2) {
return curried.apply(this, args.concat(args2));
};
}
};
}

注意: (1)如果传递args数与原函数已经定义的参数个数一样或更长,那么直接调用func函数。 (2)获得偏函数:否则,不调用func函数,返回另一个包装器pass,提供连接之前的参数一起做为新参数重新应用curried。然后再次执行一个新调用,返回一个新偏函数(如果参数不够)或最终结果。

2.4.3 实例3

function curry(func) {
return function (a) {
return function (b) {
return function (c) {
return func(a, b, c)
}
    }
}

}

function sum(a, b, c) {

return a + b + c

}

let curriedsum = curry(sum)

console.log(curriedsum(1)(2)(3)); // 6

2.4.4 实例4

// 实现高级柯里化函数,针对n个参数的函数
function curry(func) {
return function curried(...args) {
if (args.length >= func.length) {
return func.apply(this, args)
} else {
return function pass(...args2) {
return curried.apply(this, args.concat(args2))
}
}
}
}
//有日志函数log(date, importance, message),用于格式化输出日志信息。

function log(date, importance, message) {

console.log(

[${date.getHours()}:${date.getMinutes()}] [${importance}] ${message}

);

}

log = curry(log);

let todayLog = log(new Date());

todayLog("INFO", "users has been initialized");

let todayDebug = todayLog("DEBUG");

todayDebug("fixed login error");

运行结果:
[17:38] [INFO] users has been initialized [17:38] [DEBUG] fixed login error

JS 学习笔记 (六) 函数式编程的更多相关文章

  1. python学习笔记(六) 函数式编程

    一 函数对象 函数同样可以作为对象复制给一个变量,如下: f = abs; print(f(-10)) f = 'abs'; print(f) def add(a,b,f): return f(a) ...

  2. Clojure学习笔记(二)——函数式编程

    定义 “函数式编程”是一种编程范式(programming paradigm),即如何编写程序的方法论.主要思想是把运算过程尽量写成一系列嵌套的函数调用. 举例来说,现在有这样一个数学表达式: (1 ...

  3. python学习笔记011——函数式编程

    1 函数式编程 面向对象 ,面向过程 ,函数式编程 侧重函数的作用,注重函数结果的传递 函数可以被赋值,也可以接受其他的值 2 函数式编程特点 1.函数是一等公民 与其他变量一样,可以赋值和被赋值,可 ...

  4. Python学习笔记6 函数式编程_20170619

    廖雪峰python3学习笔记: # 高阶函数 将函数作为参数传入,这样的函数就是高阶函数(有点像C++的函数指针) def add(x, y): return x+y def mins(x, y): ...

  5. Node.js学习笔记(六) --- Nodejs 的非阻塞 I/O、 异步、 事件驱动

    1. Nodejs 的单线程 非阻塞 I/O 事件驱动在 Java. PHP 或者.net 等服务器端语言中,会为每一个客户端连接创建一个新的线程.而每个线程需要耗费大约 2MB 内存.也就是说,理论 ...

  6. JS 学习笔记 (七) 面向对象编程OOP

    1.前言 创建对象有很多种方法,最常见的是字面量创建和new Object()创建.但是在需要创建多个相同结构的对象时,这两种方法就不太方便了. 如:创建多个学生信息的对象 let tom = { n ...

  7. Python学习笔记之函数式编程

    python中的高阶函数 高阶函数就是 变量名指向函数,下面代码中的变量abs其实是一个函数,返回数字的绝对值,如abs(-10) 返回 10 def add(x,y,f): return f(x) ...

  8. python学习笔记1 -- 函数式编程之高阶函数 使用函数作为返回值

    使用函数作为返回值,看起来就很高端有木有,前面了解过函数名本身就是一个变量,就比如abs()函数,abs只是变量名,而abs()才是函数调用,那么我们如果把ads这个变量作为返回值返回会怎么样呢,这就 ...

  9. python学习笔记1 -- 函数式编程之高阶函数 sorted排序

    python提供了很强大的内置排序函数,妈妈再也不担心我不会写冒泡排序了呀,sorted函数就是这个排序函数,该函数参数准确的说有四个,sorted(参数1,参数2,参数3,参数4). 参数1 是需要 ...

随机推荐

  1. 从HashMap的执行流程开始 揭开HashMap底层实现

    心得:如何学习源码: 从某个执行过程入手,建议先从整体入手,了解底层的数据结构是怎么一步一步优化的.最后,在了解完底层的数据结构优化过程后,从重要的核心方法入手,从它的执行流程入手,先去网上搜索了解它 ...

  2. docker 容器terminal失败

    关键一句话:docker 容器的teminal失败,一定是等待资源导致的,不管是pid资源,还是内存资源.本文主要讲因为内存资源导致进程D状态,然后导致teminal容器失败. 目前在集群中,cpu占 ...

  3. 人人都能看懂的卡西欧fx991cnx玩机指南,手把手教你如何利用计算器的漏洞爆机

    专业术语说明 你是VerB还是VerC 别人问你这个问题的时候不要慌,帮你看你的计算器是Ver几: 同时按住shift.7.开机键 9 5次shift 第一行后半句即是 紧接着可以顺便看看计算器的序列 ...

  4. mybatisplus-ActiveRecord 模式

    ActiveRecord 模式 直接调用Model对象来进行增删改查. 实体类只需继承 Model 类即可进行强大的 CRUD 操作 需要项目中已注入对应实体的BaseMapper 实体类User 点 ...

  5. 【java】学习路线14-抽象类、多态

    /*抽象类 abstractabstract class A{    }注意abstract类中不一定需要有abstract方法但是有abstract方法的类中,该类一定是abstract方法抽象类不 ...

  6. Android Kotlin Annotation Processer

    Annotation Processer 注解处理器(Annotation Processer)是javac内置的注解处理工具,可以在编译时处理注解,让我们自己做相应的处理.比如生成重复度很高的代码, ...

  7. KingbaseES 支持列加密

    KINGBASE 列加密支持 sm4 和 rc4 加密算法,具体算法在 initdb 时指定,默认是 sm4.要使用列加密,必须 shared_preload_libraries = 'sysencr ...

  8. Linux云主机安全入侵排查步骤

    导语 经常有用户报障系统被植入恶意程序,如挖矿软件.ddos攻击病毒.syn映射攻击病毒等,可以按照以下流程为用户排查入侵病毒类型: 一.定位病毒进程 对于用户反馈云主机性能卡顿,CPU和内存占用较高 ...

  9. Kubernetes DevOps: Gitlab

    Gitlab 官方提供了 Helm 的方式在 Kubernetes 集群中来快速安装,但是在使用的过程中发现 Helm 提供的 Chart 包中有很多其他额外的配置,所以我们这里使用自定义的方式来安装 ...

  10. MySQL数据库中配置文件 read_only 参数的有关说明

    1.对于MySQL单实例数据库和master库,如果需要设置为只读状态,需要进行如下操作和设置: 将MySQL设置为只读状态的命令(可以登录mysql执行下面命令, 或者在my.cnf配置文件中添加& ...