apply && call && bind三者的区别
apply
- 只有两个参数 - 第一个参数 :设置函数内部this的指向;第二个参数:是一个数组
- 使用的方式
function fn(x, y) {
console.log(this) // {name: "ls"}
console.log(x + y) // 3
}
var obj = {
name: 'ls'
}
fn.apply(obj, [1, 2]) //结果如上面注释
- 可以看出,它的作用是改变函数中的this,并调用函数
- 实战–打印一个数组中的最大值
var arr = [333,22,55,14,55,0,22.77,21.77]
var maxNumber = Math.max.apply(null,arr)
console.log(maxNumber) //333
bind
- 作用
bind()方法创建一个新的函数,在调用时设置this关键字为提供的值。并在调用新函数时,将给定参数列表作为原函数的参数序列的前若干项。
- 语法
function.bind(thisArg[, arg1[, arg2[, …]]])
- 返回值
返回一个原函数的拷贝,并拥有指定的this值和初始参数。
- 通俗来讲:bind()方法主要改变this的指向,不会调用函数,而是把函数复制一份。第一个参数 设置函数内部this的指向,其它参数,对应函数的参数
function fn1(x,y){
console.log(this) // obj1
console.log(x+y) // 2
}
var obj1 = {
name:'bind'
}
var f1 = fn1.bind(obj1,1,1) //本身不会调用函数
f1() //结果看上面注释
call
注意:该方法的作用和 apply() 方法类似,只有一个区别,就是call()方法接受的是若干个参数的列表,而apply()方法接受的是一个包含多个参数的数组。
fun.call(thisArg, arg1, arg2, …)
- call的使用
function fn2(x,y){
console.log(this) // obj2
console.log(x+y) // 4
}
var obj2 = {
name:'bind'
}
console.log(fn1.call)
var f2 = fn1.call(obj1,2,2)
- 在严格模式下this的值将会是undefined
'use strict';
var sData = 'Wisen';
function display() {
console.log('sData value is %s ', this.sData);
}
display.call(); // Cannot read the property of 'sData' of undefined
- 应用场景–借用构造函数使用call实现继承
function Person(name,age,gender){
this.name = name
this.age = age
this.gender = gender
}
Person.prototype.eat = function(){
console.log('food')
}
function Son(name,age,gender){
Person.call(this,name,age,gender)
}
var son = new Son('xwh',18,0)
console.log(son)
//new的实例对象son返回的只是一个对象
总结主要点
- 相同点
都是改变this的指向,call的返回值就是函数的返回值 - 不同点
传参的方式不一致
bind复制函数但不调用,apply和call直接调用函数