es6和es5中的this指向

Posted 2021-01-17 666666cfh88888888

 

先看一段代码：

var name = "window";
var obj = {
　　　　　　name: ‘obj‘,
　　　　　　//普通函数
　　　　　　one: function(){
　　　　　　console.log(this.name)
　　　　},
//箭头函数
two: ()=> {
　　　　console.log(this.name)
　　　　},
//普通函数中的箭头函数
three: function(){
　　(()=>{
　　console.log(this.name)
　　　　})()
　　},
//多层箭头函数
four: ()=> {
　　　　(()=>{
　　　　console.log(this.name)
　　})()
　　}
}
obj.one(); //obj
obj.two(); //window
obj.three(); //obj
obj.four() //window

说明：

1、

①普通函数中的this总是指向它的直接调用者；

②箭头函数中的this是在定义函数的时候绑定，而不是在执行函数的时候绑定。

2、

①比如上面的 obj.one()；直接调用者是obj，因此this指向obj

②箭头函数中的this指向是固定的，并不是因为箭头函数内部有绑定this的机制，实际原因是箭头函数内部没有this，箭头函数的this是在定义时就绑定的，它的this就是箭头函数所处的对象的所处作用域。

比如obj.three()；箭头函数所在的对象是函数three，函数three处于obj的作用域中，因此this指向obj；

比如obj.four()；箭头函数所在的对象是obj，obj处于window的作用域中因此this指向window。

3、

es6函数写法有2种，一种是 fn: (str) => { } ； 一种是 fn(str){ }

箭头函数是没有上下文的、this会直接指向上一级

第二种写法this指向调用它的调用者