javascript - 在 CoffeeScript 中的命名函数中看不到匿名函数

Question

想要将此 JavaScript 转换为 CoffeeScript :

function tileMap(tileSet, map, inPicSize, tileSize) {
    this.draw = function(context) {
        for (var i = 0; i < map.length; i++) {
            for (var j = 0; j < map[i].length; j++) {
                context.drawImage(tileSet, (map[i][j][0] - 1) * inPicSize, (map[i][j][1] - 1) * inPicSize, inPicSize, inPicSize, j * tileSize, i * tileSize, tileSize, tileSize);
            }
        }
    };
}

// initialization
function init() {
    var pic = new Image(); // Create image
    pic.src = 'http://dl.dropbox.com/u/8307275/p/set.png';
    var mapArr = [
        [[1, 4], [1, 4], [1, 4], [1, 4], [1, 4], [1, 4], [1, 4], [1, 4]],
        [[1, 4], [1, 1], [2, 1], [3, 1], [1, 4], [1, 4], [1, 4], [1, 4]],
        [[1, 4], [1, 2], [2, 2], [3, 2], [1, 4], [1, 3], [1, 3], [1, 3]],
        [[1, 4], [3, 4], [2, 3], [3, 4], [1, 4], [1, 3], [1, 4], [1, 4]],
        [[1, 4], [3, 4], [2, 4], [3, 4], [1, 4], [1, 3], [1, 4], [1, 4]],
        [[1, 4], [1, 4], [1, 3], [1, 4], [1, 4], [1, 3], [1, 4], [1, 4]],
        [[1, 4], [1, 4], [1, 3], [1, 3], [1, 3], [1, 3], [1, 4], [1, 4]],
        [[1, 4], [1, 4], [1, 4], [1, 4], [1, 4], [1, 4], [1, 4], [1, 4]]
        ];
    var map = new tileMap(pic, mapArr, 32, 32);
    var canvas = document.getElementById("preview_canvas");
    canvas.width = 480;
    canvas.height = 320;
    var context = canvas.getContext("2d");
    pic.onload = function() // When image loads
        {
        map.draw(context); // draw map
    };
}

$(document).ready(function() {
    init();
})

这段代码工作正常。接下来我将其转换为 CoffeeScript :

tileMap = (tileSet, map, inPicSize, tileSize) ->
    this.draw = (context) ->
        for i in [0..map.length]
            for j in [0..map[i].length]
                context.drawImage(tileSet, (map[i][j][0] - 1) * inPicSize, (map[i][j][1] - 1) * inPicSize, inPicSize, inPicSize, j * tileSize, i * tileSize, tileSize, tileSize)

init = () ->
    pic = new Image()
    pic.src = 'http://dl.dropbox.com/u/8307275/p/set.png'
    mapArr = [
        [[1, 4], [1, 4], [1, 4], [1, 4], [1, 4], [1, 4], [1, 4], [1, 4]],
        [[1, 4], [1, 1], [2, 1], [3, 1], [1, 4], [1, 4], [1, 4], [1, 4]],
        [[1, 4], [1, 2], [2, 2], [3, 2], [1, 4], [1, 3], [1, 3], [1, 3]],
        [[1, 4], [3, 4], [2, 3], [3, 4], [1, 4], [1, 3], [1, 4], [1, 4]],
        [[1, 4], [3, 4], [2, 4], [3, 4], [1, 4], [1, 3], [1, 4], [1, 4]],
        [[1, 4], [1, 4], [1, 3], [1, 4], [1, 4], [1, 3], [1, 4], [1, 4]],
        [[1, 4], [1, 4], [1, 3], [1, 3], [1, 3], [1, 3], [1, 4], [1, 4]],
        [[1, 4], [1, 4], [1, 4], [1, 4], [1, 4], [1, 4], [1, 4], [1, 4]]
        ]
    map = new tileMap(pic, mapArr, 32, 32)
    canvas = document.getElementById("preview_canvas")
    canvas.width = 480
    canvas.height = 320
    context = canvas.getContext("2d")
    pic.onload = () ->
        map.draw(context)

$(document).ready ->
    init()

当字符串出现时，我收到错误“没有方法“Draw””

map.draw(context)

被执行。我做错了什么？

Answer 1

如果您查看编译后的 JavaScript，您会发现 tilemap 函数如下所示:

var tileMap;
tileMap = function(tileSet, map, inPicSize, tileSize) {
  return this.draw = function(context) {
    …
  };
};

等等，什么？是的，它确实返回 draw 函数而不是实例。总而言之，代码中有很多不必要的 return 语句……要解决这种特殊情况，您要么必须在代码末尾添加显式的 return this ，要么使用class语法:

class tileMap
    constructor: (tileSet, map, inPicSize, tileSize) ->
        @draw = (context) ->
            for row, i in map
                for pic, j in row
                    context.drawImage(tileSet, (pic[0] - 1) * inPicSize, (pic[1] - 1) * inPicSize, inPicSize, inPicSize, j * tileSize, i * tileSize, tileSize, tileSize)
            return