CoffeeScript 范围问题

Question

我在这里做错了什么？我正在使用粗箭头 =>对于我的回调，但是当代码到达 cb.onEndElement 并调用 @returner 时，我得到一个空对象异常。那么为什么@returner 不存在呢？

class Parser
    constructor: () ->
        @returner = (data) ->

    searchParser: new xml.SaxParser (cb) =>
        cb.onStartElementNS (elem, attrs, prefix, url, ns) =>
            if elem is "results" then @results = []
            else if elem is "title" then @curr = "title"
            else @curr = "none"
        cb.onCdata (cdata) =>
            if @curr is "title" then @book.title = cdata
        cb.onEndElementNS (elem, prefix, url) =>
            @results.push @book if elem is "book"
        cb.onEndDocument =>
            @returner @results

    search: (str, callback) ->
        @returner = callback
        @searchParser.parseString str

p = new Parser
p.search "somexml", (data) ->
    console.log JSON.stringify data

Answer 1

您的方法 search 需要一个粗箭头 => 才能将其绑定到 Parser 的实例。

此外，虽然 searchParser: new xml.SaxParser (cb) => 行可以编译，但它可能没有执行您想要的操作，因为粗箭头将回调绑定到 Parser 而不是这个。您有两个选择：

1. 您应该将 @searchParser = new xml.SaxParser (cb) => ... 在你的构造函数中，而不是考虑到你调用它的方式。
2. 否则你可以使用 searchParser: () =>; new xml.SaxParser (cb) => 并用下面的括号调用它：@searchParser().parseString str，这将创建一个 searchParser 方法绑定到 this

作为示例，这里是我的两个解决方案，以及稍微简化的原始行以及编译后的代码，用于比较和对比目的：

CoffeeScript 中的简化示例：

class Parser
  constructor: () -> @searchParser1 = new xml.SaxParser (x) => console.log(x)
  searchParser2: () => new xml.SaxParser (x) => console.log(x)
  searchParser: new xml.SaxParser (x) => console.log(x)

编译的 JavaScript ：

var Parser;
var __bind = function(fn, me){ return function(){ return fn.apply(me, arguments); }; };
Parser = (function() {
  function Parser() {
    this.searchParser2 = __bind(this.searchParser2, this);    
    this.searchParser1 = new xml.SaxParser(__bind(function(x) {
      return console.log(x);
    }, this));
  }
  Parser.prototype.searchParser2 = function() {
    return new xml.SaxParser(__bind(function(x) {
      return console.log(x);
    }, this));
  };
  Parser.prototype.searchParser = new xml.SaxParser(__bind(function(x) {
    return console.log(x);
  }, Parser));
  return Parser;
}).call(this);

注意 searchParser1 和 searchParser2 如何将其回调绑定到 this 以及 searchParser 的回调如何绑定到 解析器。

与往常一样，CoffeeScript 主页 (http://jashkenas.github.com/coffee-script/) 上的“尝试 CoffeeScript”按钮是您的朋友！

Answer 2

首先，您谈论的概念不是“范围”，而是“this”，也非正式地称为“上下文”。尽管规则相当简单，但它无疑是 JavaScript（以及 CoffeeScript）中最棘手的概念之一。也许是因为 this 这个词本身，它的含义似乎不应该那么容易地根据函数的调用方式而改变......

尼古拉斯的答案是完全正确的，但我建议您还阅读了 this 并尝试真正理解它，而不是一直使用 => （这是一个很棒的工具，但并不总是正确的） 。我推荐的一些资源：

• JavaScript Garden 的 关于 this
• How to Node 的文章这是什么？
• 我的书，CoffeeScript: Accelerated JavaScript Development （一个无耻的插件，是的，但它确实解释了this，以及范围，相当程度的深度）