apply与call的异同点
一、apply()与call()的异同点
1、相同:作用:改变this指向(解释见下述高亮说明)。
2、区别:参数形式:apply()方法接受数组形式的参数;call()方法接受多个单参数。
var person = {
fullName (city, country) {
return this.firstName + ' ' + this.lastName + ', ' + city + ', ' + country
}
}
var person1 = {
firstName: 'Bill',
lastName: 'Gates'
}
console.log(person.fullName.apply(person1, ['Oslo','Norway'])) // 'Bill Gates, Oslo, Norway'
console.log(person.fullName.call(person1, 'Oslo','Norway')) // 'Bill Gates, Oslo, Norway'
改变this指向说明:
1、person对象的fullName方法里面的this指向的是person对象,但person对象没有firstName、lastName这两个属性;
2、使用apply()或者call(),如上述语句,把person对象的fullName方法里面的this指向person1,这时候this.firstName、this.lastName取得就是person1对象里面的firstName、lastName这两个属性,取到了Bill、Gates;
3、这时候person对象的fullName方法处理了这些参数属性,并将其return出来,就打印出来了’Bill Gates, Oslo, Norway’;
4、call也是同理解释,唯一区别在于call的参数为多个单参数形式传递。
二、apply()
apply(obj, [param1, …, paramX]) - obj为this要指向的对象;[param1, …, paramX]数组格式参数。
// obj要应用的对象:在JavaScript严格模式下,如果apply()方法的第一个参数不是对象,则它将成为被调用函数的所有者(对象);在非严格模式下,它成为全局对象。
console.log(Math.max(1, 2, 3)) // 3
console.log(Math.max.apply(null, [1, 2, 3])) // 3
console.log(Math.max.apply(Math, [1, 2, 3])) // 3
console.log(Math.max.apply('', [1, 2, 3])) // 3
console.log(Math.max.apply(0, [1, 2, 3])) // 3
三、call()
call(obj, param1, …, paramX) - obj为this要指向的对象;param1, …, paramX - 多个单参数。
console.log(Math.max(1, 2, 3)) // 3
console.log(Math.max.call(null, 1, 2, 3)) // 3
console.log(Math.max.call(Math, 1, 2, 3)) // 3
console.log(Math.max.call('', 1, 2, 3)) // 3
console.log(Math.max.call(0, 1, 2, 3)) // 3
四、apply()的应用
往数组推入多个元素:
1、缺陷1:由于push(item)往数组里只能一个一个推入;
2、缺陷2:concat()能连接两个数组,但是返回的是新数组,并非改变原数组;
3、优势:apply接受一组数组作为参数,可以往目标数组里面推入数组参数。
// push()
var arr = [1, 2, 3]
var elements = [4, 5, 6]
elements.forEach(item => arr.push(item))
console.log(arr) // [1, 2, 3, 4, 5, 6]
// concat()
var arr = [1, 2, 3]
var elements = [4, 5, 6]
var newArr = arr.concat(elements)
console.log(arr) // [1, 2, 3]
console.log(newArr) // [1, 2, 3, 4, 5, 6]
// apply()
var arr = [1, 2, 3]
var elements = [4, 5, 6]
arr.push.apply(arr, elements)
console.log(arr) // [1, 2, 3, 4, 5, 6]