Замыкания Javascript и this

КОГДА функция вызывается, «this» относится к строке. Если вы хотите получить объект, вы можете сделать это примерно так: ]

AddChildRowEvents: function(row, p2) {
    var theObj = this;
    if (document.attachEvent) {
         row.attachEvent('onclick', function(){theObj.DoSomething();});
    } else {
         row.addEventListener('click', function(){theObj.DoSomething();}, false);
    }
},

Когда функция вызывается, она имеет доступ к переменной theOBj, которая была в области видимости, когда функция была определена.

Это обычная проблема с закрытием. Чтобы решить эту проблему, попробуйте что-то вроде этого:

var myObject = {    
    AddChildRowEvents: function(row, p2) { 
        var self = this;

        if (document.attachEvent) {            
             row.attachEvent('onclick', function(){this.DoSomething(self);});        
        } else {            
             row.addEventListener('click', function(){this.DoSomething(self);}, false);        
        }    
    },    

    DoSomething: function(self) {       
        self.SomethingElse(); 
    }
}

this всегда относится к внутренней функции, если у вас есть вложенные функции, вы должны создать другую переменную и указать ее на this.

var myObject = {
    AddChildRowEvents: function(row, p2) {
        var that = this;
        if (document.attachEvent) {
            row.attachEvent('onclick', function(){that.DoSomething();});
        } else {
            row.addEventListener('click', function(){that.DoSomething();}, false);
        }
    }
}

Проблема с вашим кодом здесь, в следующей строке кода вы определили анонимную функцию и передали ее в качестве обработчика события onClick в следующих строках:

    row.attachEvent('onclick', function(){this.DoSomething();});

и

    row.addEventListener('click', function(){this.DoSomething();}, false);

когда возникает событие onclick и оно вызывает анонимную функцию, которую вы передали, контекст это ссылается на объект, который вызвал событие, но не на myObject. потому что в этот момент контекст выполнения находится в контексте обработчика событий.

Решение: вы можете проделать трюк, о котором рассказали Майку Кантору, или, используя jQuery, использовать прокси-метод, чтобы определить контекст это в анонимной функции.

Итак, ваш код будет таким:

var myObject = {

    AddChildRowEvents: function(row, p2) {
        if (document.attachEvent) {
            row.attachEvent('onclick', $.proxy(function () {
                this.DoSomething();
            }, this));
        } else {
            row.addEventListener('click', $.proxy(function () {
                this.DoSomething();
            },this), false);
        }
    },

    DoSomething: function() {
        this.SomethingElse(); //<-- Error here, object 'this' does not support this method.
    }
}

вы упомянули, что ошибка находится в this.SomthingElse (), но ваш код не показывает ее. Если вы действительно получаете ошибку в этой строке кода, возможно, вы используете метод DoSomthing где-то еще в качестве обработчика событий.

Проблема заключается в том, как this управляется в JS, что может быть быстро, особенно когда у вас асинхронно вызывается обратный вызов (и когда создается закрытие, привязанное к этому).

Когда вызывается метод AddChildRowEvents, this хорошо ссылается на переменную myObject. Но цель этого метода - поставить обработчик клика. Так что событие будет запущено когда-нибудь в будущем. В то время какой объект действительно вызовет событие? Фактически, это DOM element, на который пользователь будет нажимать. Таким образом, this будет ссылаться на эту DOM element, а не на переменную myObject.

Для более современного решения, чем представленные, можно использовать bind method или arrow function.

1. Решение с функцией стрелки

let handler = {
	addEventHandler: function(row) {
	  console.info("this", this)
  	row.addEventListener("click", () => {
    	console.info("this", this)
    	this.doSomethingElse()
    })
  },
  
  doSomethingElse: function() {
  	console.info("something else")
  }
}
var div = document.querySelector("div")
handler.addEventHandler(div)

<div>one</div>

В arrow function (которые доступны с ES2015) контекст this находится не в контексте выполнения, а в лексическом контексте. Разница между ними в том, что лексический контекст обнаруживается во время сборки, а не во время выполнения, поэтому лексический контекст легче отслеживать. Здесь, внутри arrow function, this ссылается на тот же this внешней функции (то есть addEventHandler), так что ссылка на myObject.

Дополнительные сведения о свойствах функции жирной стрелки по сравнению с обычными функциями: https://dmitripavlutin.com/6-ways-to-declare-javascript-functions/

2. Решение с привязкой

let handler = {
	addEventHandler: function(row) {
	  console.info("this", this)
  	row.addEventListener("click", function() {
    	console.info("this", this)
    	this.doSomethingElse()
    }.bind(this))
  },
  
  doSomethingElse: function() {
  	console.info("something else")
  }
}
var div = document.querySelector("div")
handler.addEventHandler(div)

<div>one</div>

На этот раз, когда функция обратного вызова передается в addEventListener, можно связать контекст this с элементом this во внешней функции addEventHandler.