Question

我试图理解为什么在计算属性中使用function（）有效，但是胖箭头不能。

这是我创建的一个类，以及计算属性的两个定义，一个传入function() {}（foo），另一个传入() => {}栏。我将两个样式都传递给数组forEach（）也作为参考（foo1和bar1）。

有人可以解释这四个实例中的每一个情况吗？

import Ember from 'ember';

const Light = Ember.Object.extend({
    isOn: false,
    color: 'red',

    foo: Ember.computed( 'isOn', 'color',  function() {
      console.log(`this in foo is ${this}`);
    }) , 
    foo1: [1].forEach(function() {
      console.log(`this in foo1 is ${this}`);
    }) ,
    bar: Ember.computed( 'isOn', 'color',  () => {
      console.log(`this in bar is ${this}`);
    }), 
    bar1: [1].forEach( () => {
      console.log(`this in bar1 is ${this}`);
    }) 

});

export default Ember.Controller.extend({
  appName: 'Ember Twiddle',

  init() {
    this._super();
    this.set('bulb', Light.create());
  }

});

这是引用所有4个属性的模板

<h1>Welcome to {{appName}}</h1>
<br>
<br>
{{outlet}}
<br>
<br>
<p> the bulb is {{bulb.isOn}} </p>
<p> the bulb is {{bulb.foo}} </p>
<p> the bulb is {{bulb.foo1}} </p>
<p> the bulb is {{bulb.bar}} </p>
<p> the bulb is {{bulb.bar1}} </p>

以下是打印到控制台的结果。

DEBUG: -------------------------------
VM66 ember.debug.js:6395 DEBUG: Ember      : 2.4.4
VM66 ember.debug.js:6395 DEBUG: Ember Data : 2.4.3
VM66 ember.debug.js:6395 DEBUG: jQuery     : 1.11.3
VM66 ember.debug.js:6395 DEBUG: -------------------------------
VM70 about:srcdoc:29 this in foo1 is undefined
VM70 about:srcdoc:35 this in bar1 is undefined
VM70 about:srcdoc:26 this in foo is <(unknown mixin):ember360>
VM70 about:srcdoc:32 this in bar is undefined

这是twiddle的链接 https://ember-twiddle.com/d5905b42eff57e8ad5c99a27a3199429?openFiles=templates.application.hbs%2C

Answer 1

您的表单功能

foo1: [1].forEach(function() {
  console.log(`this in foo1 is ${this}`);

你可能知道，

不是计算函数;它们在解析时执行。 forEach返回的值为undefined因此，foo1属性的值将为常量undefined。在解析定义时，控制台日志将恰好发生一次，甚至在Light对象被实例化之前。

你的功能

bar: Ember.computed( 'isOn', 'color',  () => {
  console.log(`this in bar is ${this}`);
}),

不起作用，因为箭头功能具有词汇this （换句话说，周围的this）。 this将是解析定义时生效的this，可能是undefined或window。 Ember在相关对象的上下文（使用this）中调用指定为计算属性的一部分的函数，因此显然this等于undefined根本不起作用

如何定义ember.js计算属性中的a值？

1 个答案: