在ember.js中计算的属性的值是如何定义的？ [英] How is the a value of this in ember.js computed property defined?

问题描述

我想了解为什么在计算属性中使用function（）可以使用，但是一个胖箭头不是。

这是一个我创建的类，两个计算属性的定义，一个通过 function（）{} （foo），另一个传入（）=> {} bar。我将两个样式都传递给一个数组forEach（）也用于引用（foo1和bar1）。

有人可以解释这四个实例中发生的事情？

 从ember导入Ember; 
 
 const Light = Ember.Object.extend（{
 isOn：false，
 color：'red'，
 
 foo：Ember.computed 'isOn'，'color'，function（）{
 console.log（foo中的这个是$ {this}`）; 
}），
 foo1：[1] .forEach （function（）{
 console.log（foo1中的这个是$ {this}`）; 
}），
 bar：Ember.computed（'isOn'，'color' （）=> {
 console.log（'bar in $ {this}`）; 
}），
 bar1：[1] .forEach（（）=> {
 console.log（'bar in the bar1 is $ {this}`）; 
}）
 
}）; 
 
导出默认Ember.Controller.extend（{
 appName：'Ember Twiddle'，
 
 init（）{
 this._super（）; 
 this.set（'bulb'，Light.create（））; 
} 
 
}）; 
  

这里是引用全部4个属性的模板

 < h1>欢迎使用{{appName}}< / h1> 
< br> 
< br> 
 {{outlet}} 
< br> 
< br> 
< p>灯泡是{{bulb.isOn}}< / p> 
< p>灯泡是{{bulb.foo}}< / p> 
< p>灯泡是{{bulb.foo1}}< / p> 
< p>灯泡是{{bulb.bar}}< / p> 
< p>灯泡是{{bulb.bar1}}< / p> 
  

，这些结果打印到控制台。

 调试：------------------------------- 
 VM66 ember.debug.js：6395 DEBUG：Ember：2.4.4 
 VM66 ember.debug.js：6395 DEBUG：Ember数据：2.4.3 
 VM66 ember.debug.js：6395 DEBUG：jQuery ：1.11.3 
 VM66 ember.debug.js：6395 DEBUG：------------------------------- 
 VM70 about：srcdoc：29这在foo1是未定义的
 VM70 about：srcdoc：35这在bar1是undefined 
 VM70 about：srcdoc：26这在foo是<（未知的mixin）： ember360> 
 VM70 about：srcdoc：32这是在bar中未定义
  

这里是链接到旋转
https://ember-twiddle.com/d5905b42eff57e8ad5c99a27a3199429？ openFiles = templates.application.hbs％2C

解决方案

您的函数

  foo1：[1] .forEach（function（）{
 console.log（foo1中的这个是$ {this}`）; 
  

不是计算函数，你可能知道;它们在解析时执行， code> forEach 是 undefined 因此， foo1 属性的值将作为常量未定义。控制台日志将发生一次，当定义被解析时， Light 对象之前甚至实例化。

您的功能

  bar：Ember.computed（'isOn'，'color'，（）=> {
 console.log（bar in this is $ {this}）; 
}），
  

不起作用，因为arrow函数具有词法这个 （换句话说，环境的这个）。 这个将是在解析定义时有效的这个，这可能是 undefined 或窗口。 Ember调用在上下文（具有 this ）中的计算属性中指定的函数，因此显然有一个 code>等于 undefined 根本不起作用。

I am trying to understand why using function() inside a computed property works, but a fat arrow does not.

Here is a class I created, and two definitions of computed properties, one passing in function() {} (foo) , and the other passing in () => {} bar. I included both styles being passed into an array forEach() also for reference (foo1, and bar1).

Can someone explain what is going on in each of these four instances?

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());
  }

});

here is the template that references the all 4 properties

<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>

and here are the results printed to the console.

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

Here is the link to the twiddle https://ember-twiddle.com/d5905b42eff57e8ad5c99a27a3199429?openFiles=templates.application.hbs%2C

解决方案

Your functions of the form

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

are not computed functions, as you probably know; they are executed at parse time. The value returned by forEach is undefined Therefore, the value of the foo1 property will be the constant undefined. The console log will happen exactly once, when the definition is parsed, before a Light object is even instantiated.

Your function

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

does not work because arrow functions have lexical this (in other words, the this of the surroundings). The this will be the this in effect at the time the definition is parsed, which is likely to be either undefined or window. Ember invokes the functions specified as part of computed properties in the context (with the this) of the object in question, so obviously having a this equal to undefined won't work at all.

这篇关于在ember.js中计算的属性的值是如何定义的？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！