компульсивное связывание этого с функциями

71
8

Я просто просматривал код jBox.js и натыкался на следующие строки кода:

jQuery(document).on('keyup.jBox-' + this.id, function(ev) {
(ev.keyCode == 37) && this.showImage('prev');
(ev.keyCode == 39) && this.showImage('next');
}.bind(this));

Посмотрите на код ЗДЕСЬ, этот парень, кажется, компульсивно связывает функции со значением this, у меня есть несколько вопросов относительно этого шаблона.

    Это какой-то шаблон дизайна?

    К чему стремится автор, связывая большинство методов с this?

    Например, возьмите приведенный выше фрагмент кода, чего пытается достичь автор, связывая функцию с this. (Мое предположение, что функция bind работает аналогично jQuerys $.proxy здесь, сохраняя значение этого в новом определении функции.).

спросил(а) 2015-07-28T01:12:00+03:00 5 лет, 3 месяца назад
1
Решение
99

В коде, который вы указали, если вы удалили вызов .bind(this), то this внутри keyup.jBox- Обработчик keyup.jBox- будет установлен в зависимости от того, какой узел DOM вызвал событие. Автор, однако, по-видимому, хочет, чтобы this было равно тому, что this (возможно, экземпляр jBox?) В точке, где сам обработчик.

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

Мое предположение, что функция bind работает аналогично jQuerys $.proxy здесь?

Да, это очень похоже.

Быстрый пример:

function Person(name) {
this.name = name;
this.greet = function() {
console.log('Hello, my name is ' + this.name);
};
};

var tenali = new Person('Tenali');
tenali.greet();
// > Hello, my name is Tenali

Отлично, это работает, потому что я, как автор, ожидаю, что вы всегда получите доступ к этому как <person-instance>.greet(). Что произойдет, если кто-то нарушит это предположение, хотя:

var jeremy = new Person('Jeremy');
var greet = jeremy.greet;
greet();
// > Hello, my name is undefined

Очевидно, что не работает должным образом, потому что теперь greet() в настоящее время вызываются как функция простого ола", полностью отделен от jeremy в качестве целевого контекста (который, как правило, выведенных в JavaScript с помощью . Обозначений для вызова метода).

Теперь, как потребитель Person, например, вы можете заставить this быть jeremy снова с помощью .call() или .apply():

var jeremy = new Person('Jeremy');
var greet = jeremy.greet;
greet.apply(jeremy);
// > Hello, my name is Jeremy

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

function Person(name) {
this.name = name;
this.greet = function() {
console.log('Hello, my name is ' + this.name);
}.bind(this);
};

Теперь, если мы вернемся к более раннему примеру, мы увидим, что он работает по назначению, поскольку я уже "привязал" функцию greet() к экземпляру Person:

var jeremy = new Person('Jeremy');
var greet = jeremy.greet;
greet();
// > Hello, my name is Jeremy

ответил(а) 2015-07-28T01:16:00+03:00 5 лет, 3 месяца назад
Ваш ответ
Введите минимум 50 символов
Чтобы , пожалуйста,
Выберите тему жалобы:

Другая проблема