📺 同步视频 一键三连
365天打卡记录
🔥 创作不易、大家帮然叔 B栈 一键三连
- [如何利用闭包完成类库封装] 📺 Billbill视频 📚 掘金文稿 🐱 Github
- [谈谈闭包与即时函数的应用] 📺 Billbill视频 📚 掘金文稿 🐱 Github
- [分析一下箭头语法为什么不能当做构造函数] 📺 Billbill视频 📚 掘金文稿 🐱 Github
- [闭包与科里化、偏应用函数的关系] 📺 Billbill视频 📚 掘金文稿 🐱 Github
- [如何用闭包制造惰性函数?] 📺 Billbill视频 📚 掘金文稿 🐱 Github
- [什么是闭包?如何产生闭包] 📺 Billbill视频 📚 掘金文稿 🐱 Github
- [new 一个构造函数,如果函数返回
return {}
、return null
,return 1
,return true
会发生什么情况?] 📺 Billbill视频 📚 掘金文稿 🐱 Github - [new 一个函数发生了什么?] 📺 Billbill视频 📚 掘金文稿 🐱 Github
- [判断数据类型的方式有哪些?] 📺 Billbill视频 📚 掘金文稿 🐱 Github
- [Number() 的存储空间是多大?如果后台发送了一个超过最大限制的数字怎么办?] 📺 Billbill视频 📚 掘金文稿 🐱 Github
- [0.1 + 0.2 === 0.3 嘛?为什么?怎么解决?] 📺 Billbill视频 📚 掘金文稿 🐱 Github
- [JS 整数是怎么表示的?] 📺 Billbill视频 📚 掘金文稿 🐱 Github
基本概念
好先介绍概念。
偏应用函数 Partial application
In computer science, partial application (or partial function application) refers to the process of fixing a number of arguments to a function, producing another function of smaller arity.
我们可以把他翻译成局部应用
将一个三参数的add函数变为一个add3
// Helper to create partially applied functions
// Takes a function and some arguments
const partial = (f, ...args) =>
// returns a function that takes the rest of the arguments
(...moreArgs) =>
// and calls the original function with all of them
f(...args, ...moreArgs)
// Something to apply
const add3 = (a, b, c) => a + b + c
// Partially applying `2` and `3` to `add3` gives you a one-argument function
const fivePlus = partial(add3, 2, 3) // (c) => 2 + 3 + c
fivePlus(4) // 9
柯里化 -Curried functions
柯里化是将一个多参数函数转换成多个单参数函数,也就是将一个 n 元函数转换成 n 个一元函数
const sum = (a, b) => a + b
const curriedSum = (a) => (b) => a + b
const curry = fn => x => y => fn(x , y)
curriedSum(40)(2) // 42.
const add2 = curriedSum(2) // (b) => 2 + b
add2(10) // 12
实例1: 分割函数转CSV
const split = (regex, str) => ("" + str).split(regex);
const elements = split("v1,v2,v3", /,\s*/);
const partial =
(f, ...args) =>
(...moreArgs) =>
f(...args, ...moreArgs);
const csv = partial(split, /,\s*/);
const s = csv("v1,v2,v3");
console.log(s);
实例2: Vue3 CompositionAPI
想起了来自台湾的Antfu的代码
Antfu
import { createApp, h, watchEffect, reactive } from "vue";
// 抽象的LocalStorage解决方案
const useLocalStorage = (key, defaultValue) => {
const data = reactive({});
Object.assign(
data,
(localStorage[key] && JSON.parse(localStorage[key])) || defaultValue
);
watchEffect(() => (localStorage[key] = JSON.stringify(data)));
return data;
};
上面是一个抽象Localstore钩子
// 用于指定持久化方案
const useStorage = (defaultValue) => {
return useLocalStorage("store", defaultValue);
};
const store = useStorage({count: 0})
下面我们用偏应用函数恶搞一下他
// 偏应用函数
const partial =
(f, ...args) =>
(...moreArgs) =>
f(...args, ...moreArgs);
// 指定使用LocalStorage存储
const useStorage = partial(useLocalStorage, "store");
// 声明响应式数据
const store = partial(useStorage, { count: 0 });
完整的例子
实例3: React Hooks
reacthook原理没有区别,欢迎大家补充
面试攻略
- 无
点评
- 闭包处处都有,但是能说出经典应用又是一个难题。说Helloworld和背题没啥区别。
365天打卡记录
🔥 创作不易、大家帮然叔 B栈 一键三连
- [如何利用闭包完成类库封装] 📺 Billbill视频 📚 掘金文稿 🐱 Github
- [谈谈闭包与即时函数的应用] 📺 Billbill视频 📚 掘金文稿 🐱 Github
- [分析一下箭头语法为什么不能当做构造函数] 📺 Billbill视频 📚 掘金文稿 🐱 Github
- [闭包与科里化、偏应用函数的关系] 📺 Billbill视频 📚 掘金文稿 🐱 Github
- [如何用闭包制造惰性函数?] 📺 Billbill视频 📚 掘金文稿 🐱 Github
- [什么是闭包?如何产生闭包] 📺 Billbill视频 📚 掘金文稿 🐱 Github
- [new 一个构造函数,如果函数返回
return {}
、return null
,return 1
,return true
会发生什么情况?] 📺 Billbill视频 📚 掘金文稿 🐱 Github - [new 一个函数发生了什么?] 📺 Billbill视频 📚 掘金文稿 🐱 Github
- [判断数据类型的方式有哪些?] 📺 Billbill视频 📚 掘金文稿 🐱 Github
- [Number() 的存储空间是多大?如果后台发送了一个超过最大限制的数字怎么办?] 📺 Billbill视频 📚 掘金文稿 🐱 Github
- [0.1 + 0.2 === 0.3 嘛?为什么?怎么解决?] 📺 Billbill视频 📚 掘金文稿 🐱 Github
- [JS 整数是怎么表示的?] 📺 Billbill视频 📚 掘金文稿 🐱 Github