javascript - Comment accéder au correct ceci à l'intérieur d'un callback

Mots clés : javascriptcallbackthisjavascript

meilleur 4 Réponses javascript - Comment accéder au correct ceci à l'intérieur d'un callback

vote vote

94

function foo() {     console.log(this); }  // normal function call foo(); // `this` will refer to `window`  // as object method var obj = {bar: foo}; obj.bar(); // `this` will refer to `obj`  // as constructor function new foo(); // `this` will refer to an object that inherits from `foo.prototype` 
function MyConstructor(data, transport) {     this.data = data;     transport.on('data', () => alert(this.data)); } 
function MyConstructor(data, transport) {     this.data = data;     var self = this;     transport.on('data', function() {         alert(self.data);     }); } 
function MyConstructor(data, transport) {     this.data = data;     var boundFunction = (function() { // parenthesis are not necessary         alert(this.data);             // but might improve readability     }).bind(this); // <- here we are calling `.bind()`      transport.on('data', boundFunction); } 
array.map(callback[, thisArg]) 
var arr = [1, 2, 3]; var obj = {multiplier: 42};  var new_arr = arr.map(function(v) {     return v * this.multiplier; }, obj); // <- here we are passing `obj` as second argument 
function Foo() {     this.data = 42,     document.body.onclick = this.method; }  Foo.prototype.method = function() {     console.log(this.data); }; 
function method() {     console.log(this.data); }   function Foo() {     this.data = 42,     document.body.onclick = this.method; }  Foo.prototype.method = method; 
document.body.onclick = this.method.bind(this); 
var self = this; document.body.onclick = function() {     self.method(); }; 
document.body.onclick = () => this.method(); 
vote vote

83

function MyConstructor(data, transport) {     this.data = data;     transport.on('data', ( function () {         alert(this.data);     }).bind(this) ); } // Mock transport object var transport = {     on: function(event, callback) {         setTimeout(callback, 1000);     } }; // called as var obj = new MyConstructor('foo', transport); 
transport.on('data', _.bind(function () {     alert(this.data); }, this)); 
function MyConstructor(data, transport) {   var self = this;   this.data = data;   transport.on('data', function() {     alert(self.data);   }); } 
function MyConstructor(data, transport) {   this.data = data;   transport.on('data', () => {     alert(this.data);   }); } 
vote vote

77

object.property(); 
var f = object.property; f(); 
this.saveNextLevelData(this.setAll); 
this.saveNextLevelData(this.setAll.bind(this)); 
this.saveNextLevelData($.proxy(this.setAll, this)); 
vote vote

69

function MyConstructor(data, transport) {     this.data = data;     var self = this;     transport.on('data', function () {         alert(self.data);     }); } 
  function MyConstructor(data, transport) {     this.data = data;     transport.on('data',()=> {         alert(this.data);     }); } 
  function MyConstructor(data, transport) {     this.data = data;     transport.on('data',(function() {         alert(this.data);     }).bind(this); 

Questions similaires