zoukankan      html  css  js  c++  java
  • 温故而知新:柯里化 与 bind() 的认知

    什么是柯里化?
    科里化是把一个多参数函数转化为一个嵌套的一元函数的过程。(简单的说就是将函数的参数,变为多次入参)

    const curry = (fn, ...args) => fn.length <= args.length ? fn(...args) : curry.bind(null, fn, ...args);
    // 想要看懂上面这个函数,重点在于全面理解bind的用法。
    // 思路倒是很简单,就是在参数未搜集完善之前,通过bind来实现参数搜集,
    // 当搜集完成时,就可以执行原函数了。
    const add = (x, y) => x + y;
    const curryadd = curry(add);
    curryadd(4)(4); // 8
    

    关于bind的认知
    bind 和 call / apply 很相似,都可以改变 this 的指向,也都可以传递参数。但还是有一些区别:

     1)bind不会立即执行函数,而是返回一个新函数。譬如在 React 中我们经常用 bind 将函数的 this 指向组件本身:

    export default class ClickOutside extends Component {
      constructor(props) {
        super(props)
        this.getContainer = this.getContainer.bind(this)
      }
     
      getContainer(ref) {
        this.container = ref
      }
    }
    

    2)除了 this 以外的参数,会把原函数的参数位给占领(扰乱王?鸠占鹊巢?小三上位?),也就是预设值绑定(赋值):

    // demo1: 演示预设绑定 x 和 y 的参数
    const add = (x, y, z) => x + y + z;
    add.bind(null, 1, 2)(3) // => 6 , 等价于 add(1, 2, 3)
      
    // demo2:  演示多次bind
    const add = (x, y) => x + y;
    const myadd = add.bind(null, 1).bind(null, 2)
    myadd() // => 3 , 等价于 add(1, 2)
     
    // demo3: 和...args这种数组解构结合使用时可别懵了 O(∩_∩)O哈哈~
    const add = (...args) => console.log(args, args.length);
    const myadd = add.bind(null, 1).bind(null, 2).bind(null, 3).bind(null, 4).bind(null, 5)
    myadd() // =>  [1, 2, 3, 4, 5] 5

    这种特性实际上和 偏应用 很相似,区别仅仅在于偏应用不需要关注 this 的绑定。

    偏应用的目的只有一个,那就是通过预设值减少函数的参数位,达到简化函数、惰性函数、可重用函数等目的。

  • 相关阅读:
    浏览器渲染引擎工作原理
    js运行原理与机制
    新式网络浏览器幕后揭秘
    网站身份信息验证规则Cookie、Session、Token、JWT说明
    http简介
    react全家桶从0搭建一个完整的react项目(react-router4、redux、redux-saga)
    雅虎前端优化的35条军规
    服务端渲染与客户端渲染
    DataURL与File,Blob,canvas对象之间的互相转换的Javascript
    docker安装samba
  • 原文地址:https://www.cnblogs.com/CyLee/p/9943714.html
Copyright © 2011-2022 走看看