javascript - Fabric.js - 无法动态设置属性

Question

我正在尝试动态设置 direction 但有些东西不起作用。我没有收到错误。

function moveSelection(keyPressed) {
    var group = canvas.getActiveGroup(),
    obj = canvas.getActiveObject();

    if(!group && !obj) {return;}

    var direction = '',
        sign = '',
        operators = {
            '+': function(a, b) { return a + b },
            '-': function(a, b) { return a - b },
        };
    switch(keyPressed) {
        case 37:
            direction = 'left';
            sign = '-';
        break;
        case 38:
            direction = 'top';
            sign = '-';
        break;
        case 39:
            direction = 'right';
            sign = '+';
        break;
        case 40:
            direction = 'bottom';
            sign = '+';
        break;
    }

    if(group){
        group.set({
            direction : operators[sign](group.get(direction), 1)
        });
        canvas.renderAll();
    } else {
      obj.set({
        direction : operators[sign]( obj.get(direction),1 )
      });
      canvas.renderAll();
    }
}

但是当我将代码更改为以下代码时，它工作正常。有什么问题吗？谢谢:

obj.set({
    'left' : operators[sign]( obj.get(direction),1 )
});

Answer 1

长见识

使用 obj.set(direction, ...)。

但为什么呢？

我自己也被这几次咬过。即使知道它不应该工作 :)

但这就是 Javascript 的工作方式:

在您的代码段中，对象字面量中的“方向”被解释为“方向”属性:

obj.set({
  direction : operators[sign]( obj.get(direction),1 )
});

就像这个对象字面量中的foo:

var foo = 'x';
var obj = { foo: 'bar' };

创建名为“foo”的属性而不是名为“x”的属性(foo 变量“包含”)。

这可能看起来有点奇怪，因为你不是在写:

var obj = { 'foo': 'bar' };

其中 foo 被写为字符串文字 而不是标识符。但是对于 Javascript(直到 ECMAScript 5)，这并不重要。唯一的区别是使用标识符表示法，您只能表示同样有效的属性...标识符。

因此，例如，这些作为标识符是无效的:

{
  'foo-bar': 'baz',
  '5leafs': 123,
  'or.with': 'dots'
}

这就是为什么我们必须将它们写成字符串文字。

这种混淆也可能来自于 Javascript 中的括号表示法确实允许创建动态属性:

var foo = 'x', obj = { };
obj[foo] = 'bar';

这会创建一个名为“x”而不是“foo”的属性。而如果我们通过点符号执行赋值:

obj.foo = 'bar';

它将创建一个名为“foo”的属性。

所以这可以说是 Javascript 的限制，因为我们不能同时拥有对象字面量和动态评估的属性:

obj.foo         // does NOT evaluate
obj[foo]        // evaluates

({ foo: ... })  // does NOT evaluate
?               // evaluates

那我之前为什么要提到 ECMAScript 5？

因为在 ECMAScript 6(即将发布的标准)中，我们可能有所谓的 "computed property names" ，您可以在其中动态评估对象字面量中的属性名称，如下所示:

var foo = 'x';
var obj = { [foo]: 'bar' };

obj.foo; // undefined
obj.x; // 'bar'

我真的很期待这个。