匿名函数下this指向window
var name = "小明";
var Data = {
name: "xiaoming",
init: function() {
setTimeout(function() {
console.log(this.name); //'小明'
}, 1000)
}
}
Data.init();
/*匿名函数中，this指向的是window*/
解决匿名函数下this指向window的问题，让他指向当前函数
1.通过that
var name = "小明";
var Data = {
name: "xiaoming",
init: function() {
var that=this; //定义一个that
setTimeout(function() {
console.log(that.name); //'xiaoming'
}, 1000)
}
}
Data.init();
2.通过bind
var name = "小明";
var Data = {
name: "xiaoming",
init: function() {
setTimeout(function() {
console.log(this.name);//'xiaoming'
}.bind(this), 1000) //.bind(this)来处理
}
}
Data.init();
3.通过es6的箭头函数
var name = "小明";
var Data = {
name: "xiaoming",
init: function() {
setTimeout(()=> {
console.log(this.name);//'xiaoming'
}, 1000)
}
}
Data.init();
为什么箭头函数会改变this的指向？？？
普通函数：this的指向是在函数执行的时候绑定的，而不是在函数创建时绑定的，谁调用指向谁，this指向的是最后调用它的对象。
箭头函数：this的指向是在函数创建的时候绑定的，而不是在函数执行时绑定的
不管在什么情况下,箭头函数的this跟外层function的this一致，外层function的this指向谁，箭头函数的this就指向谁，如果外层不是function则指向window
// this指向最后调用它的对象
var heroName = '黄蓉';
var obj={
heroName:'huangrong',
init:function(){
console.log(this.heroName) //'huangrong'
}
}
obj.init();
// 箭头函数的this跟外层function的this一致
var heroName = '黄蓉';
var obj={
heroName:'huangrong',
init:()=>{
console.log(this.heroName)//'黄蓉'
}
}
obj.init();
// 箭头函数的this跟外层function的this一致
var heroName = '黄蓉';
function obj() {
this.heroName = 'huangrong'
const foo = () => {
console.log(this.heroName)//=>huangrong
}
foo();
}
obj();
参考：https://mp.weixin.qq.com/s/N2pWofcWuEz0kmJADUT02g