首页 > 移动平台 > 详细

js函数--call()函数、apply()函数、bind()函数的使用与区别

时间:2021-09-10 06:39:21      阅读:12      评论:0      收藏:0      [点我收藏+]
<!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>函数--call()函数、apply()函数、bind()函数的使用与区别</title>
</head>
<body>
    <script>
         /*
            javascript函数--call()函数、apply()函数、bind()函数的使用与区别:
                在js中,每个函数都包含两个非继承而来的函数apply()和call(),
                这两个函数作用都是一样的,都是为了改变函数运行时的上下文而存在的,
                实际就是改变函数内部的this指向。
                而bin()函数也可以达到这个目的,但是在处理上与另外两个有一定区别。
        */
        /*
            1.call()
            2.apply()
            3.bind()
            4.三者比较
            5.巧妙用法
        */

        // 1.call()
             /*
                call函数调用一个函数时,会将该函数的执行对象上下文改变为另一个对象。

                function.call(thisArg,arg1,arg2,...)

                thisArg
                可选的。在 function 函数运行时使用的 this 值。
                请注意,this可能不是该方法看到的实际值:如果这个函数处于非严格模式下,
                则指定为 null 或 undefined 时会自动替换为指向全局对象,原始值会被包装。

                arg1, arg2, ...
                指定的参数列表。

                返回值:使用调用者提供的 this 值和参数调用该函数的返回值。
                若该方法没有返回值,则返回 undefined。
             */

            //1.无arg1
            var person = {
                fullName: function() {
                    return this.firstName + " " + this.lastName;
                }
            }
            var person1 = {
                firstName:"Bill",
                lastName: "Gates",
            }
            person.fullName.call(person1);  // 将返回 "Bill Gates"

            //2.有arg1
            function add(x,y){
                return x+y;
            }
            //通过call()函数进行add()函数调用
            function myAddCall(x,y){
                //调用add()函数的call()函数
                return add.call(this,x,y);
            }
            console.log(myAddCall(10,20));//输出”30“

            //3.有arg1
            var person = {
                fullName: function(city, country) {
                        return this.firstName + " " + this.lastName + "," + city + "," + country;
                    }
            }
            var person1 = {
                firstName:"Bill",
                lastName: "Gates"
            }
            //调用call,this转到person1
            console.log(person.fullName.call(person1, "Seattle", "USA"));//Bill Gates,Seattle,USA

        // 2.apply()
             /*
                apply()函数的作用域与call()函数是一样的,只是在传参时有所不同。

                function.apply(thisArg,[argsArray])

                thisArg
                必选的。在 func 函数运行时使用的 this 值。
                请注意,this可能不是该方法看到的实际值:如果这个函数处于非严格模式下,
                则指定为 null 或 undefined 时会自动替换为指向全局对象,原始值会被包装。

                argsArray
                可选的。一个数组或者类数组对象,其中的数组元素将作为单独的参数传给 func 函数。
                如果该参数的值为 null 或  undefined,则表示不需要传入任何参数。从ECMAScript 5 开始可以使用类数组对象。

                返回值:调用有指定this值和参数的函数的结果。
             */

             //1.无arg1
             var person = {
                fullName: function() {
                    return this.firstName + " " + this.lastName;
                }
            }
            var person1 = {
                firstName: "Bill",
                lastName: "Gates",
            }
            person.fullName.apply(person1);  // 将返回 "Bill Gates"

            //2.有arg1
            var person = {
                fullName: function(city, country) {
                    return this.firstName + " " + this.lastName + "," + city + "," + country;
                }
            }
            var person1 = {
                firstName:"John",
                lastName: "Doe"
            }
            console.log(person.fullName.apply(person1, ["Oslo", "Norway"]));//John Doe,Oslo,Norway

        // 3.bind()
             /*
                bind()函数创建一个新的函数,在调用时设置this关键字为提供的值,
                在执行新函数时,将给定的参数列表作为原函数的参数序列,从前往后匹配。
                bind() 方法创建一个新的函数,在 bind() 被调用时,这个新函数的 this 被指定为 bind() 的第一个参数,
                而其余参数将作为新函数的参数,供调用时使用。

                function.bind(thisArg[, arg1[, arg2[, ...]]])

                thisArg
                调用绑定函数时作为 this 参数传递给目标函数的值。
                如果使用new运算符构造绑定函数,则忽略该值。
                当使用 bind 在 setTimeout 中创建一个函数(作为回调提供)时,作为 thisArg 传递的任何原始值都将转换为 object。
                如果 bind 函数的参数列表为空,或者thisArg是null或undefined,执行作用域的 this 将被视为新函数的 thisArg。

                arg1, arg2, ...
                当目标函数被调用时,被预置入绑定函数的参数列表中的参数。

                返回值:返回一个原函数的拷贝,并拥有指定的 this 值和初始参数。
             */
            //无arg1
            const module = {
                x: 42,
                getX: function() {
                    return this.x;
                }
            };

            const unboundGetX = module.getX;
            console.log(unboundGetX()); // undefined-----全局无x

            const boundGetX = unboundGetX.bind(module);
            console.log(boundGetX());//42

            //有arg1
            var person1 = {
                fullName1: function(city, country) {
                        return this.firstName + " " + this.lastName + "," + city + "," + country;
                    }
            }
            var fullName11=person1.fullName1;
            console.log(fullName11( "Seattle", "USA"));//undefined undefined,Seattle,USA

            function aa(x,y){
                return fullName11.bind(fullName11,x, y);
            }
            console.log(aa( "Seattle", "USA")());//undefined undefined,Seattle,USA

        // 4.三者比较
            /*
                相同之处:
                    它们在功能上是没有区别的,都是改变this的指向(第一个参数都是this的指向对象),它们的区别主要是在于方法的实现形式和参数传递上的不同。
                  
                不同之处:
                    (1)call() 和 apply() 会立即执行,而 bind() 不会立即执行,它返回一个函数。
                  (2)call() 期望所有参数都单独传递,参数之间用逗号分隔,而 apply() 的参数都必须放在一个数组里面传进去。
                  (3)bind() 除了返回的是一个函数以外,它的参数和call() 一样。
            */
        // 5.巧妙用法
            //5.1求数组中的最大项和最小项
                /*
                    数组本身没有max()和min()函数,无法直接获取到最大最小值,但是Math却有
                */
                var arr=[3,5,7,2,9,11];
                //求数组最大值
                console.log(Math.max.apply(null,arr));
                //求数组最小值
                console.log(Math.min.apply(null,arr));
    </script>
</body>
</html>

  

js函数--call()函数、apply()函数、bind()函数的使用与区别

原文:https://www.cnblogs.com/fei-yu9999/p/15247310.html

(0)
(0)
   
举报
评论 一句话评论(0
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!