05 # 手写 bind

最新推荐文章于 2024-04-28 16:22:04 发布

凯小默

最新推荐文章于 2024-04-28 16:22:04 发布

阅读量137

点赞数

分类专栏： JavaScript 前端面试之道文章标签： javascript

本文链接：https://blog.csdn.net/kaimo313/article/details/134169663

版权

JavaScript 同时被 2 个专栏收录

67 篇文章 4 订阅

订阅专栏

前端面试之道

27 篇文章 5 订阅

订阅专栏

本文探讨了JavaScript中bind方法的工作原理，包括如何改变函数的this指向以及参数处理。作者提供了两种实现方式，一种是简单版本，另一种是更复杂的原型继承实现，以确保bind后的函数行为一致。

摘要由CSDN通过智能技术生成

bind 干了什么？

改变 this 指向
没有让函数执行，返回一个改变 this 指向后的函数

bind 难点在于参数的收集

手写 bind

简单实现如下：

<script>
    Function.prototype.kaimoBind = function (content) {
        // 获取到 bind 里的剩余参数
        let bindArgs = Array.prototype.slice.call(arguments, 1);
        console.log("bindArgs----->", bindArgs);
        // 这里的 this 指向调用 kaimoBind 的 fn
        let that = this;
        function gn() {
            // 拿到 bind 返回函数的参数
            let gnArgs = Array.prototype.slice.call(arguments);
            console.log("gnArgs----->", gnArgs);
            // 改变 fn 的 this 指向
            return that.apply(content, bindArgs.concat(gnArgs));
        }
        return gn;
    };

    function fn(...args) {
        console.log("fn----this----->", this);
        console.log("fn----args----->", args);
        return args.join("");
    }

    let obj = {
        name: "kaimo313"
    };

    let res = fn.bind(obj, "k", "a", "i", "m", "o");
    console.log("res---bind-->", res(3, 1, 3));

    let res2 = fn.kaimoBind(obj, "k", "a", "i", "m", "o");
    console.log("res2---kaimoBind-->", res2(3, 1, 3));
</script>

在这里插入图片描述

复杂一点实现如下：

<script>
    Function.prototype.kaimoBind = function (content) {
        // 获取到 bind 里的剩余参数
        let bindArgs = Array.prototype.slice.call(arguments, 1);
        console.log("bindArgs----->", bindArgs);
        // 这里的 this 指向调用 kaimoBind 的 fn
        let that = this;
        function gn() {
            // 拿到 bind 返回函数的参数
            let gnArgs = Array.prototype.slice.call(arguments);
            console.log("gnArgs----->", gnArgs);
            // 改变 fn 的 this 指向
            return that.apply(content, bindArgs.concat(gnArgs));
        }
        function Mn() {}
        Mn.prototype = this.prototype;
        // gn 继承 Mn
        gn.prototype = new Mn();
        return gn;
    };

    function fn(...args) {
        console.log("fn----this----->", this);
        console.log("fn----args----->", args);
        return args.join("");
    }

    fn.prototype.kaimo = 313;

    let obj = {
        name: "kaimo313"
    };

    let res = fn.bind(obj, "k", "a", "i", "m", "o");
    console.log("res---bind-->", res(3, 1, 3));

    let res2 = fn.kaimoBind(obj, "k", "a", "i", "m", "o");
    console.log("res2---kaimoBind-->", res2(3, 1, 3));

    let res3 = new res2();
    console.log("res3----->", res3.kaimo);
</script>