js中的 bind、call、apply


js中的 bind、call、apply

都是为了改变函数运行时this的指向

javascript中作用域和this

JavaScript是一种单线程语言,因此它一次只能执行一个任务。其余的任务在执行期上下文中排队,当javascript解释器初始执行代码,它首先默认竟如全局上下文。每次调用一个函数将会创建一个新的执行上下文。其实这就是作用域。

this的总结:在一个函数中,this总是指向当前函数的所有者对象,this总是在运行时才能确定其具体的指向, 也才能知道它的调用对象。

call、apply

这两个简单的方法,内建在所有的函数中,允许在自定义上下文中执行函数。唯一的区别就是call 函数需要参数列表,而 apply 函数允许你传数组。

1
2
func.call(this, arg1, arg2);
func.apply(this, [arg1, arg2])

举个记忆深刻的例子,我有一个朋友,有名字,还有把妹技能, 定义如下

1
2
3
4
5
6
const myFriend = {
name: 'sb',
meetGirl: function(){
console.log('hello prtty, my name is ' + this.name)
}
}

下边定义我,有名字,还有刻苦学习的技能

1
2
3
4
5
6
const me = {
name: 'jimscx',
workHard: function(){
console.log('haha i am a geek my name is ' + this.name)
}
}

接下来我们展示一下各自的技能

1
2
firend.meetGirl() //hello prtty my name sb
me.workHard() //haha i am a geek my name is jimscx

突然我朋友也想拥有学习技能,如何办?好了,call,apply登场

1
me.workHard.call(myFriend, null) //haha i am a geek my name is sb

现在我朋友竟然也有了学习技能,这就是call和apply的用处

bind

bind()方法与applycall很相似,也是可以改变函数体内this的指向。

bind()方法会创建一个新函数,称为绑定函数,当调用这个绑定函数时,绑定函数会以创建它时传入 bind()方法的第一个参数作为this,传入bind()方法的第二个以及以后的参数加上绑定函数运行时本身的参数按照顺序作为原函数的参数来调用原函数。

还是上边的例子bind改写

1
me.workHard.bind(myFriend)() //haha i am a geek my name is sb

首先bind返回一个函数

1
2
3
4
5
6
me1.workHard.bind(myFriend)

结果如下:
ƒ (){
console.log('haha i am a geek my name is ' + this.name)
}

然后直接执行()

上面讲的无论是 call() 也好, apply() 也好,都是立马就调用了对应的函数,而bind()不会,bind()会生成一个新的函数,bind() 函数的参数跟 call() 一致,第一个参数也是绑定this的值,后面接受传递给函数的不定参数。bind() 生成的新函数返回后,你想什么时候调就什么时候调


文章作者: Callable
版权声明: 本博客所有文章除特別声明外,均采用 CC BY 4.0 许可协议。转载请注明来源 Callable !
评论
  目录