【问题标题】:What is the '()' thing in the compiled code? [duplicate]编译代码中的“()”是什么? [复制]
【发布时间】:2011-11-19 23:58:22
【问题描述】:

可能重复:
What does this mean? (function (x,y)){…}){a,b); in JavaScript

我有以下来自Canvas documentation的JS代码:

 for(var i=0;i<4;i++){  
  for(var j=0;j<3;j++){  
    ctx.beginPath();  
    var x              = 25+j*50;               // x coordinate  
    var y              = 25+i*50;               // y coordinate  
    var radius         = 20;                    // Arc radius  
    var startAngle     = 0;                     // Starting point on circle  
    var endAngle       = Math.PI+(Math.PI*j)/2; // End point on circle  
    var anticlockwise  = i%2==0 ? false : true; // clockwise or anticlockwise  

    ctx.arc(x,y,radius,startAngle,endAngle, anticlockwise);  

    if (i>1){  
      ctx.fill();  
    } else {  
      ctx.stroke();  
    }  
  }  
} 

我想把它变成一个 CoffeeScript 代码。这里是:

@draw = ->
  canvas = document.getElementById('canvas')
  ctx = canvas.getContext('2d')

  for i in [0..3]
    for j in [0..2]
      ctx.beginPath()

      x = 25 + j * 50
      y = 25 + i * 50
      radius = 20
      startAngle = 0
      endAngle = Math.PI + (Math.PI * j) / 2
      anticlockwise = if i % 2 == 0 then false else true

      ctx.arc(x, y, radius, startAngle, endAngle, anticlockwise)

      if i > 1 then ctx.fill() else ctx.stroke()

一切都很好,但我有一个关于编译代码的问题:

this.draw = function() {
  var anticlockwise, canvas, ctx, endAngle, i, j, radius, startAngle, x, y, _results;
  canvas = document.getElementById('canvas');
  ctx = canvas.getContext('2d');
  _results = [];
  for (i = 0; i <= 3; i++) {
    _results.push((function() {
      var _results2;
      _results2 = [];
      for (j = 0; j <= 2; j++) {
        ctx.beginPath();
        x = 25 + j * 50;
        y = 25 + i * 50;
        radius = 20;
        startAngle = 0;
        endAngle = Math.PI + (Math.PI * j) / 2;
        anticlockwise = i % 2 === 0 ? false : true;
        ctx.arc(x, y, radius, startAngle, endAngle, anticlockwise);
        if (i > 1) {
          _results2.push(ctx.fill());
        } else {
          _results2.push(ctx.stroke());
        }
      }
      return _results2;
    })());
  }
  return _results;
};

那么,为什么'()' 括号出现在return _results2; 行之后?没什么大不了的:代码做得很好,但是有点完美主义,我想知道如何消除这些圆括号。

UPD:谢谢。现在我明白了,什么是'()'。但是,我仍然有一个问题:为什么会出现?

【问题讨论】:

    标签: javascript coffeescript


    【解决方案1】:

    为什么会出现?

    该函数限定了 CoffeeScript 创建的临时变量以存储列表解析的值(此处为 _results2)。当循环是列表推导式时,CoffeeScript 总是会创建这样的函数。

    该函数并非绝对必要,但它使编译后的 JavaScript 与 CoffeeScript 源代码(CoffeeScript 的目标之一)更加 1:1。例如,

    arr = (i for i in [1..3])
    

    编译成

    arr = (function() { ... })();
    

    如果没有额外的功能,你会得到类似的东西

    var _results2 = [];
    for (...) { ... }
    arr = _results2;
    

    【讨论】:

      【解决方案2】:

      它定义了函数,然后立即调用它。它实际上与 CoffeeScript 本身无关,但这里至少还有一个参考,其中包含有关如何和为什么的更多信息(这种用法中的命名部分纯粹是可选的):

      Can I name a javascript function and execute it immediately?

      【讨论】:

        【解决方案3】:

        这是一个自调用函数。

        它定义了一个函数:(function() { ... }),然后在没有参数()的情况下调用它。

        函数返回值加到数组return _results2;

        【讨论】:

          【解决方案4】:

          代码定义了一个匿名函数对象,然后调用它。

          你应该看的代码如下:

             (function() {
                var _results2;
                _results2 = [];
                for (j = 0; j <= 2; j++) {
                  ctx.beginPath();
                  x = 25 + j * 50;
                  y = 25 + i * 50;
                  radius = 20;
                  startAngle = 0;
                  endAngle = Math.PI + (Math.PI * j) / 2;
                  anticlockwise = i % 2 === 0 ? false : true;
                  ctx.arc(x, y, radius, startAngle, endAngle, anticlockwise);
                  if (i > 1) {
                    _results2.push(ctx.fill());
                  } else {
                    _results2.push(ctx.stroke());
                  }
                }
                return _results2;
              })()
          

          第一行定义函数对象,然后在最后一行使用() 调用。

          这与使用 jQuery 插件所做的类似,其中使用 $ 的代码是带有 (function ($) { /* … */ })(jquery) 的包装器。

          【讨论】:

            猜你喜欢
            • 1970-01-01
            • 1970-01-01
            • 2021-10-27
            • 1970-01-01
            • 1970-01-01
            • 1970-01-01
            • 1970-01-01
            • 1970-01-01
            • 1970-01-01
            相关资源
            最近更新 更多