js中的call、apply和bind

call和apply

1. call()  方法使用一个指定的 this 值和单独给出的一个或多个参数来调用一个函数。

• 语法

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

2. apply() 方法调用一个具有给定 this 值的函数，以及以一个数组（或一个类数组对象）的形式提供的参数。

• 语法

apply(thisArg)
apply(thisArg, argsArray)

举个栗子

比如我们定义一个test方法，打印this.nickname

function test() {
    console.log(this.nickname)
}
// 执行test方法，此时this指向window，而window上面没有nickname这个属性，此时就会打印出undefined
test() // undefined

1. 通过call、apply改变test方法中的this指向

// 定义一个对象小明
const xiaoming  = {
    nickname: '小明'
}
test.call(xiaoming) // 小明
test.apply(xiaoming) // 小明

此时执行test方法，里面的this就指向了xiaoming，因为xiaoming里面有个nickname属性，这样就会打印出小明了。

• 乍一看，call和apply不是一样的吗？其实不然，就像开头说的，这二者的调用传参是不一样的。

2. call、apply的区别

call的语法和作用与 apply()方法类似，只有一个区别，就是 call() 方法接受的是一个参数列表，而 apply() 方法接受的是一个包含多个参数的数组。

// 把test改造一下，接收age和weight两个参数
function test(age, weight) {
    this.age = age
    this.weight = weight
    console.log(this.nickname, this.age, this.weight)
}

// 定义一个对象小明
const xiaoming  = {
    nickname: '小明'
}
// 使用call，接收参数列表
test.call(xiaoming, 18, 100) // 小明 18 100

// 使用apply，接收多个参数数组
test.apply(xiaoming, [18, 100]) // 小明 18 100

// 二者得到的结果是一样的，只有传递参数的形式不同

bind

bind()  方法创建一个新的函数，在 bind() 被调用时，这个新函数的 this 被指定为 bind() 的第一个参数，而其余参数将作为新函数的参数，供调用时使用。

 function test() {
    console.log(this.nickname)
}
test()

const xiaoming = {
    nickname: '小明'
}
// 上面不变
// 使用bind
test.bind(xiaoming) // 此时不会执行test方法，仅仅是改变了返回了一个新函数
test.bind(xiaoming)() // 小明  此时会打印出小明，因为执行了这个返回的新函数