Помощь, «это» сбивают с толком меня в JavaScript

Question

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

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

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

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

Answer 1

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

x.init() 

Не будет отображаться «тест», если вы не используете 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 обходным.

Answer 2

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

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

Answer 3

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

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

Answer 4

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

var me = this; 

вне

function(){ 

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

Answer 5

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