Question

为什么this内的setTimeout与使用箭头函数时调用渲染函数的对象相等？

 class X {
      constructor(config) {
        this.data = config.data;
        this.render_ = config.render;
      }
      render() {
        this.render_(this.data);
      }
    }
    var x = new X({
      data: [1, 2, 3],
      render: (data) => {
        setTimeout(() => {
          console.log(this);
        }, 200);
      }
    });
    x.render();

Answer 1

阅读arrow function documentation中标有“箭头函数用作方法”的部分

总结：箭头函数只是不绑定this或它们自己的this版本，而是引用全局Window对象。

Answer 2

因为arrow functions 词汇绑定。这意味着他们承担了＆＃34;这个＆＃34;在申报时。它们不受其他修改this值的方式的影响，包括被称为bind，apply和call等方法。

＆＃13;

function F() {
  this.type = 'F';
  this.logTypeExpression = function() {
    console.log(this.type);
  };
  this.logTypeArrow = () => {
    console.log(this.type);
  };
}

function G() {
  this.type = 'G';
}

var f = new F();
var g = new G();

f.logTypeExpression(); // F
f.logTypeArrow(); // F

// Now lets give these functions to G
g.logTypeExpression = f.logTypeExpression;
g.logTypeArrow = f.logTypeArrow;

g.logTypeExpression(); // G
g.logTypeArrow(); // F(!) (That's because `this` was assigned by the arrow function)

＆＃13;

Answer 3

在创建箭头功能时，this未绑定到任何对象，因此它仍然引用window。如果您想引用该特定实例，也许您想尝试console.log(x);？

Answer 4

下面的代码仅包含对使用对象文字语法创建的函数的引用。

this.render_ = config.render;

使用 bind（this）将告诉函数在调用X对象实例中的函数时使用参数对象作为此引用。

class X {
    constructor(config) {
        this.data = config.data;
        this.render_ = config.render.bind(this);
    }
    render() {
        this.render_(this.data);
    }
}

此外，如果它是您的代码段中的箭头函数或常规函数表达式也无关紧要。

JavaScript - 带箭头函数

4 个答案: