• proxy实现链式编程


    利用 Proxy,可以将读取属性的操作(get),转变为执行某个函数,从而实现属性的链式操作。
    设置 Proxy 以后,达到了将函数名链式使用的效果

    var pipe = function (value) {
      var funcStack = [];
      var oproxy = new Proxy({} , {
        get : function (pipeObject, fnName) {
          if (fnName === 'get') {
            return funcStack.reduce(function (val, fn) {
              return fn(val);
            },value);
          }
          funcStack.push(window[fnName]);
          return oproxy;
        }
      });
    
      return oproxy;
    }
    
    var double = n => n * 2;
    var pow    = n => n * n;
    var reverseInt = n => n.toString().split("").reverse().join("") | 0;
    
    pipe(3).double.pow.reverseInt.get; // 63
    console.log(pipe(3).double.pow.reverseInt.get) // 63
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23

    经过打断点,在控制台看执行过程:
    执行过程是从左到右的;
    上述函数执行过程,value为3会一直在,并不会被销毁(不足为奇哈)。
    proxy在pipe(3):生成一个proxy并且将其返回后,后续的属性操作都走proxy的handler了

    数组的reduce方法

    reduce() 方法对数组中的每个元素按序执行一个由您提供的 reducer 函数,
    每一次运行 reducer 会将先前元素的计算结果作为参数传入,最后将其结果汇总为单个返回值。
    
    第一次执行回调函数时,不存在“上一次的计算结果”。
    如果需要回调函数从数组索引为 0 的元素开始执行,则需要传递初始值。
    否则,数组索引为 0 的元素将被作为初始值 initialValue,
    迭代器将从第二个元素开始执行(索引为 1 而不是 0)。
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7

    参数
    callbackFn
    一个“reducer”函数,包含四个参数:

    • previousValue:上一次调用 callbackFn 时的返回值。在第一次调用时,若指定了初始值 initialValue,其值则为 initialValue,否则为数组索引为 0 的元素 array[0]。
    • currentValue:数组中正在处理的元素。在第一次调用时,若指定了初始值 initialValue,其值则为数组索引为 0 的元素 array[0],否则为 array[1]。
    • currentIndex:数组中正在处理的元素的索引。若指定了初始值 initialValue,则起始索引号为 0,否则从索引 1 起始。
    • array:用于遍历的数组。

    initialValue 可选

    • 作为第一次调用 callback 函数时参数 previousValue 的值。若指定了初始值 initialValue,则 currentValue 则将使用数组第一个元素;否则 previousValue 将使用数组第一个元素,而 currentValue 将使用数组第二个元素。

    返回值
    使用“reducer”回调函数遍历整个数组后的结果。

  • 相关阅读:
    行业追踪,2023-10-16
    Windows服务器被入侵后如何实现排查工作,应该从那几方面入手,排查什么内容
    centeros 7安装mysql
    Vue基础学习概念
    Linux - 用户级缓冲区和系统缓冲区 - 初步理解Linux当中文件系统
    一款清理本地仓库jar包的maven插件
    【鸿蒙应用ArkTS开发系列】- 云开发入门实战一使用鸿蒙登录组件实现客户端登录
    基于Java实现的离散数学测试实验
    上周热点回顾(3.27-4.2)
    HTML5期末考核大作业 基于HTML+CSS+JavaScript仿王者荣耀首页 游戏网站开发 游戏官网设计与实现
  • 原文地址:https://blog.csdn.net/weixin_43131046/article/details/128189759