ES5的Function新增的bind方法简单介绍

最新推荐文章于 2023-04-10 12:00:00 发布

qq20004604

最新推荐文章于 2023-04-10 12:00:00 发布

阅读量1k

点赞数

分类专栏： ES5 文章标签： bind ES5

本文链接：https://blog.csdn.net/qq20004604/article/details/53328724

版权

ES5 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

Function.bind(obj, arguments)

说明

1. 简单来说，这个的返回值是一个函数，该函数未执行，该函数中的this指向obj这个对象。
2. 有一些类似apply和call，但是apply和call是在改变this指向对象时，执行函数；
3. 但bind不执行，只单纯改变了this指向的目标；
4. 但有第二、三个甚至更多参数时，参数会依次作为Function的第一、二或更多的参数，在执行函数时，新参数则将被放置在后面；
5. 具体来说，假如原函数test有a, b, c三个参数，在bind绑定结束后，执行该函数test(1, 2, 3)
6. 在只有一个参数的情况下，a、b、c分别对应1，2，3；
7. 假如bind过程中，第二个参数是10，那么a、b、c分别对应10、1、2（注意，此时tset(1,2,3)是没变的）
8. 假如bind过程中，不仅有第二个参数，还有第三个参数20，那么a、b、c分别对应10、20、1
9. 假如bind过程中，甚至还有第四个参数30，那么a、b、c跟1、2、3就没关系了，分别是10、20、30。

兼容性写法

if (!Function.prototype.bind) {
    Function.prototype.bind = function () {
        var self = this; // 保存原函数
        var context = [].shift.call(arguments); // 需要绑定的this上下文，shift表示从数组最前面拿出一个元素
        var args = [].slice.call(arguments); // 剩余的参数转成数组，slice方法会返回一个全新的数组（避免数组按引用传递）
        return function () { // 返回一个新函数
            // 执行新函数时，将传入的上下文context作为新函数的this
            // 并且组合concat两次分别传入的参数，作为新函数的参数
            // 这里的arguments指的是新函数的参数了（bind结束后调用时，是个数组），而不是bind时的参数
            return self.apply(context, [].concat.call(args, [].slice.call(arguments)));
        }
    };
}

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Function的bind方法</title>
</head>
<body>
<script>
    // 兼容性写法
    if (!Function.prototype.bind) {
        Function.prototype.bind = function () {
            var self = this; // 保存原函数
            var context = [].shift.call(arguments); // 需要绑定的this上下文，shift表示从数组最前面拿出一个元素
            var args = [].slice.call(arguments); // 剩余的参数转成数组，slice方法会返回一个全新的数组（避免数组按引用传递）
            return function () { // 返回一个新函数
                // 执行新函数时，将传入的上下文context作为新函数的this
                // 并且组合concat两次分别传入的参数，作为新函数的参数
                // 这里的arguments指的是新函数的参数了（bind结束后调用时，是个数组），而不是bind时的参数
                return self.apply(context, [].concat.call(args, [].slice.call(arguments)));
            }
        };
    }

    function test(a, b) {
        console.log(this);
        console.log(a);
        console.log(b);
        return this.m + a + b;
    }
    var number = {
        m: 1
    }

    // bind只有一个参数时
    var onlyOne = test.bind(number);
    console.log(onlyOne(2, 3));

    // bind有两个参数时：
    var haveTwo = test.bind(number, 2);
    console.log(haveTwo(10, 20));

    // bind有三个参数时：
    var threeArguments = test.bind(number, 2, 3);
    console.log(threeArguments(10, 20));

</script>
</body>
</html>

输出结果是：

Object {m: 1}   //this指向目标（下同，下略)
2   //第一个参数a
3   //第二个参数b
6   //返回结果this.m + a + b

Object {m: 1}
2   //第一个参数使用bind绑定时的第二个参数
10  //此时第二个参数b是执行函数时的第一个参数
13  //返回结果

Object {m: 1}
2
3
6

qq20004604

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
ES5的Function新增的bind方法简单介绍

Function.bind(obj, arguments)说明1. 简单来说，这个的返回值是一个函数，该函数未执行，该函数中的this指向obj这个对象。2. 有一些类似apply和call，但是apply和call是在改变this指向对象时，执行函数；3. 但bind不执行，只单纯改变了this指向的目标；4. 但有第二、三个甚至更多参数时，参数会依次作为Function的第一、二或更多的参
复制链接

扫一扫