ES6方法獲得null「this」並且類變量不可訪問

Question

我正在使用ES6類將一些功能捆綁在Node中。這裏是（基本上）是什麼樣子：

class processDocs { 
    constructor(id) { 
    this.id = id; 
    // console.log(this) returns { id: id } 
    } 

    getDocs(cb) { 
    // console.log(this) returns null 
    docs 
     .query(qb => { 
     qb.where('id', this.id); 
     }) 
     .fetch() 
     .then(function(documents) { 
     cb(null, documents); 
     }) 
    ; 
    } 

    alterDocs(documents, cb) { 
    //some logic 
    } 

    reindexSearch(cb) { 
    //some logic 
    } 

    process() { 
    // console.log(this) returns { id: id } 
    async.waterfall([ 
     this.getDocs, 
     this.alterDocs, 
     this.reindexSearch 
    ]); 
    } 
} 


export default processDocs; 

我以爲跟ES6類的方式來分配公共變量是簡單的引用this並通過構造函數來初始化這些變量的方式正是它的顯示方式在我的班級定義中。

這裏是我如何調用類（在一個單獨的文件）：

var Processor = require('./processDocs'); 

var pr = new Processor(id); 
var docs; 
pr.process(); 

這裏的問題，當我從構造console.log出this，我讓我的{ id: id }值預測;但是，每當我註銷this時getDocs當process正在運行時，它是空的。但是，當我在瀑布之前註銷this,process()時，我得到了我的原始對象。

這是否有任何理由？

順便說一句，我使用節點：v0.10.33和babel節點4.6.6和我運行babel-node --harmony標誌。在任何人詢問之前，我無法更新到較新的節點版本，因爲主要依賴於卡在v0.10.x。

編輯我能夠創建一個解決方法，但它不是很像es6。這個問題似乎與async.waterfall。我不得不使用一個.bind來解決它：

async.waterfall([ 
     this.getDocs.bind(this), 
     this.alterDocs.bind(this), 
     this.reindexSearch.bind(this) 
    ]); 

Answer 1

ES6並沒有改變「this」的工作方式，因此它取決於「你在哪裏調用它」的上下文而不是「總是具有相同」的值。這很不直觀，在其他語言中並不常見。

考慮這個例子

class processDocs { 
    constructor(id) { 
    this.id = id; 
    console.log(this) 
    } 

    getDocs(cb) { 
    console.log(this) 
    } 

    alterDocs(documents, cb) { 
    //some logic 
    } 

    reindexSearch(cb) { 
    //some logic 
    } 

    process() { 
    console.log(this) 
    } 
} 

var process = new processDocs(10); 
var docs = process.getDocs(function(){}); 
var processInstance = process.process(); 

var docsAsFunction = process.getDocs; 
docsAsFunction(function(){}); 

輸出是

processDocs {id: 10} 
processDocs {id: 10} 
processDocs {id: 10} 
undefined 

正如你所看到的，最後一個是取消定義，它呼籲「docsAsFunction」，因爲你沒有直接調用該函數從它的類別來看，因此背景是不同的。

你可以閱讀一下例如here

Answer 2

我創建了自己的以下功能。

let bind = function(fn, me){ return function(){ return fn.apply(me, arguments); }; }; //from coffeescript's => operator 

//use in a class's constructor to make the this pointer always refer to the object in which a function resides 
function fixThisPointer(_this, func){ 
    _this[func.name] = bind(_this[func.name], _this); 
} 

function fixThisPointer2(_this, funcNameArray){ 
    for (name of funcNameArray){ 
    _this[name] = bind(_this[name], _this); 
    } 
} 

然後，當我需要的時候，我在構造函數

fixThisPointer(this, foo) 

或者命令

fixThisPointer2(this, ['foo', 'foo2', 'foo3']) 

Answer 3

您可以使用類中箭頭的功能，因爲他們的汽車使用此命令綁定這個。你可以寫你的類方法爲：

getDocs = (cb) => { 
    // console.log(this) will not returns null 
    docs 
     .query(qb => { 
     qb.where('id', this.id); 
     }) 
     .fetch() 
     .then(function(documents) { 
     cb(null, documents); 
     }) 
    ; 
} 

看到this MDN article：「箭功能捕捉封閉的上下文的這個值」

Answer 4

考慮更新的process()身體這樣的：

process() { 
    // console.log(this) returns { id: id } 
    async.waterfall([ 
    (cb)=>{this.getDocs(cb);}, 
    (documents,cb)=>{this.alterDocs(documents,cb);}, 
    (cb)=>{this.reindexSearch(cb);} 
    ]); 
} 

使用箭頭函數可確保類的成員函數被正確的上下文調用。