【JavaScript高级】bind，call和apply的讲解

最新推荐文章于 2024-10-12 10:59:09 发布

阿山同学.

最新推荐文章于 2024-10-12 10:59:09 发布

阅读量94

点赞数

文章标签：后端前端 javascript

本文链接：https://blog.csdn.net/weixin_50112395/article/details/124589639

版权

不多废话直接上示例：

1，call

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> </title>
    <style>

    </style>
</head>

<body>
    <script>
        function 打亮亮(time) {
            // time 次数
            console.log(this.uname, '跳着打了', time, '次')
        }
        var emp1 = {
                uname: '新哥',
            }
            // 1，把大亮亮放到emp1里面
        emp1.xx = 打亮亮
            // 调用emp1的打亮亮
        emp1.xx(5)
            // 删除掉emp1中储存的打亮亮

        delete emp1.xx;
        // 使用系统提供的call
        // 函数.call（对象，参数）：自动隐式完成-把对象放在函数里面，调用后删除
        // call（）从参数2开始就是传递给函数本省的参数

        打亮亮.call(emp1);
        // 范式:fn.call(a,b)->实际执行->a.fn(b)
    </script>
</body>

</html>

2，apply

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> </title>
    <style>

    </style>
</head>

<body>
    <script>
        //    apply:域call作用十分相似
        // 都是零食把函数放在对象里执行
        function pay(sala) {
            console.log(this.salary * n);
        };
        var emp = {
                ename: '北北',
                salary: 10000
            }
            //使用call算出10月的工资

        pay.call()


        // 求最大值
        var nums = [123, 465, 1213, 1524, 3463, 1218, 1829]
        var emp = Math.max(nums);
        console.log(emp)


        // apply找最大值
        var nums = [123, 465, 1213, 1524, 3463, 1218, 1829];
        // max:只能接受一个一个传递的参数
        //apply:把数组作为函数的参数,数组->一个一个传递的
        // math.max.apply(a,b) -> A.Math.max(b)
        // Math.max 不需要任何存储在任何对象中,独立就能运行,所以参数1随便写,没有任何影响
        var m = Math.max.apply(0, nums)
            // 在es6之前只有apply来转换数组为参数
    </script>
</body>

</html>

3，bind

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>bind</title>
    <style>

    </style>
</head>

<body>
    <script>
        // bind:和call相似
        // 临时把函数放在对象中,立即执行
        // bind不是临时的是永久的
        // bind:不会立即执行,返回处理后的函数
        function pay(n) {
            console.log(this.salary * n);
        };
        var emp = {
            ename: "beibei",
            salary: 12000
        };
        // 用call实现计算十个月工资
        pay.call(emp, 10);
        // 用bind() 不会触发pay函数,而是返回一个值
        pay.bind(emp, 10);
        // 所以只能转换为值
        var salarys = pay.bind(emp, 10);
        // 返回值是一个函数,其中的boundthis 属性储存了this指向
        console.dir(salarys);
        // 在后续用()来触发
        // 通常在实际情况中配合定时器来使用
        // 在React框架中常用
    </script>
</body>

</html>

bind打印结果输出：