调用函数call、apply、bind

168 阅读1分钟

首先,我们在执行函数时候,直接在函数的后面加上括号,比如_f1( )  ,_然而实际上,我们函数的调用执行方法还可以利用all、apply动态调用,并且这种调用方法可以让我们对函数中_this_的指向有更清晰的认识。

  • this

我们想要让函数获得对象的引用,但是不想利用额外增加变量,设置参数完成。js额外设置了this完成了这件事儿。

let Person = {
    name : 'dsplk',
    sayHi(){
    console.log(`我叫`)+ this.name}
    }
}

Persopn.sayHi()     //相当于Person.sayHi(Person)

通过这种方法,每一个函数都能用this,获取未知对象的引用了。

  • 调用方式

call、apply、bind 都是this的显式调用,调用方法如下:

  1.call( )

fn.call(this,x1,x2)   //call 方法第一个参数是要绑定给this的值,后面传入的是一个参数列表。
                      //当第一个参数为null、undefined的时候,默认指向window。

用我们常用的调用方法来理解:

obj1.fn() 
obj1.fn.call(obj1);

fn1()
fn1.call(null)

f1(f2)
f1.call(null,f2)

  2.apply( )

var arr = [1,2,3,89,46]
var max = Math.max.apply(null,arr)  //方法与call类似,只不过第二个参数接受的是参数列表

 3.bind( )

使用bind( )可以使this不被改变

var obj = {
    name: 'Dot'
}

function printName() {
    console.log(this.name)
}

var dot = printName.bind(obj)
console.log(dot) // function () { … }
dot()  //   等价于printName.call(obj)

bind( ) 还可以绑定其他参数

let f3 = f1.bind({name:'dsplk'},'h1')
f3()     //等价于f1.call({name:'dsplk'},'h1')

  • 总结

bind返回对应函数, 便于稍后调用; apply, call则是立即调用。

除此外, 在 ES6 的箭头函数下, call 和 apply 将失效