Question

我相信这可以通过箭头功能解决，但我不确定如何。我想访问this.props函数内的render。我知道我可以把它作为一个论点，但不愿意。这是否可以使用箭头功能？如果是这样，我需要改变什么？

class View {
  constructor(options) {
    this.options = options;
  }
  render(el, props = {}) {
    this.props = props;
    el.innerHTML = this.options.render(el);
  }
} 

var Test = new View({
  render() {
    return `${this.props.test}`
    //
    // Also, tried ${props.test} in my template literal
    //
  }
});

Test.render(document.getElementById("main"), {
    test:"123"
})

Answer 1

箭头函数允许您访问外部闭包的内容，而不是调用函数空间。函数的定义点是将它与被调用者的变量隔离开来。箭头函数只是使上下文或this对象等于它的定义闭包。因此

var that = this;
(() => console.log(that === this))();

将打印为true，而

var that = this;
(function(){console.log(that === this)})();

将打印错误箭头函数可以访问this上下文的原因是因为它在那里定义，而不是因为它在那里被调用。

强制上下文对象的唯一方法是使用Function.prototype.call或Function.prototype.apply

Answer 2

您需要this.props = props分配吗？你可以有这样的东西。

class View {
  
  constructor(options) {
    this.options = options;
  }

  render(el, props = {}) {
    el.innerHTML = this.options.render(props);
  }
}

var test = new View({ render: x => `${x.test}` });

test.render(document.getElementById("main"), { test:"123" });

<div id="main"></div>

如何更改此JavaScript以使用箭头函数来访问属性

2 个答案: