javascript - 箭头函数作为方法 : Value of this

标签 javascript arrow-functions

MDN给出以下两个箭头函数的例子

示例 1

var adder = {
  base: 1,

  addThruCall: function(a) {
    var f = v => v + this.base;
    var b = {
      base: 2
    };

    return f.call(b, a);
  }
};

console.log(adder.addThruCall(1)); // 2

示例 2

'use strict';
var obj = {
  i: 10,
  b: () => console.log(this.i, this),
  c: function() {
    console.log(this.i, this);
  }
}
obj.b(); // prints undefined, Window {...} (or the global object)
obj.c(); // prints 10, Object {...}

问题

    例1中的
  • this.base指向adder.base
  • 示例 2 中属性 b
  • this.i 解析为 undefined

如果箭头函数没有 this 值,this.base 不应该也解析为 undefined 吗?

最佳答案

箭头函数有一个“this”,它是您定义它们时当前范围内的任何“this”。

在你的第二个例子中,在箭头函数 b() 中,因为你没有定义“this”的特定父范围,“this”指向“Window”(在浏览器上下文中)

同样在你的第二个例子中,在命名函数 c() 中,function()... 引入了一个范围,这是 undefined 默认情况下。

所以你看到的完全是意料之中的。但是,如您所见,“this”掌握起来比较复杂,因此良好的代码风格建议尽可能避免使用它。在这种情况下,您可能需要使用闭包。

有趣的是在另一个问题中读到这个:How does the "this" keyword work?

关于javascript - 箭头函数作为方法 : Value of this,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48373388/

相关文章:

javascript - 创建对象时触发 JavaScript 事件

javascript - 与在 JavaScript 中使用 Map 相比,实现 HashMap 有什么优势?

javascript - 使用 ES6 箭头函数设置事件监听器

javascript - 从箭头函数内部访问方法变量

php - PHP 是否支持箭头函数语法?

javascript - 在 Javascript 中编程 OOP - 正确地

javascript - meteor .js : how to call helper method from event?

javascript - 检测 Iframe 内容何时加载(跨浏览器)

node.js - NodeJS 中的常规函数​​和箭头函数有什么区别?

javascript - 是否可以使用 "return"语句从 JavaScript 立即调用的箭头函数中获取值?