call(),apply(),bind()的用法及区别

69 阅读1分钟
    // 1.利用call()方法让伪数组可以借用数组方法
    // 例子:判断f()传进的参数是否都大于10
    // 第一个参数, 就是函数内部的 this 指向第二个参数开始, 依次给函数传递参数
    // 方法:利用数组every()方法的调用, 需要接收一个函数作为实参
    function f() {
        console.log(arguments)
        var res = [].every.call(arguments, function a(item) {
            return item > 10
        })
        console.log(res)
    }
    f(10, 20, 30, 40, 50)


    // 2.利用apply()方法去判断一个数组中最大的数字
    // 由于数组用不了数学方法,所以让apply去改变this指向。
    // 第一个参数, 就是函数内部的 this 指向,第二个是一个数组或者伪数组都行, 里面的每一项依次给函数传递参数
    var arr = [100, 200, 33, 56, -200, -300, 72]
    var res = Math.max.apply(null, arr)
    console.log(res)

    // 3. bind()
    // + 使用方法, 就直接连接再函数名后面使用
    // + 语法:
    //   -> fn.apply()
    //   -> obj.fn.apply()
    // + 参数:
    //   -> 第一个参数. 就是函数内部的 this 指向
    //   -> 从第二个参数开始, 依次给函数传递参数
    // + 特点:
    //   -> 不会立即调用函数
    //   -> 会返回一个新的函数, 一个已经被改变好 this 指向的函数
    // + 作用:
    //   -> 改变事件处理函数或者定时器处理函数的 this 指向
    例子:改变div的点击事件时候拿到的this是obj
    var div = document.querySelector('div')

    function change() {
        console.log(this)
    }
    // div.onclick = function change() {
    //     console.log(this)
    // }
    var obj = {
        name: '我是 obj 对象'
    }
    div.onclick = change.bind(obj)