手写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 前端开发
js中的bind,call,apply方法的区别以及用法
JavaScript中,`bind`、`call`和`apply`均可改变函数的`this`指向并传递参数。其中,`bind`返回一个新函数,不立即执行;`call`和`apply`则立即执行,且`apply`的参数以数组形式传递。三者在改变`this`指向及传参上功能相似,但在执行时机和参数传递方式上有所区别。
35 1
|
5月前
|
JavaScript 前端开发 测试技术
手写call , apply , bind 方法的实现
本文通过实例讲解了JavaScript中`call`、`apply`及`bind`方法的用途与实现。以`call`为例,展示了如何改变函数内的`this`指向,并立即执行该函数。通过在`Function.prototype`上定义`myCall`,利用`Symbol`确保新增属性的唯一性,从而避免命名冲突。接着介绍了如何处理不定数量的参数传递,最终实现了自定义的`myCall`方法。随后简述了`apply`与`call`的区别,并展示了其实现方式,主要在于参数传递形式的不同。最后,通过`bind`方法创建了一个返回新函数的例子,该新函数具有固定的`this`上下文,同时支持分批参数传递。
41 2
手写call , apply , bind 方法的实现
|
6月前
|
JavaScript
js【详解】bind()、call()、apply()( 含手写 bind,手写 call,手写 apply )
js【详解】bind()、call()、apply()( 含手写 bind,手写 call,手写 apply )
37 0
|
JavaScript 前端开发 API
JavaScript中的new,bind,call,apply的原理及简易实现
JavaScript中的new,bind,call,apply的原理及简易实现
102 0
|
8月前
|
前端开发 JavaScript
【面试题】 JavaScript 中 call()、apply()、bind() 的用法
【面试题】 JavaScript 中 call()、apply()、bind() 的用法
|
8月前
|
前端开发 JavaScript Java
【面试题】JavaScript 中 call()、apply()、bind() 的用法
【面试题】JavaScript 中 call()、apply()、bind() 的用法
|
JavaScript 前端开发
javascript函数的call、apply和bind的原理及作用详解
javascript函数的 call、apply和bind 本质是用来实现继承的,专业点说法就是改变函数体内部 this 的指向,当一个对象没有某个功能时,就可以用这3个来从有相关功能的对象里借用过来
66 0
|
JavaScript 前端开发
JavaScript中的this指向,call、apply、bind的简单实现
JavaScript中的this指向,call、apply、bind的简单实现
66 0
|
前端开发 JavaScript
手写javascript中的call、apply、bind方法~
手写javascript中的call、apply、bind方法记录
64 1