獲取「這個」背景下

Question

我試圖創建JS一個「類」，簡化結構，其中低於：

http://codepen.io/Deka87/pen/WpqYRP?editors=0010

function Alert() { 
    this.message = "Test alert"; 
    this.document = $(document); 

    this.document.on('click', function() { 
    this.show(); 
    }.bind(this)); 

}; 

Alert.prototype.show = function() { 
    setTimeout(function() { 
    console.log(this.message); 
    }, 50); 
}; 

var alert = new Alert(); 

當你點擊document它應該會在控制檯中顯示this.message的內容。但是，它現在顯示爲undefined。我相信問題是this.messsage無法獲得原始this上下文，因爲它是另一個函數的包裝（在我的情況下爲setTimeout）。任何幫助，將不勝感激！

Answer 1

下面是我的工作，你通過參考self，這是你需要正確的上下文得到你的this.message。

function Alert() { 
    this.message = "Test alert"; 
    this.document = $(document); 
    this.document.on('click', function() { 
    this.show(); 
}.bind(this)); 
}; 
Alert.prototype.show = function() { 
    var self = this; 
    setTimeout(function() { 
    console.log(self.message); 
    }, 50); 
}; 
var alert = new Alert(); 

Answer 2

您可以使用箭頭功能，這將保留您的這上下文。

function Alert() { 
    this.message = "Test alert"; 
    this.document = $(document); 

    this.document.on('click',() => { 
    this.show(); 
    }); 

}; 

Alert.prototype.show = function() { 
    setTimeout(() => { 
    console.log(this.message); 
    }, 50); 
}; 

var alert = new Alert(); 

瞭解更多：https://developer.mozilla.org/it/docs/Web/JavaScript/Reference/Functions_and_function_scope/Arrow_functions。