Question

我有这个javascript类：

class SearchService {

    /*@ngInject*/
    constructor($log, $timeout) {
        this._log = $log;
        this._timeout = $timeout;
    }

    startSearch(value, updateCallBack) {
        this.startSearchPrj(updateCallBack);
    }

    startSearchPrj(updateCallBack) {
        chunkedRequest({
            url: 'http://localhost:9090',
            method: 'GET',
            chunkParser: (rawChunk, prevChunkSuffix = '') => {
                return [JSON.parse(rawChunk), prevChunkSuffix];
            },
            onChunk: (err, parsedChunk) => {
                var data = this.cleanResults(parsedChunk)
                if(!this.activeChunkId) {
                    this.activeChunkId = data.resultCategoryId;
                }
                this.searchResults[data.resultCategoryId] = data;
                updateCallBack();
            }
        });
    }

    ...

}

export default SearchService;

onChunk有一个箭头函数，我喜欢用jasmin编写一个单元测试（因为它会很快变得复杂得多）。我怎么能这样做？

我尝试重构该类并将代码移动到onChunk方法中。但是this得到了另一种含义，我无法访问对象数据。

Answer 1

对于回调函数，ES.next类属性（目前位于stage 1）是要走的路：

class SearchService {
    onChunk = (err, parsedChunk) => { ... };
    ...
        chunkedRequest({
            ...
            onChunk: this.onChunk
        });    
    ...
}

这只是ES2015的语法糖：

class SearchService {
    /*@ngInject*/
    constructor($log, $timeout) {
        this.onChunk = (err, parsedChunk) => { ... }
        ...
    }
    ...
}

通过这种方式，事件处理程序可以进行测试，并且不必使用ES5样式Function.prototype.bind。

或者，原型方法而不是箭头属性可以与bind运算符一起使用（当前位于stage 0）：

class SearchService {
    onChunk(err, parsedChunk) { ... };
    ...
        chunkedRequest({
            ...
            onChunk: ::this.onChunk
        });    
    ...
}

哪个是加糖Function.prototype.bind：

            onChunk: this.onChunk.bind(this)

如何在JavaScript中单元测试箭头函数？

1 个答案: