call、apply、bind、高阶函数

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

端脑

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

阅读量294

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/qq_43776742/article/details/103557114

版权

前端专栏收录该内容

90 篇文章 2 订阅

订阅专栏

apply与call

appl与call应用

bind

高阶函数

apply与call方法

相同点：

这两个方法的作用是一样的。设置函数体内this对象的值。

不同点

接收参数的方式不同。
apply ([thisObj [,argArray] ]);。call 的意思是把 c1 的方法放到c2上执行
call([thisObject[,arg1 [,arg2 [,…,argn]]]]);。应用某一对象的一个方法，用另一个对象替换当前对象。

    function add(c,d){
        return this.a + this.b + c + d;
    }

    var s = {a:1, b:2};
    console.log(add.call(s,3,4)); // 1+2+3+4 = 10
    console.log(add.apply(s,[5,6])); // 1+2+5+6 = 14

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

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

<body>
    <script>
        //属性 this arguments  方法apply call
        function sum(a, b, c, d) {
            console.log(a + b + c + d); // 10
            console.log(this === obj); // true
        }

        console.log(sum instanceof Object);

        var obj = {
                name: "xiaoming",
                age: 18,
                sex: "男"
            }
            // call() 也可以调用函数 它的参数除了接受实际参数外 还可以接受一个参数代表this
        sum.call(obj, 1, 2, 3, 4);
        // apply基本功能与call一样 区别在于传递参数语法不一样
        sum.apply(obj, [1, 2, 3, 4]);
		
		
    </script>
</body>

</html>

bind()

bind()方法主要就是将函数绑定到某个对象，bind()会创建一个函数，函数体内的this对象的值会被绑定到传入bind()中的第一个参数的值，例如：f.bind(obj)，实际上可以理解为obj.f()，这时f函数体内的this自然指向的是obj；

深入理解bind（）

this代表全局

 <!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
</head>

<body>
    <script type="text/javascript">
        var a = {
            b: function() {
                var func = function() {
                    console.log(this.c);
                    console.log(this === a);   //false
                    console.log(this === window);   //true
                }
                func();
            },
            c: 'hello'
        }
        a.b(); // undefined 这里的this指向的是全局作用域
        console.log(a.c); // hello
    </script>
</body>

</html>

改变this

  <!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
</head>

<body>
    <script type="text/javascript">
        var a = {
            b: function() {
                var _this = this; // 通过赋值的方式将this赋值给_this.
                var func = function() {
                    console.log(_this.c);
                }
                func();
            },
            c: 'hello'
        }
        a.b(); // hello
        console.log(a.c); // hello
    </script>
</body>

</html>

使用bind

bind()方法主要就是将函数绑定到某个对象，bind()会创建一个函数，函数体内的this对象的值会被绑定到传入bind()中的第一个参数的值

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
</head>

<body>
    <script type="text/javascript">
        // 使用bind方法一
        var a = {
            b: function() {
                var func = function() {
                    console.log(this.c);
                }.bind(this);
                func();
            },
            c: 'hello'
        }
        a.b(); // hello
        console.log(a.c); // hello

        // 使用bind方法二
        var a = {
            b: function() {
                var func = function() {
                    console.log(this.c);
                }
                func.bind(this)();
            },
            c: 'hello'
        }
        a.b(); // hello
        console.log(a.c); // hello
    </script>
</body>

</html>

高阶函数

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

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

<body>
    <script>
        // 高阶函数  
        //1 函数作为参数
        // function work(fn) {
        //     setTimeout(function() {
        //         console.log("work finished");
        //         fn();
        //     }, 2000);
        // }
        // work(function() {
        //     alert("抽根烟");
        // });

        /*2*/
        // var arr = [10, -2, 3, 34, 5];

        // arr.sort(function(a, b) {
        //     // return b-a; //降序
        //     return a - b; //升序
        // });
        // console.log(arr);

        //2.1 第二题return a-b的原理
        // Array.prototype.mysort = function(fn) {
        //     // i表示轮数
        //     for (var i = 0; i < this.length - 1; i++) {
        //         // j表示序号
        //         for (var j = 0; j <= this.length - 2 - i; j++) {
        //             if (fn(this[j], this[j + 1]) > 0) {
        //                 var temp = this[j];
        //                 this[j] = this[j + 1];
        //                 this[j + 1] = temp;
        //             }
        //         }
        //     }
        // }
        // arr.mysort(function(a, b) {
        //     return b - a; // this[j+1]-this[j]
        // });
        // console.log(arr);




        // 3 函数作为返回值
        function getRandom() {
            var random = parseInt(Math.random() * 10) + 1;
            return random;
        }

        console.log(getRandom());
        console.log(getRandom());
        // 第一次调用函数 产生一个随机数  以后再调用返回第一次的随机数
        function getRandom2() {
            var random = parseInt(Math.random() * 10) + 1;
            return function() {
                return random;
            };
        }
        var fn = getRandom2(); // fn= function() {return 5}
        //此处随机已焊死
        console.log(fn());
        console.log(fn());
        console.log(fn());
    </script>
</body>

</html>