/**
*this词法与箭头函数
*/
var aa = (a)=>{
console.log(a);
}
aa(2);
/**
*这个东东叫箭头函数,是function的简写
*/
var obj = {
id: 'so cute',
cute:function fun(){
console.log(this.id);
}
}
var id = 'so bad';
obj.cute();//so cute
setTimeout(obj.cute,100)//so bad
/**
*这里的obj.cute失去了与this的绑定,
* obj.cute()是找的this.id是指的是obj里面的id
* 而setTimeout里面的obj.cute找到的不是obj里的id了,是找的是setTimeout词法作用域的,
* 根据词法作用域的寻找法则,在setTimeout里找不到id,就到上一层作用域里取寻找,而上一层作用域是全局作用域,
* 全局作用域里有一个id,所以找到的是so bad
* 那怎么样才能解决这个问题呢? 需要绑定this
*/
var self;
var obj1 = {
id1: '萨拉黑哟',
fun:function fun(){
self = this;
console.log(self.id1);
}
}
var id1 = '卡机嘛';
obj1.fun();//萨拉黑哟
/**
*萨拉黑哟 这里的bind 把self绑定到了obj1.fun上了,那么现在obj1.fun里的this就是obj1里的fun了
*/
setTimeout(obj1.fun.bind(self),100)
/**
*不同的场景有不同的应用,下面我们看另一种场景
*/
var obj2 = {
id2:'口尼奇瓦',
action:function action(){
var self = this;
setTimeout(function timer(){
console.log(this)//window
console.log(self.id2);//口尼奇瓦
console.log(this.id2);//哦哈呦
},1000)
}
}
var id2 = '哦哈呦';
obj2.action();
/**
*使用这个var self = this; 可以解决这个问题,但是考虑到不能每次都要写吧,写很多遍
* 所以箭头函数就引入了一个叫做this词法的行为
*/
var obj3 = {
id3:'我就是一个id',
action1:function action1(){
console.log(this)//obj3
setTimeout(()=>{
console.log(this)//obj3
console.log(this.id3);//我就是一个id
},1000)
}
}
var id3 = '我是window的id';
obj3.action1();
/**
*如何上面的代码,箭头函数就搞定了this丢失绑定的问题
* 简而言之,就是箭头函数把当前的词法作用域的this,绑定到了自己身上
*/
/**
*this绑定和词法作用域规则是两个东西哟,不要混淆了
* 但是上面还有一个东西,那就是bind 这个也是一个可靠的家伙哟
*/
this与箭头函数
最新推荐文章于 2023-06-26 16:14:22 发布