前端面试自测知识点-- apply、call 和 bind

男娘i 2022-09-09 14:41 125阅读 0赞

#### apply 和 call ####

*      func.apply(thisArg, [argsArray]) // 第一个参数：必选，第二个：可选
 *      function.call(thisArg, arg1, arg2, ...)
 *  apply 传入的第一个参数 指定this的指向 第二个参数是一个数组（接收传递过来的参数）
 *  call 传入的第一个参数 指定this的指向 后面的参数是 传递给函数的参数
    
        const arr = [1,6,3,5,29,8,7]
        let maxNumber = Math.max.apply(Math,arr)
        let maxNummer = Math.max.call(Math,...arr)
 *  apply 改变this 指向 并传入参数（数组）
 *  call改变this指向 并传入参数（一个一个的参数）
    
    例：伪数组使用数组方法
    
        var domNodes =Array.prototyope.slice.call(document.getElementsByTagName("*)
    
    同理也可以将数组的一些方法通过 apply 或者 call 的 方法 给其他伪数组使用
    
        function log(){ 
         var args = Array.prototype.slice.call(arguments)
        args.unshift('app')
        }
 *  call/apply都是返回函数执行的结果
 *  辅助记忆：`apply`是以`a`开头，它传给`function`的参数是`Array`，也是以`a`开头的
 *  调用`call`/`apply`/`bind`的必须是个函数

#### apply、call、bind之间的区别 ####

##### call和apply的唯一区别： #####

传给function的参数写法不同：

*  `apply`是第2个参数，这个参数是一个数组，要传的参数都写在数组里
 *  `call`从第2～n的参数都是传给`function`的

##### call/apply 与 bind的区别 #####

执行：

*  call/apply 改变了函数的this上下文后，马上执行该函数
 *  bind则是返回改变了上次文后的函数，不执行该函数

返回值：

*  call/apply返回`function`的执行结果
 *  bind返回`function`的拷贝，并指定里`function`的this指向，保存了`function`的参数

#### call和apply的应用场景 ####

*  判断数据类型：
    
    `Object.prototype.toString`用来判断类型再合适不过，借用它我们几乎可以判断所有类型的数据：
    
        function isType(data, type) { 
            const typeObj = { 
                '[object String]': 'string',
                '[object Number]': 'number',
                '[object Boolean]': 'boolean',
                '[object Null]': 'null',
                '[object Undefined]': 'undefined',
                '[object Object]': 'object',
                '[object Array]': 'array',
                '[object Function]': 'function',
                '[object Date]': 'date', // Object.prototype.toString.call(new Date())
                '[object RegExp]': 'regExp',
                '[object Map]': 'map',
                '[object Set]': 'set',
                '[object HTMLDivElement]': 'dom', // document.querySelector('#app')
                '[object WeakMap]': 'weakMap',
                '[object Window]': 'window',  // Object.prototype.toString.call(window)
                '[object Error]': 'error', // new Error('1')
                '[object Arguments]': 'arguments',
            }
            let name = Object.prototype.toString.call(data) // 借用Object.prototype.toString()获取数据类型
            let typeName = typeObj[name] || '未知类型' // 匹配数据类型
            return typeName === type // 判断该数据类型是否为传入的类型
        }
        console.log(
            isType({ }, 'object'), // true
            isType([], 'array'), // true
            isType(new Date(), 'object'), // false
            isType(new Date(), 'date'), // true
        )
 *  伪数组借用数组的方法：
    
    类数组因为不是真正的数组所有没有数组类型上自带的种种方法，所以我们需要去借用数组的方法
    
    比如借用数组的push方法：
    
        var arrayLike = { 
          0: 'OB',
          1: 'Koro1',
          length: 2
        }
        Array.prototype.push.call(arrayLike, '添加元素1', '添加元素2');
        console.log(arrayLike) // {"0":"OB","1":"Koro1","2":"添加元素1","3":"添加元素2","length":4}
 *  apply获取数组的最大值和最小值
    
    apply直接传递数组做要调用方法的参数，也省一步展开数组，比如使用`Math.max`、`Math.min`来获取数组的最大值/最小值:
    
        const arr = [15, 6, 12, 13, 16];
        const max = Math.max.apply(Math, arr); // 16
        const min = Math.min.apply(Math, arr); // 6
 *  继承
    
    ES5的继承也都是通过借用父类的构造方法来实现父类方法/属性的继承：
    
        // 父类
        function supFather(name) { 
            this.name = name;
            this.colors = ['red', 'blue', 'green']; // 复杂类型
        }
        supFather.prototype.sayName = function (age) { 
            console.log(this.name, 'age');
        };
        // 子类
        function sub(name, age) { 
            // 借用父类的方法：修改它的this指向,赋值父类的构造函数里面方法、属性到子类上
            supFather.call(this, name);
            this.age = age;
        }
        // 重写子类的prototype，修正constructor指向
        function inheritPrototype(sonFn, fatherFn) { 
            sonFn.prototype = Object.create(fatherFn.prototype); // 继承父类的属性以及方法
            sonFn.prototype.constructor = sonFn; // 修正constructor指向到继承的那个函数上
        }
        inheritPrototype(sub, supFather);
        sub.prototype.sayAge = function () { 
            console.log(this.age, 'foo');
        };
        // 实例化子类，可以在实例上找到属性、方法
        const instance1 = new sub("OBKoro1", 24);
        const instance2 = new sub("小明", 18);
        instance1.colors.push('black')
        console.log(instance1) // {"name":"OBKoro1","colors":["red","blue","green","black"],"age":24}
        console.log(instance2) // {"name":"小明","colors":["red","blue","green"],"age":18}

#### call、apply，该用哪个？ ####

*  call，apply的效果完全一样，他们的区别也在于
    
     *  参数数量/顺序确定就用call，参数数量/顺序不确定的话就用apply
     *  考虑可读性：参数数量不多就用call，参数数量比较多的话，把参数整合成数组，使用apply
     *  参数集合已经是一个数组的情况，用apply，比如上文的获取数组最大值/最小值
    
    参数数量/顺序不确定的话就用apply，比如以下示例：
    
        const obj = { 
            age: 24,
            name: 'OBKoro1',
        }
        const obj2 = { 
            age: 777
        }
        callObj(obj, handle)
        callObj(obj2, handle)
        // 根据某些条件来决定要传递参数的数量、以及顺序
        function callObj(thisAge, fn) { 
            let params = []
            if (thisAge.name) { 
                params.push(thisAge.name)
            }
            if (thisAge.age) { 
                params.push(thisAge.age)
            }
            fn.apply(thisAge, params) // 数量和顺序不确定 不能使用call
        }
        function handle(...params) { 
            console.log('params', params) // do some thing
        }

#### bind的概念 ####

*  `bind()` 方法创建一个**新的函数**，在 `bind()` 被调用时，这个新函数的 `this` 被指定为 `bind()` 的第一个参数，而其余参数将作为新函数的参数，供调用时使用。
 *  说的通俗一点，`bind`与`apply/call`一样都能改变函数`this`指向，但`bind`并不会立即执行函数，而是返回一个绑定了this的新函数，你需要再次调用此函数才能达到最终执行
 *  bind绑定的this无法再被修改，使用`call、apply`也不行
    
        var obj = { z: 1}
        var obj1 = { z: 10}
        function fn(x, y) { 
            console.log(x + y + this.z);
        };
        
        var bound = fn.bind(obj, 2)
        bound(3) // 6
        
        bound.call(obj1, 99) // 102 ,可以发现this的指向还是obj，没有改变

#### bind的应用场景： ####

*  保存函数参数：
    
        for (var i = 1; i <= 5; i++) { 
           setTimeout(function test() { 
                console.log(i) // 依次输出：6 6 6 6 6
            }, i * 1000);
        }
    
    造成这个现象的原因是等到`setTimeout`异步执行时,`i`已经变成6了
 *  如何让上述的场景正常输入 1 2 3 4 5？
    
     *  IIFE、闭包
        
            for (var i = 1; i <= 5; i++) { 
                (function (i) { 
                    setTimeout(function () { 
                        console.log('闭包:', i); // 输出：1 2 3 4 5
                    }, i * 1000);
                }(i));
            }

#### 手写call、apply、bind ####

喜闻乐见的面试题

*  手写call
    
        Function.prototype.myCall = function(thisArg, ...args) { 
        const fn = Symbol('fn')        // 声明一个独有的Symbol属性, 防止fn覆盖已有属性
        thisArg = thisArg || window    // 若没有传入this, 默认绑定window对象
        thisArg[fn] = this              // this指向调用call的对象,即我们要改变this指向的函数
        const result = thisArg[fn](...args)  // 执行当前函数
        delete thisArg[fn]              // 删除我们声明的fn属性
        return result                  // 返回函数执行结果
        }
        //测试
        foo.myCall(obj)
 *  手写apply
    
    跟call一样，只是参数变成了数组
    
        Function.prototype.myCall = function(thisArg, args) { 
        const fn = Symbol('fn')        // 声明一个独有的Symbol属性, 防止fn覆盖已有属性
        thisArg = thisArg || window    // 若没有传入this, 默认绑定window对象
        thisArg[fn] = this              // this指向调用call的对象,即我们要改变this指向的函数
        const result = thisArg[fn](...args)  // 执行当前函数
        delete thisArg[fn]              // 删除我们声明的fn属性
        return result                  // 返回函数执行结果
        }
        //测试
        foo.myCall(obj, [])
 *  手写bind
    
        Function.prototype.myBind = function(obj){ 
          // 从arguments第2个开始是参数
          var args = Array.prototype.slice.call(arguments,1)
          var fn = this
          // 返回一个绑定好的方法
          return function(){ 
            var newArgs = Array.prototype.slice.call(arguments)
            // 可能存在foo.bind(obj,args)(newArgs),所以要把两个参数拼在一起
            fn.apply(obj, args.concat(newArgs))
          }
        }
    
    测试：
    
        function test(){ console.log(this.name, arguments)}
        var obj = { name:"Kitty"}
        
        //测试绑定
        var bound = test.myBind(obj,1,2,{ msg:"hello!"})
        bound("How are you")
        //Kitty 
        // Arguments(4)[1,2,{msg:"hello!"},"How are you"]
        
        // 重复绑定, 无法修改this，可以增加绑定的参数
        var obj2 = { name:"melody"}
        var bound3 = bound.myBind(obj2, "change to melody")
        bound3(9090)
        //Kitty
        //Arguments(5)[1,2,{msg:"hello!"},"change to melody", 9090]