3

我正在尝试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 )
});
4

1 回答 1

12

TLDR

使用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（即将推出的标准）中，我们可能有所谓的“计算属性名称”，您可以在其中动态评估对象文字中的属性名称，如下所示：

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

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

我真的很期待这个。

于 2013-10-14T13:25:00.727 回答