匿名函数下this指向window，及解决办法；箭头函数的this指向问题

匿名函数下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