手写函数 bindcallapply

Posted 沿着路走到底

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了手写函数 bindcallapply相关的知识,希望对你有一定的参考价值。

bind 应用

- 返回一个新的函数(旧函数不会更改),但不执行

- 绑定 `this` 和部分参数

- 如果是箭头函数,无法改变 `this` ,只能改变参数

function fn(a, b, c) 
    console.log(this, a, b, c)

const fn1 = fn.bind(x: 100)
fn1(10, 20, 30) // x: 100 10 20 30
const fn2 = fn.bind(x: 100, 1, 2)
fn2(10, 20, 30) // x: 100 1 2 10 (注意第三个参数变成了 10)

fn(10, 20, 30) // window 10 20 30 (旧函数不变)

思路

- 返回新函数

- 重新绑定 `this`

- 同时绑定执行的参数(apply 或者 call)

/**
 * @description 手写 bind
 */

// @ts-ignore
Function.prototype.customBind = function (context: any, ...bindArgs: any[]) 
    // context 是 bind 传入的 this
    // bindArgs 是 bind 传入的各个参数

    const self = this // 当前的函数本身

    return function (...args: any[]) 
        // 拼接参数
        const newArgs = bindArgs.concat(args)
        return self.apply(context, newArgs)
    

以上是关于手写函数 bindcallapply的主要内容,如果未能解决你的问题,请参考以下文章

bindcallapply的区别与实现

bindcallapply的区别与实现原理

js中的bindcallapply

javascript函数方法中bindcallapply的使用和区别

javascript函数方法中bindcallapply的使用和区别

javascript函数方法中bindcallapply的使用和区别