手写call-apply-bind以及了解柯里化

简介: 手写call-apply-bind以及了解柯里化

柯里化

”函数柯里化”是指将多变量函数拆解为单变量的多个函数的依次调用,


add(1,2,3)
add(1)(2)(3)

其实就利用闭包,将变量都存起来并返回一个函数,最后在执行这个函数


柯里化的作用

参数复用


提前返回


延迟运行


(以上三种作用可以看这篇博客函数柯里化_runner_123的博客-CSDN博客_函数柯里化)


function curry() {
            let allArgs = [...arguments]
                // 返回一个新函数
            function curried() {
                allArgs.push(...arguments)
                return curried
            }
            // 重写toString
            curried.toString = function() {
                return allArgs.reduce((prev, curr) => (prev + curr), 0)
            }
            return curried;
        }
        let add = curry(3);
        /*         let a = add(1)(2)(3)
                console.log(a.toString()); */
        /* let a = add(1, 2)(3, 4)(5, 6)
         console.log(a.toString()); */


这里先写个初步版本的柯里化函数,后面还需改善,需要让toString自动化执行,不需要手动执行,今天折腾了一下午自动执行toString结果都输出函数主体,不知道怎么回事,后面有空再折腾吧(可能得继续理解一下这篇博客 https://juejin.cn/post/6864378349512065038#heading-27  )


myCall

 

// 不能用箭头函数,会绑定到window,箭头函数的this指向它创建时候的环境
        Function.prototype.myCall = function(context, ...args) {
            context = context || window
            const key = Symbol()
            context[key] = this
            let res = context[key](...args)
            delete context[key]
            return res
        }
        function go(a, b) {
            console.log(this.c + a + b);
        }
        let obj = {
            c: 10
        }
        go.myCall(obj, 1, 4)


myApply

Function.prototype.myApply = function(context, args) {
            context = context || window
            let key = Symbol()
            context[key] = this
            let res = context[key](...args)
            delete context[key]
            return res
        }
        function go(a, b) {
            console.log(this.c + a + b);
        }
        let obj = {
            c: 20
        }
        go.myApply(obj, [10, 20])


myBind

Function.prototype.myBind = function(context, ...args) {
            return (...restArgs) => this.call(context, ...args, ...restArgs)
        }
        function go(a, b) {
            console.log(this.c + a + b);
        }
        let obj = {
            c: 10
        }
        let r = go.myBind(obj, 100, 200)
        r()
相关文章
|
2天前
|
JavaScript 前端开发 开发者
call、bind、apply区别
【10月更文挑战第26天】`call`、`bind` 和 `apply` 方法在改变函数 `this` 指向和参数传递方面各有特点,开发者可以根据具体的需求和使用场景选择合适的方法来实现更灵活和高效的JavaScript编程。
7 1
|
3月前
|
JavaScript 前端开发 测试技术
手写call , apply , bind 方法的实现
本文通过实例讲解了JavaScript中`call`、`apply`及`bind`方法的用途与实现。以`call`为例,展示了如何改变函数内的`this`指向,并立即执行该函数。通过在`Function.prototype`上定义`myCall`,利用`Symbol`确保新增属性的唯一性,从而避免命名冲突。接着介绍了如何处理不定数量的参数传递,最终实现了自定义的`myCall`方法。随后简述了`apply`与`call`的区别,并展示了其实现方式,主要在于参数传递形式的不同。最后,通过`bind`方法创建了一个返回新函数的例子,该新函数具有固定的`this`上下文,同时支持分批参数传递。
30 2
手写call , apply , bind 方法的实现
|
4月前
|
JavaScript
js【详解】bind()、call()、apply()( 含手写 bind,手写 call,手写 apply )
js【详解】bind()、call()、apply()( 含手写 bind,手写 call,手写 apply )
27 0
|
JavaScript 前端开发
面试官: call、apply和 bind有什么区别?
面试官: call、apply和 bind有什么区别?
|
6月前
|
JavaScript 前端开发
call函数和apply函数的区别
call函数和apply函数的区别
51 0
|
前端开发 JavaScript Java
函数防抖节流原理及封装+闭包+call/apply/bind
函数防抖节流原理及封装+闭包+call/apply/bind
88 0
bind、call、apply 区别
bind、call、apply 区别
76 0
|
前端开发 JavaScript
手写javascript中的call、apply、bind方法~
手写javascript中的call、apply、bind方法记录
60 1