Справка, "this" меня сбивает с толку в JavaScript

Работа с JavaScript одна из запутывающих вещей при использовании этого

var x = {  
  ele : 'test',
  init : function(){ 
    alert(this.ele);
  }
}

Однако при работе с несколькими объектами и особенно контекстом событий this изменяется и становится запутанным, чтобы отслеживать/понимать.

Итак, если у кого-то есть лучшие входы/рекомендации/мысли/лучшие практики, пожалуйста, поделитесь. Также я хотел бы знать, дает ли использование this какое-либо преимущество (производительность) или что?

Ответы

Ответ 1

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

x.init()

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

Эффективно вышеприведенная строка такая же: -

x.init.call(x);

первый параметр в использовании call присваивается this при выполнении функции.

Теперь рассмотрим: -

var fn = x.init;  //Note no () so the function itself is assigned to the variable fn
fn();

Теперь вы ничего не получаете в оповещении. Это потому, что выше это эффективно: -

fn.call(window);

В браузере Javascript объект window является синонимом глобального объекта. Когда функция вызывается "в raw", то this по умолчанию используется глобальный объект.

Классическая ошибка делает что-то вроде этого: -

var x = {
   ele: 'test';
   init: function(elem) { 
      elem.onclick = function() { alert(this.ele); }
   }
}
x.init(document.getElementById('myButton'));

Однако это не работает, потому что функция, привязанная к событию onclick, вызывается браузером, используя следующий код: -

onclick.call(theDOMElement)

Следовательно, когда функция работает this не так, как вы думаете.

Мое обычное решение этой ситуации: -

var x = {
   ele: 'test';
   init: function(elem) {
      var self = this; 
      elem.onclick = function() { alert(self.ele); }
      elem = null;
   }
}
x.init(document.getElementById('myButton'));

Обратите внимание, что elem = null работает с утечкой памяти IE.

Ответ 2

Это очень запутанно. Это зависит от того, как вы вызываете функцию. Дуг Крокфорд сделал хорошую рецензию в своей книге Javascript, Good Parts. Суть его в этом отличном ответе на иначе плохо сформулированный вопрос.

И нет, это не о производительности.

Ответ 3

Для меня это помогло многим следующим рекомендациям: каждый раз, когда вы видите this думаете owner. Объект, которому принадлежит имя переменной, которому назначена функция, станет this. Если вы не можете понять, кому это принадлежит, тогда this будет окном.

Ответ 4

Хорошая и просветительская статья по ключевому слову this this ( каламбур не предназначен). Статья может прояснить ситуацию для вас, я знаю, что это было для меня.

Существенным правилом является то, что ключевое слово this внутри функции всегда ссылается на владельца функции, а ключом к пониманию последствий является понимание при передаче функций и их копировании. См. Предыдущую статью для примеров.

Ответ 5

использование

var me = this;

вне

function(){

то вы можете сослаться на меня внутри функции()