手写系列:call、apply、bind、函数柯里化
少废话,show my code
call
原理都在注释里了
// 不覆盖原生call方法,起个别名叫myCall,接收this上下文context和参数params
Function.prototype.myCall = function (context, ...params) {
// context必须是个对象并且不能为null,默认为window
const _this = typeof context === "object" ? context || window : window;
// 为了避免和原有属性冲突,定义一个Symbol类型的属性
const key = Symbol();
// call方法的目的是改变函数的this指向,函数的this指向它的调用者,也就是说我们的目标是改变函数的调用者。
// 下面的this就是函数本身,给context增加一个名为[key]的方法指向this,就能用context来调用this了
context[key] = this;
const result = _this[key](...params);
// 获取函数执行结果后,删除以上添加的属性
delete context[key];
return result;
};
apply
和call的区别在于第二个参数
Function.prototype.myApply = function (context, params) {
return this.myCall(context, ...params);
};
bind
和call的区别在于不立即执行,返回一个函数即可
Function.prototype.myBind = function (context, ...params) {
const _this = this;
// 返回的函数也能接收参数,但是是放在params后面
return function (...args) {
return _this.myCall(context, ...[...params, ...args]);
};
};
函数柯里化
函数柯里化,举例,有如下函数
function test(a, b, c, d, e) {
console.log(a + b + c + d + e);
}
有一个curry转换函数对test函数进行一些转换
function curry(){
// todo
}
const transformTest = curry(test, ...args)
转换之后,原本一次性传过去的参数现在可以分步传参
// 使得
test(1,2,3,4,5)
// 等同于
transformTest(1)(2)(3)(4)(5)
// 或者
transformTest(1, 2)(3)(4, 5)
// 又或者
transformTest(1, 2, 3, 4)(5)
curry函数应该怎么写?
function curry(fn, ...args) {
// 判断参数个数是不是等于原函数参数个数
// 如果是,直接返回调用结果
if ([...args].length === fn.length) {
return fn(...args);
} else {
// 如果不是,则返回一个函数
return (...params) => {
// 将前面传的全部参数传给curry,回到第一步的if判断,直到参数个数满足要求
return curry(fn, ...args, ...params);
};
}
}
本文GitHub链接:手写系列:call、apply、bind、函数柯里化
手写系列:call、apply、bind、函数柯里化的更多相关文章
- 前端面试手写代码——JS函数柯里化
目录 1 什么是函数柯里化 2 柯里化的作用和特点 2.1 参数复用 2.2 提前返回 2.3 延迟执行 3 封装通用柯里化工具函数 4 总结和补充 1 什么是函数柯里化 在计算机科学中,柯里化(Cu ...
- 前端进击的巨人(五):学会函数柯里化(curry)
柯里化(Curring, 以逻辑学家Haskell Curry命名) 写在开头 柯里化理解的基础来源于我们前几篇文章构建的知识,如果还未能掌握闭包,建议回阅前文. 代码例子会用到 apply/call ...
- 【转载】JS中bind方法与函数柯里化
原生bind方法 不同于jQuery中的bind方法只是简单的绑定事件函数,原生js中bind()方法略复杂,该方法上在ES5中被引入,大概就是IE9+等现代浏览器都支持了(有关ES5各项特性的支持情 ...
- 深入理解javascript函数进阶系列第二篇——函数柯里化
前面的话 函数柯里化currying的概念最早由俄国数学家Moses Schönfinkel发明,而后由著名的数理逻辑学家Haskell Curry将其丰富和发展,currying由此得名.本文将详细 ...
- js bind es5函数柯里化
绑定函数 bind()最简单的用法是创建一个函数,使这个函数不论怎么调用都有同样的this值.常见的错误就像上面的例子一样,将方法从对象中拿出来,然后调用,并且希望this指向原来的对象. 如果不做特 ...
- 函数柯里化与偏函数+bind
简单理解: 1,函数柯里化就是把多参数函数分解为多return的单参数函数: 举个例子(伪代码): function func (a, b, c){ return } 柯里化为 function fu ...
- JavaScript中的函数柯里化与反柯里化
一.柯里化定义 在计算机科学中,柯里化是把 接受多个参数的函数 变换成 接受一个单一参数(最初函数的第一个参数)的函数 并且返回 接受余下参数且返回结果的新函数的技术 高阶函数 高阶函数是实现柯里化的 ...
- JavaScript函数柯里化的一些思考
1. 高阶函数的坑 在学习柯里化之前,我们首先来看下面一段代码: var f1 = function(x){ return f(x); }; f1(x); 很多同学都能看出来,这些写是非常傻的,因为函 ...
- 一道javascript面试题(闭包与函数柯里化)
要求写一个函数add(),分别实现能如下效果: (1)console.log(add(1)(2)(3)(4)()); (2)console.log(add(1,2)(3,4)()); (3)conso ...
随机推荐
- 第15.46节、PyQt显示部件:OpenGL Widget部件功能简介及使用案例
专栏:Python基础教程目录 专栏:使用PyQt开发图形界面Python应用 专栏:PyQt入门学习 老猿Python博文目录 老猿学5G博文目录 一.概述 OpenGL Widget部件是一个Op ...
- PyQt(Python+Qt)学习随笔:Qt Designer中主窗口对象的tabShape属性
tabShape属性用于控制主窗口标签部件(Tab Widget)中的标签的形状,对应类型为QTabWidget.TabShape,有两种取值: 1.QTabWidget.Rounded:对应值为0, ...
- Eclipse配置反编译
Eclipse配置反编译 之前用IDEA一直让我很喜欢的点就是,什么东西都自动集成,下载.但是终归是学(po)习(jie)版,在正式企业开发中,要小心版权的问题(公司给你买了当我没说).抛开插件能 ...
- pandas 标签映射成数值的几种方法
1. preprocessing.LabelEncoder() import pandas as pd from sklearn import preprocessing le = preproces ...
- print(end="\r") 滚动输出到屏幕
for i in range(10000): print(i, end = "\r") print(end="\r") 滚动输出到屏幕
- App界面
首先我直接放图,存储记录一下,自己开发的app,后端是java分布式,
- I am zhoukangyang!
我是 \(\texttt{zhoukangyang}\),一名来自浙江省,杭州市的初二菜鸡 \(\texttt{oier}\) . 洛谷zhoukangyang 很多东西因为太垃圾所以 了,要开 请洛 ...
- 题解-CF436E Cardboard Box
题面 CF436E Cardboard Box \(n\) 个关卡,对每个关卡可以花 \(a_i\) 时间得到 \(1\) 颗星,或花 \(b_i\) 时间得到 \(2\) 颗星,或不玩.问获得 \( ...
- AcWing 295. 清理班次
这题显然跟 区间覆盖 是一样的,而且值域在 \(1000000\) 以内,不用离散化,直接贪心求解即可. 具体地:设 \(nxt[i]\) 为从值域 \(i\) 出发,能到达最远的右端点. 一段段地跳 ...
- 本地安装yum源脚本
rpm -qa|grep yum //检查是否安装了yum. 如果没有安装就执行下面的文件 创建一个以xxx.sh结尾的文件 #!/bin/bash #创建两个文件用于挂载文件 mkdir /mn ...