Question

我试图了解常规javascript函数和arrow函数之间的区别。我已经在js bin上实现了代码，以查看结果。

问题是，我有一个普通函数和一个箭头函数作为对象内的方法。我称它们在窗口范围内。如我所料，第一个函数调用工作正常。但是在第二篇文章中，我使用bind方法将'john'对象绑定到arrow函数。我虽然使用bind，但它始终占据窗口对象的范围。为什么会这样？

this.table = 'Window table';
this.room = 'Window room';


let john = {
  room: 'johns room',
  table : 'johns table',

  cleanTable(){
    console.log(`cleaning ${this.table}`);
  },
  cleanRoom : () =>{
    console.log(`cleaning ${this.room}`);
  }

}

john.cleanTable();  
john.cleanRoom.bind(john)();

######### output ##########

"cleaning johns table"
"cleaning Window room"

我希望他们两个都记录相同的内容，即“ cleaning johns table”。我该如何实现？

Answer 1

最简单的方法是删除箭头功能，因为它会更改范围的上下文：

this.table = 'Window table';
this.room = 'Window room';


let john = {
  room: 'johns room',
  table : 'johns table',

  cleanTable(){
    console.log(`cleaning ${this.table}`);
  },
  cleanRoom(){
    console.log(`cleaning ${this.room}`);
  }

}

john.cleanTable();  
john.cleanRoom.bind(john)();

如果您仍然想使用arrow函数，则将该对象作为参数传递并访问该函数内的属性：

this.table = 'Window table';
this.room = 'Window room';


let john = {
  room: 'johns room',
  table : 'johns table',

  cleanTable(){
    console.log(`cleaning ${this.table}`);
  },
  cleanRoom : (obj) =>{
    console.log(`cleaning ${obj.room}`);
  }

}

john.cleanTable();  
john.cleanRoom(john);

即使已绑定，“ this”关键字也未分配适当的范围

1 个答案: