Лучше ли связывать это или использовать переменную?

Question

ли это лучше сделать,

asset.addEventListener("load", function() { 
    this.emit({ 
    type: "load", 
    asset: asset 
    }); 
}.bind(this), false); 

Или

var scope = this; 

asset.addEventListener("load", function() { 
    scope.emit({ 
    type: "load", 
    asset: asset 
    }); 
}, false); 

Это лучше, чтобы связать функцию, или просто сохранить ссылку на this в переменной?

Answer 1

Я чувствую, что второй вариант лучше, просто чтобы избежать путаницы. Использование this было проблемой многих проблем JavaScript, поэтому, когда вы можете избежать этого, вы должны, на мой взгляд. Кстати, это также делается в таких библиотеках, как Knockout.

Если вы хотите узнать больше о this ключевом слове, это хорошее объяснение различных различных значений this может иметь в разных контекстах: не http://javascriptweblog.wordpress.com/2010/08/30/understanding-javascripts-this/

Answer 2

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

var scope = this; 
var handler = function() { 
    scope.emit({ 
    type: "load", 
    asset: asset 
    }); 
}; 

asset.addEventListener("load", handler, false); 

Answer 3

Это действительно зависит от целого ряда факторов. Вот несколько соображений:

• Исторически функция, созданная из .bind() была медленнее.

• Связанный this не может изменить свое значение, в то время как переменная может. (Угадайте, что вы не увидите здесь изменений.)

• Вы потеряете ссылку на элемент, хотя вы все равно можете получить ее через event.currentTarget.

---

Еще одна альтернатива, чтобы рассмотреть, чтобы сделать ваш объект реализации интерфейс Event Listener . Это позволит вам передать объект как обработчик и вызовет вашу реализацию метода handleEvent(), который вы предоставляете.

Тогда значение this будет автоматически вашим объектом.

Так что если ваш this является объект, который приходит из конструктора, вы можете сделать это:

function MyCtor() { 
    // your constructor 
} 
 // This implements the `Event Listener` interface 
MyCtor.prototype.handleEvent = function(event) { 
      // ------v----should be "load" 
    return this[event.type](event) 
}; 
 // This is the `load` handler 
MyCtor.prototype.load = function(event) { 
    this.emit({ 
     type: "load", 
     asset: event.currentTarget 
    }); 
};

---

А затем связать обработчик вроде этого:

asset.addEventListener("load", this, false); 

---

Теперь ваше значение в событии handle будет вашим объектом, поэтому вы можете вызвать его другой метод s, и не было ни .bind, ни переменной закрытия.

Answer 4

Второй вариант совместим с большим количеством браузеров. Функция bind() не поддерживается IE 8 и ниже, если это имеет к вам значение.

Сайт Mozilla на bind имеет pollyfill for the bind function. По моему опыту, обычно это плохая идея добавить к прототипу встроенных объектов. Таким образом, второй вариант «лучше» - просто убедитесь, что вместо дескриптивного имени переменной вместо «этого» или «области». Использование общего имени может ввести в заблуждение, особенно когда вы добавляете больше функций.