箭头函数中的this指向

Posted sonicwater

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了箭头函数中的this指向相关的知识,希望对你有一定的参考价值。

最近做的项目中遇到了在箭头函数里使用this时报错的问题,把箭头函数的写法改成function()后,this的指向才达到预期。关于这个问题值得研究一下。

在箭头函数出现之前的ES5时代,this指向它的调用者。是哪个对象调用了这个属性或方法,this就指向这个对象。这有点像“我”这个人称代词,是从谁的嘴里说出了“我”,这个“我”就指代了谁。

一个简单的例子:

// 用var定义的变量,this指向window
// 调用sayName()等于调用this.sayName()等于调用window.sayName()
var name = 'window';
var sayName = function(){
  return this.name
}
console.log(sayName())          //window
console.log(this.sayName())     //window
console.log(window.sayName())   //window

// 用obj调用的sayName方法,其中this指向调用它的obj
var obj = {
  name : 'obj',
  sayName : function(){
    return this.name
  }
}
console.log(obj.sayName())      //obj

后来ES6规范中的箭头函数里面的this是在定义它时绑定的,指向它的父级作用域,而不是调用它对象,这个this的指向是不能通过call和apply改变的。

箭头函数在对象字面量中的this指向:

// 用var定义的变量,this指向window
// 虽然展现结果和上例一样,但是this的指向绑定的时机是有区别的,箭头函数在定义时已经绑定,普通函数只会在调用时确定
var name = 'window';
var sayName = () => {
  return this.name;         //this指向window
};
console.log(sayName());         //window
console.log(this.sayName());    //window
console.log(window.sayName());  //window

//同样用obj调用的sayName方法,this指向父级作用域window
var obj = {
  name: 'obj',
  sayName: () => {
    return this.name;  
  }
};
console.log( obj.sayName() );     //window
console.log( obj.sayName() === window.sayName() );     //true

这是箭头函数this指向在对象字面量中的行为。多说一句,在用对象实例调用时会有所差别。

看下面的例子:

var name = 'window'
    
function Obj(name){     //构造函数Obj
  this.name = name;
  this.s1 = function(){
    return this.name;   //普通函数方法,this指向Obj
  }
  this.s2 = () => {
    return this.name;   //箭头函数方法,this还是指向Obj,因为构造函数function Obj(name)形成了一级作用域
  };
}
Obj.prototype.s3 = function(){
  return this.name;     //原型链上的普通方法,this指向实例obj1的构造函数Obj
}
Obj.prototype.s4 = () => {
  return this.name;     //原型链上的箭头函数,定义它的时候,这个箭头函数的父级作用域是window
}

//实例化对象
const obj1 = new Obj('obj');

console.log(obj1.s1());  //obj
console.log(obj1.s2());  //obj
console.log(obj1.s3());  //obj
console.log(obj1.s4());  //window
  • s2()箭头函数会去找定义它时的父级作用域,因为构造函数Obj也是个函数,它会形成自己的作用域。定义s2()的时候父级作用域变成了构造函数Obj所在的域
  • s4()和s2()的区别是s4()挂载到构造函数的原型上了,定义s4()的时候,这个箭头函数的父级作用域是window,所以用实例调用方法会输出了 ‘window‘

以上是关于箭头函数中的this指向的主要内容,如果未能解决你的问题,请参考以下文章

箭头函数中的this指向

关于箭头函数中的this指向问题

怎么理解这个箭头函数里的this指向

箭头函数中this的指向问题

箭头函数的this指向

ES6箭头函数中的this绑定问题