前言

JS 调用方法的风格为 obj.method(...),例如 str.indexOf(...)arr.slice(...)。但有时出于某些目的,我们不希望这种风格。例如 Node.js 的源码中有很多 类似这样的代码

const {
ArrayPrototypeSlice,
StringPrototypeToLowerCase,
} = primordials // ...
ArrayPrototypeSlice(arr, i)

为什么不直接使用 arr.slice() 而要多此一举?

因为 arr.slice() 实际调用的是 Array.prototype.slice,假如用户重写了这个方法,就会出现无法预期的结果。所以出于慎重,通常先备份原生函数,运行时只用备份的函数,而不用暴露在外的函数。

调用

备份原生函数很简单,但调用它时却有很多值得注意的细节。例如:

// 备份
var rawFn = String.prototype.indexOf
// ... // 调用
rawFn.call('hello', 'e') // 1

这种调用方式看起来没什么问题,但实际上并不严谨,因为 rawFn.call() 仍使用了 obj.method(...) 风格 —— 假如用户修改了 Function.prototype.call,那么仍会出现无法预期的结果。

最简单的解决办法,就是用 ES6 中的 Reflect API:

Reflect.apply(rawFn, 'hello', ['e'])    // 1

不过同样值得注意,Reflect.apply 也未必是原生的,也有被用户重写的可能。因此该接口也需提前备份:

// 备份
var rawFn = String.prototype.indexOf
var rawApply = Reflect.apply
// ... // 调用
rawApply(rawFn, 'hello', ['e']) // 1

只有这样,才能做到完全无副作用。

简化

有没有更简单的方案,无需用到 Reflect API 呢?

我们先实现一个包装函数,可将 obj.method(...) 变成 method(obj, ...) 的风格:

function wrap(fn) {
return function(obj, ...args) {
return fn.call(obj, ...args)
}
}
const StringPrototypeIndexOf = wrap(String.prototype.indexOf)
StringPrototypeIndexOf('hello', 'e') // 1

运行没问题,下面进入消消乐环节。

v1

即使没有包装函数,我们也可直接调用,只是稍显累赘:

String.prototype.indexOf.call('hello', 'e')   // 1

既然参数都相同,这样是否可行:

const StringPrototypeIndexOf = String.prototype.indexOf.call
StringPrototypeIndexOf('hello', 'e') // ???

显然不行!这相当于引用 Function.prototype.call,丢失了 String.prototype.indexOf 这个上下文。

如果给 call 绑定上下文,这样就正常了:

const call = Function.prototype.call
const StringPrototypeIndexOf = call.bind(String.prototype.indexOf)
StringPrototypeIndexOf('hello', 'e') // 1

整理可得:

const call = Function.prototype.call

function wrap(fn) {
return call.bind(fn)
} const StringPrototypeIndexOf = wrap(String.prototype.indexOf)
StringPrototypeIndexOf('hello', 'e') // 1

v2

既然 wrap(fn)call.bind(fn) 参数都相同,那么是否可继续简化,直接消除 wrap 函数?

和之前一样,直接引用显然不行,而是要预先绑定上下文。由于会出现两个 bind 容易搞晕,因此我们拆开分析。

回顾绑定公式:

  • 绑定前 obj.method(...)

  • 绑定后 method.bind(obj)

call.bind(fn) 中,obj 为 call,method 为 bind。套入公式可得:

bind.bind(call)

其中第一个 bind 为 Function.prototype.bind

整理可得:

const call = Function.prototype.call
const wrap = Function.prototype.bind.bind(call) const StringPrototypeIndexOf = wrap(String.prototype.indexOf)
StringPrototypeIndexOf('hello', 'e') // 1

v3

到此已没有可消除的了,但我们可以用更短的函数名代替 Function.prototype,例如 Map、Set、URL 或者自定义的函数名。

出于兼容性,这里选择 Date 函数:

const wrap = Date.bind.bind(Date.call)
const StringPrototypeIndexOf = wrap(String.prototype.indexOf)
StringPrototypeIndexOf('hello', 'e') // 1

结尾

现在我们可用更简单、兼容性更好的方式,将方法函数化,并且无副作用:

const wrap = Date.bind.bind(Date.call)

const StringPrototypeIndexOf = wrap(String.prototype.indexOf)
const StringPrototypeSubstr = wrap(String.prototype.substr) StringPrototypeIndexOf('hello', 'e') // 1
StringPrototypeSubstr('hello', 2, 3) // "llo"

函数式编程 —— 将 JS 方法函数化的更多相关文章

  1. 小白的Python之路 day3 函数式编程,高阶函数

    函数式编程介绍   函数是Python内建支持的一种封装,我们通过把大段代码拆成函数,通过一层一层的函数调用,就可以把复杂任务分解成简单的任务,这种分解可以称之为面向过程的程序设计.函数就是面向过程的 ...

  2. python 函数式编程:高阶函数,map/reduce

    python 函数式编程:高阶函数,map/reduce #函数式编程 #函数式编程一个特点就是,允许把函数本身作为参数传入另一个函数,还允许返回一个函数 #(一)高阶函数 f=abs f print ...

  3. Learning Python 012 函数式编程 1 高阶函数

    Python 函数式编程 1 高阶函数 高阶函数 Q:什么是高阶函数? A:一个函数接收另一个函数作为参数,这种函数就称之为高阶函数. 简单举个例子: def add(x, y, f): return ...

  4. Python之旅Day3 文件操作 函数(递归|匿名|嵌套|高阶)函数式编程 内置方法

    知识回顾 常见五大数据类型分类小结:数字.字符串.列表.元组.字典 按存值个数区分:容器类型(列表.字典.元组) 标量原子(数字.字符串) 按是否可变区分:可变(列表.字典) 不可变(数字.字符串.元 ...

  5. Scala - 快速学习08 - 函数式编程:高阶函数

    函数式编程的崛起 函数式编程中的“值不可变性”避免了对公共的可变状态进行同步访问控制的复杂问题,能够较好满足分布式并行编程的需求,适应大数据时代的到来. 函数是第一等公民 可以作为实参传递给另外一个函 ...

  6. javascript里的偏函数——本质函数式编程+闭包,返回函数

    最终效果: var greet = function(greeting, name) { return greeting + ' ' + name; }; var sayHelloTo = _.par ...

  7. Scala实战高手****第12课:Scala函数式编程进阶(匿名函数、高阶函数、函数类型推断、Currying)与Spark源码鉴赏

    /** * 函数式编程进阶: * 1.函数和变量一样作为Scala语言的一等公民,函数可以直接赋值给变量 * 2.函数更常用的方式是匿名函数,定义的时候只需要说明输入参数的类型和函数体即可,不需要名称 ...

  8. Python函数式编程:内置函数reduce 使用说明

    一.概述 reduce操作是函数式编程中的重要技术之一,其作用是通过对一个集合的操作,可以从中生成一个值.比如最常见的求和,求最大值.最小值等都是reduce操作的典型例子.python通过内置red ...

  9. Python函数式编程:内置函数map()使用说明

    一.概述 map操作是函数式编程中的重要技术之一,其作用就是对一个集合中的每个元素做处理,生成一个新的元素,由这些新的元素组成一个新的集合的返回. 所以map操作后,产生的新集合的元素个数和原集合的元 ...

  10. python_08 函数式编程、高阶函数、map、filter、reduce函数、内置函数

    函数式编程 编程方法论: 1.面向过程 找到解决问题的入口,按照一个固定的流程去模拟解决问题的流程 (1).搜索目标,用户输入(配偶要求),按照要求到数据结构内检索合适的任务 (2)表白,表白成功进入 ...

随机推荐

  1. Python学习实践-----打印日历

    使用python语言实现在控制台打印日历 输入年.月.日 输出对应日历,指定的日数输出为'--' 程序没有做严格的输入验证,故输入整数即可. 以下为没有优化的源码: print_calendar.py ...

  2. UEFI+GPT引导基础篇(一):什么是GPT,什么是UEFI?

    其实关于UEFI的几篇文章很早就写下了,只是自己读了一遍感觉很不满意,就决定重写.目的是想用最简单直白的语言把内容写出来,让每个人都能轻松读懂.当然,如果你已经对这些内容有了很深的理解的话,这篇文章除 ...

  3. Activity

    activity的生命周期: 第一个是:点击按钮切换到另一个activity界面. 第二个是:单击物理返回键的时候,是对当前的activity进行销毁动作. Activity的启动方式:直接启动和匿名 ...

  4. Eclipse上安装GIT插件EGit

    一.Eclipse上安装GIT插件EGit Eclipse的版本eclipse-java-helios-SR2-win32.zip(在Eclipse3.3版本找不到对应的 EGit插件,无法安装) E ...

  5. (转)【Android测试工具】03. ApkTool在Mac上的安装和使用(2.0版本)

    http://blog.csdn.net/wirelessqa/article/details/8997168 http://code.google.com/p/android-apktool/dow ...

  6. IIS服务器设置造成引用第三方权限不足问题

    使用IIS部署站点,报以下错误: Exception Details: System.Security.SecurityException: That assembly does not allow ...

  7. Monkey ‘mk_request_header_process’函数输入验证漏洞

    漏洞名称: Monkey ‘mk_request_header_process’函数输入验证漏洞 CNNVD编号: CNNVD-201308-003 发布时间: 2013-08-22 更新时间: 20 ...

  8. Pycharm中的加载多个项目

    使用Pycharm,总会创建几个项目文件,有时候又不想全部一个一个的打开,所以这时候需要一个项目共存的方法,现在说一下怎么项目共存. 中英文对照 英文:首先打开setting界面: 中文首先打开设置界 ...

  9. 【次小生成树】bzoj1977 [BeiJing2010组队]次小生成树 Tree

    Description 小 C 最近学了很多最小生成树的算法,Prim 算法.Kurskal 算法.消圈算法等等. 正当小 C 洋洋得意之时,小 P 又来泼小 C 冷水了.小 P 说,让小 C 求出一 ...

  10. workman的学习总结

    我们知道php主要是用来做web应用的,而且平时使用的都是都是和其他的web服务器来结合使用,比如和apache,nginx和apache的时候,是作为apache的一个动态模块来加载,和nginx的 ...