В предыдущем посте я описал, что this в javascript не привязывается к объекту, а зависит от контекста вызова. На практике же часто возникает необходимость в том, чтобы this внутри функции всегда ссылался на конкретный объект.

В данной статье мы рассмотрим два подхода для решения данной задачи.

1. jQuery.proxy — подход с использованием популярной библиотеки jQuery

2. Function.prototype.bind — подход, добавленный в JavaScript 1.8.5. Рассмотрим также его применение для карринга (частичного применения функции) и некоторые тонкости работы, о которых знают единицы.

Введение

Рассмотрим простой объект, содержащий свойство x и метод f, который выводит в консоль значение this.x

var object = {

x: 3,

f: function() {

console.log(this.x);

}

}

Как я указывал в предыдущем посте, при вызове object.f() в консоли будет выведено число 3. Предположим теперь, что нам нужно вывести данное число через 1 секунду.

setTimeout(object.f, 1000); // выведет undefined

//простой способ это обойти — сделать вызов через обёртку:

setTimeout(function() { object.f(); }, 1000); // выведет 3

Каждый раз использовать функцию обертку — неудобно. Нужен способ привязать контекст функции, так, чтобы this внутри функции object.f всегда ссылался на object

1. jQuery.proxy

jQuery.proxy(function, context);

jQuery.proxy(context, name);

Ни для кого не секрет, что jQuery — очень популярная библиотека javascript, поэтому вначале мы рассмотрим применение jQuery.proxy для привязки контекста к функции.

jQuery.proxy возвращает новую функцию, которая при вызове вызывает оригинальную функцию function в контексте context. С использованием jQuery.proxy вышеописанную задачу можно решить так:

setTimeout($.proxy(object.f, object), 1000); // выведет 3

Если нам нужно указать несколько раз одинаковый callback, то вместо дублирования

setTimeout($.proxy(object.f, object), 1000);

setTimeout($.proxy(object.f, object), 2000);

setTimeout($.proxy(object.f, object), 3000);

лучше вынести результат работы $.proxy в отдельную переменную

var fn = $.proxy(object.f, object);

setTimeout(fn, 1000);

setTimeout(fn, 2000);

setTimeout(fn, 3000);

Обратим теперь внимание на то, что мы дважды указали object внутри $.proxy (первый раз метод объекта — object.f, второй — передаваемй контекст — object). Может быть есть возможность избежать дублирования? Ответ — да. Для таких случаев в $.proxy добавлена альтернативная возможность передачи параметров — первым параметром должен быть объект, а вторым — название его метода. Пример:

var fn = $.proxy(object, "f");

setTimeout(fn, 1000);

Обратите внимание на то, что название метода передается в виде строки.

2. Function.prototype.bind

func.bind(context[, arg1[, arg2[, ...]]])

Перейдем к рассмотрению Function.prototype.bind. Данный метод был добавлен в JavaScript 1.8.5.

Совместимость с браузерами

Эмуляция Function.prototype.bind из Mozilla Developer Network

Function.prototype.bind имеет 2 назначения — статическая привязка контекста к функции и частичное применение функции.

По сути bind создаёт новую функцию, которая вызывает func в контексте context. Если указаны аргументы arg1, arg2… — они будут прибавлены к каждому вызову новой функции, причем встанут перед теми, которые указаны при вызове новой функции.

2.1. Привязка контекста

Использовать bind для привязки контекста очень просто, достаточно рассмотреть пример:

function f() {

console.log(this.x);

}

var bound = f.bind({x: 3}); // bound - новая функция - "обертка", у которой this ссылается на объект {x:3}

bound();// Выведет 3

Таким образом пример из введения можно записать в следующем виде:

var object = {

x: 3,

f: function() {

console.log(this.x);

}

}

setTimeout(object.f.bind(object), 1000); // выведет 3

2.2. Частичное применение функций

Для упрощения рассмотрим сразу пример использования bind для частичного применения функций

function f(x, y, z) {

console.log(x + y + z);

}

var bound = f.bind(null, 3, 5); // напомню что первый параметр - это контекст для функции, поскольку мы не используем this в функции f, то контекст не имеет значения - поэтому в данном случае передан null

bound(7); // распечатает 15 (3 + 5 + 7)

bound(17); // распечатает 25 (3 + 5 + 17)

Как видно из примера — суть частичного применения функций проста — создание новой функции с уменьшенным количеством аргументов, за счет «фиксации» первых аргументов с помощью функции bind.

На этом можно было бы закончить статью, но… Функции, полученные с использованием метода bind имеют некоторые особенности в поведении

2.3. Особенности bind

В комментариях к предыдущей статье было приведено 2 примера, касающихся bind (раз, два).

Я решил сделать микс из этих примеров, попутно изменив строковые значения, чтобы было проще с ними разбираться.

Пример (попробуйте угадать ответы)

function ClassA() {

console.log(this.x, arguments)

}

ClassA.prototype.x = "fromProtoA";

var ClassB = ClassA.bind({x : "fromBind"}, "bindArg");

ClassB.prototype = {x : "fromProtoB" };

new ClassA("callArg");

new ClassB("callArg");

ClassB("callArg");

ClassB.call({x: "fromCall"}, 'callArg');

Ответы

Прежде чем разобрать — я перечислю основные особенности bind в соответствии со стандартом.

2.3.1. Внутренние свойств

У объектов Function, созданных посредством Function.prototype.bind, отсутствует свойство prototype или внутренние свойства [[Code]], [[FormalParameters]] и [[Scope]].

Это ограничение отличает built-in реализацию bind от вручную определенных методов (например, вариант из MDN)

2.3.2. call и apply

Поведение методов call и apply отличается от стандартного поведения для функций, а именно:

boundFn.[[Call]] = function (thisValue, extraArgs):

var

boundArgs = boundFn.[[BoundArgs]],

boundThis = boundFn.[[BoundThis]],

targetFn = boundFn.[[TargetFunction]],

args = boundArgs.concat(extraArgs);

return targetFn.[[Call]](boundThis, args);

В коде видно, что thisValue не используется нигде. Таким образом подменить контекст вызова для функций полученных с помощью Function.prototype.bind с использованием call и apply — нельзя!

2.3.3. В конструкторе

В конструкторе this ссылается на новый (создаваемый) объект. Иначе говоря, контекст заданный при помощи bind, просто игнорируется. Конструктор вызывает обычный [[Call]] исходной функции.

Важно! Если в конструкторе отсутствует return this, то возвращаемое значение в общем случае неопределено и зависит от возвращаемого значения новой функции!

Разбор примера

function ClassA() {

console.log(this.x, arguments)

}

ClassA.prototype.x = "fromProtoA";

var ClassB = ClassA.bind({x : "fromBind"}, "bindArg");

// исходя из 2.3.1, эта строчка не делает ровным счетом ничего в built-in реализациях Function.prototype.bind

// Но в ручной реализации bind (например, как в MDN) эта строчка сыграет роль

ClassB.prototype = {x : "fromProtoB" };

// Тут все просто - никакой bind мы еще не использовали

// Результат: fromProtoA ["callArg"]

new ClassA("callArg");

// Исходя из 2.3.3 - this ссылается на новый объект. поскольку в bind был задан параметр bindArg, то в выводе аргументов он займет первое место

// Результат: fromProtoA ["bindArg", "callArg"]

// При ручной реализации bind результат будет другой: fromBind ["bindArg", "callArg"].

new ClassB("callArg");

// Обычный вызов bind функции, поэтому в качестве контекста будет {x : "fromBind"}, первым параметром bindArg (заданный через bind), вторым - "callArg"

// Результат: fromBind ["bindArg", "callArg"]

ClassB("callArg");

// Из пункта 2.3.2. следует, что при вызове метода call на функции, полученной с использованием bind передаваемый контекст игнорируется.

// Результат: fromBind ["bindArg", "callArg"]

ClassB.call({x: "fromCall"}, 'callArg');

Заключение

В данном посте я постарался описать основные методы привязывания контекста к функциям, а также описал некоторые особенности в работе Function.prototype.bind, при этом я старался оставить только важные детали (с моей точки зрения).

Если вы заметили ошибки/неточности или хотите что-то уточнить/добавить — напишите в ЛС, поправлю