![](https://img.haomeiwen.com/i10368875/5b9cafa9a3a586c0.png)
关于this
1)js中的函数总结下来有4种用法
foo(){
console.log(this.a)
}
(1)直接调用 foo()
(2)作为对象方法调用 a.foo()
(3)作为构造器使用,在es5及之前并没没有引入class,使用的是函数替代 new foo()
(4)call/apply/bind foo.call({a:1},1,2) / foo.apply({a:1},[1,2]) / foo.bind({a:1})
call和apply的作用是相同的,可以理解为使{a:1}这个对象拥有该foo方法
bind:是用于绑定this 他们三个本质都是改变函数中的this
函数中的this指向真的让人头疼,官方文档也不是很好理解,其实this的指向就是根据上面4种用法来判定的,就拿上面的foo来举例
(1)直接调用foo,则它属于window,this指向window
(2)作为对象方法调用 与对象绑定o.foo() this指向o
(3)作为构造器使用 默认返回this this指向实例化的对象
这里有个好玩的地方如果我构造函数这样写(若返回的时对象则改变this指针,若返回的时基础数据则不会改变this的指向问题)
foo(){ return a} //这里不会改变this的 返回的仍然是new foo()的到的对象
foo(){ return {} } //这里将返回空对象
(4) foo.call({a:1},1,2) / foo.apply({a:1},[1,2]) / foo.bind({a:1}) 他们的this将会指向{a:1} 如果你写成这个样子foo.call(3) this将会指向Number(3)
![](https://img.haomeiwen.com/i10368875/1685c48ceb21dd77.png)
还是上面的例子 当用new的时候bind将不会起到绑定this的作用,如图
![](https://img.haomeiwen.com/i10368875/d32c2d812ac2186f.png)
![](https://img.haomeiwen.com/i10368875/049bd5e9dc0a4558.png)
![](https://img.haomeiwen.com/i10368875/405a0378be7fb32f.png)
![](https://img.haomeiwen.com/i10368875/5a3f429afddd5d77.png)
代码实现(call和bind都是apply的语法糖)
function bind(fun,obj){
let arr =[].slice.apply(arguments);
return function(){
fun.apply(obj,arr.slice(2))
}
}
function call(fun,obj){
let arr = [].slice.apply(arguments);
fun.apply(obj,arr.slice(2))
}
function aa(b){
console.log(this.name,b)
}
let obj = {
name:"hahaha"
}
let aabind = bind(aa,obj,"wy");
aabind()
call(aa,obj,"w123")
js学习(ECMAScript,DOM,BOM):https://www.jianshu.com/p/b7136540b379
网友评论