JS中call(),apply(),bind()函数的区别与用法详解

fn.call(this.Arg, arg1, arg2,...)

// 借用父构造函数继承属性
// 父构造函数
function Father(name, age) {
    this.uname = name
    this.age = age
}
// 子构造函数
function Son(name, age) {
    Father.call(this, name, age)
}
var son = new Son('小明', 10)
console.log(son); // Son {uname: '小明', age: 10}

fn.apply(this.Arg, [argsArray])

var a = {
    name: '小红'
}
function fn(arr) {
    console.log(this); // {name: '小红'}
    console.log(arr); // blackpink 传字符串就输出字符串传数字就输出数字
}
fn.apply(a, ['blackpink'])
// fn.apply() // this->window arr->undefined

var arr = [1, 66, 3, 99, 4]
// var max = Math.max.apply(null, arr) // 虽然这里的this指向不需要改变填null没有错
var max = Math.max.apply(Math, arr) // 但是这里最好是让this指向函数的调用者是最合适的
var min = Math.min.apply(Math, arr)
console.log(max); // 99
console.log(min); // 1

fn.bind(thusArg, arg1, arg2, ...)

var c = {
    name: '大华'
}
function fn() {
    console.log(this); // {name: '大华'}
    console.log(a + b); // 3
}
// fn.bind(c) // 这里不会有输出值
var f = fn.bind(c, 1, 2)
f() // 拷贝函数所以输出值用函数调用

    <button>按钮</button>
    <button>按钮</button>
    <button>按钮</button>

var btns = document.querySelectorAll('button')
for (var i = 0; i < btns.length; i++) {
    btns[i].onclick = function() {
        this.disabled = true // 这个this指向的是调用者btn
        setTimeout(function() {
            // this.disabled = false; // 只用这一个不加bind的话会不管用，因为定时器里面的this指向的是window
            this.disabled = false // 此时这里的this指向的是当前点击的那个btn
        }.bind(this), 3000) // 这个this指向的是btn这个对象
    }
}