Question

I am trying to understand _drawControl function of Fabric.js javascript library, but couldn't figure it out 2 lines of this, because they don't look like functions and not conditional if, so what's the purpose here?

Line 1:

isVML() || this.transparentCorners || ctx.clearRect(left, top, size, size);

Line 2:

ctx[methodName + 'Rect'](left, top, size, size);

Full function:

_drawControl: function(control, ctx, methodName, left, top) {
  if (!this.isControlVisible(control)) {
    return;
  }
  var size = this.cornerSize, stroke = !this.transparentCorners && this.cornerStrokeColor;
  switch (this.cornerStyle) {
    case 'circle':
      ctx.beginPath();
      ctx.arc(left + size / 2, top + size / 2, size / 2, 0, 2 * Math.PI, false);
      ctx[methodName]();
      if (stroke) {
        ctx.stroke();
      }
      break;
    default:
      isVML() || this.transparentCorners || ctx.clearRect(left, top, size, size);
      ctx[methodName + 'Rect'](left, top, size, size);
      if (stroke) {
        ctx.strokeRect(left, top, size, size);
      }
  }
}

Answer 1

此||运算符用于short-circuit evaluation。它从执行isVML()开始，如果返回一个假值，它将继续到下一个语句（this.transparentCorners）并检查相同。达到truthy值时，将返回该值。在这种情况下，不使用返回值。

Answer 2

这很简单。第一个短路并采取第一个真正的论点：

＆＃13;

let foo = false || "foo" || "never reached";
console.log(foo); // foo

let bar = "bar" || "never reached" || false;
console.log(bar); // bar

＆＃13;

第二个通过括号表示法（使用4个参数）调用对象的方法 - 它用于动态调用方法：

＆＃13;

function Foo() {
  
}

Foo.prototype.bar = function() {
    console.log('bar');
  }


let foo = new Foo();
let variable = 'bar';
foo[variable]();

// same as

foo.bar();

＆＃13;

Single line of || character in Javascript?

2 个答案: