1
头图

普通函数

普通函数的this,由动态作用域决定,指向它的直接调用者,没有直接调用者统一指向window

1、情况一

function outFun() {
    console.log(this);
}
outFun(); // this指向window

// outFun()没有直接调用者
// this指向window

2、情况二

var obj = {
  outFun: function() {
    console.log(this);
  }
};
obj.outFun(); // this指向obj

var og = obj.outFun;
og(); // this指向window

// obj.outFun()的直接调用者是obj,所以this指向obj
// 把obj.outFun赋值给og,og()等同于直接执行outFun,此时没有直接调用者

3、情况三

var obj = {
  outFun: function () {
    function inFun () {
      console.log(this)
    };
    inFun ();
  }
};
obj.outFun(); // this指向window

// inFun执行时没有直接调用者
// 当没有直接调用者的时候
// this指向window

箭头函数

箭头函数没有自己的this,箭头函数里的this就是外部作用域里this

1、情况一

var outFun = () => {
  console.log(this);
};
outFun(); // this指向window

// 箭头函数的外部作用域就是全局作用域
// 全局作用域里的this指向的就是window(严格模式下,指向的是undefined)

2、情况二

var obj = {
  outFun: () => {
    console.log(this);
  }
};
obj.outFun(); // this指向window
var og = obj.outFun;
og(); // this指向window

// 箭头函数是对象obj里的一个属性
// 其外部作用域也是全局作用域
// this同样指向window

3、情况三

var obj = {
  outFun: function () {
    var inFun = () => {
      console.log(this);
    };
    inFun();
  }
};
obj.outFun(); // this指向的obj
var og = obj.outFun;
og(); // this指向window

// 箭头函数inFun的外部作用域是outFun
// 箭头函数里的this和外部作用域的this指向一致
// 但是outFun是个普通函数,普通函数的this指向的是其直接调用者
// 没有直接调用者时,指向window

4、情况四

var obj = {
  inObj: {
    outFun: () => {
      console.log(this)
    }
  }
}

obj.inObj.outFun() // this指向window

// 箭头函数outFun是obj.inObj的一个属性
// 外部作用域是全局作用域
// 所以this指向window

佳佳
46 声望0 粉丝