JavaScript箭头函数的this怎么使用
JavaScript箭头函数的this怎么使用
这篇文章主要介绍“JavaScript箭头函数的this怎么使用”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“JavaScript箭头函数的this怎么使用”文章能帮助大家解决问题。
//构造函数内部使用箭头函数
function Person(a) {
this.a = a
this.b = () => {
console.log(this.a)
}
}
new Person(10).b()//输出10
//箭头函数的this从外层继承而来。本例箭头函数中this等于箭头函数外的this，正确。
//自定义类时使用箭头函数
var a="1"
class A {
constructor(a) {
this.a = a
}
getName = () => {
console.log(this)
}
}
new A("2").getName()//输出2
//箭头函数的this从外层继承而来。我的理解是箭头函数中this继承了类中的this，正确
//对象中使用构造函数
var a = 1;
var obj = {
a: 2,
say1: () => {
console.log(this.a);
},
say2: function () {
console.log(this.a);
},
b: {
a: 3,
say5: ()=> {
console.log(this.a)
}
}
};
obj.say1(); //1
obj.say2(); //2
obj.b.say5() //1
let say3 = obj.say1;
let say4 = obj.say2;
say3(); //1
say4(); //1
//如果说箭头函数的this从外层继承而来的话，那么这里say1中的this应该是指向obj，但是结果是指向window，而且不管嵌套多少层对象，箭头函数的this始终指向window（从say5输出1可以看出）,say3之所以输出1是因为let say3=obj.say1只是将函数赋值给say3，say3的拥有者是window，故this指向window。
总结：我觉得”箭头函数的this从外层继承而来“这句话不能将this的指向一言概之，还是要分情况讨论，当然，也有可能是我对这句话理解的还不够透彻。
最后还有一个知识点：箭头函数中的this指向的是定义时的this，而不是执行时的this。
先来看普通函数，普通函数的this值会因调用该函数的对象发生改变而改变
var a=1
var obj = {
a:2,
say(){
setTimeout(
function(){console.log(this.a);},
1000
);
}
};
obj.say();//输出1
//因为setTimeout是window对象的方法，当延迟1s后执行console.log(this.a)时，这时的this已经由指向obj变成指向window，所以输出1
//同样的，apply,call,bind也能改变普通函数中this指向
var obj = {
a: 2,
say: function () {
console.log(this.a)
}
};
var obj2 = {
a: 3
}
obj.say()//输出2
obj.say.call(obj2)//输出3
obj.say.apply(obj2)//输出3
var say2=obj.say.bind(obj2)
say2()//输出3
对比之下，箭头函数的this在函数定义时就已经确定，不会改变(看下面例子)
var a = 1
var obj = {
a: 2,
say() {
setTimeout(
() => { console.log(this.a); },
1000
);
}
};
obj.say();//输出2
var a = 1
var obj = {
a: 2,
say: ()=> {
console.log(this.a)//这里前面已经讲过了，this指向的是window
}
};
var obj2 = {
a: 3
}
obj.say()//输出1
obj.say.call(obj2)//输出1
obj.say.apply(obj2)//输出1
var say2=obj.say.bind(obj2)
say2()//输出1
关于“JavaScript箭头函数的this怎么使用”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识，可以关注恰卡编程网行业资讯频道，小编每天都会为大家更新不同的知识点。
