У меня есть функция конструктора, которая регистрирует обработчик событий:

function MyConstructor(data, transport) {
    this.data = data;
    transport.on('data', function () {
        alert(this.data);
    });
}

// Mock transport object
var transport = {
    on: function(event, callback) {
        setTimeout(callback, 1000);
    }
};

// called as
var obj = new MyConstructor('foo', transport);

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

Я также попытался использовать объектный метод вместо анонимной функции:

function MyConstructor(data, transport) {
    this.data = data;
    transport.on('data', this.alert);
}

MyConstructor.prototype.alert = function() {
    alert(this.name);
};

но это показывает те же проблемы.

Как я могу получить доступ к нужному объекту?

Что вы должны знать о this

this(он же «контекст») - это специальное ключевое слово внутри каждой функции, и его значение зависит только от того, как была вызвана функция, а не от того, как / когда / где она была определена. На него не влияют лексические области, как и другие переменные (кроме функций со стрелками, см. Ниже). Вот некоторые примеры:

function foo() {
    console.log(this);
}

// normal function call
foo(); // `this` will refer to `window`

// as object method
var obj = {bar: foo};
obj.bar(); // `this` will refer to `obj`

// as constructor function
new foo(); // `this` will refer to an object that inherits from `foo.prototype`

Чтобы узнать больше this, взгляните на документацию MDN .

Как правильно сослаться на this

Не использовать this

Вы на самом деле не хотите получать доступ, thisв частности, к объекту, на который он ссылается . Вот почему простое решение - просто создать новую переменную, которая также ссылается на этот объект. Переменная может иметь любое имя, но наиболее распространенными являются selfи that.

function MyConstructor(data, transport) {
    this.data = data;
    var self = this;
    transport.on('data', function() {
        alert(self.data);
    });
}

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

Явный набор thisобратного вызова - часть 1

Может показаться, что вы не контролируете значение, thisпотому что его значение устанавливается автоматически, но на самом деле это не так.

Каждая функция имеет метод .bind ^[docs] , который возвращает новую функцию с thisпривязкой к значению. Функция действует точно так же, как и та, которую вы вызывали .bind, только то, что thisбыло установлено вами. Независимо от того, как или когда эта функция вызывается, thisвсегда будет ссылаться на переданное значение.

function MyConstructor(data, transport) {
    this.data = data;
    var boundFunction = (function() { // parenthesis are not necessary
        alert(this.data);             // but might improve readability
    }).bind(this); // <- here we are calling `.bind()` 
    transport.on('data', boundFunction);
}

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

Примечание. При связывании контекста для jQuery используйте вместо него jQuery.proxy ^[docs] . Причина этого заключается в том, что вам не нужно сохранять ссылку на функцию при отмене привязки обратного вызова события. JQuery обрабатывает это внутренне.

ECMAScript 6: использовать функции стрелок

ECMAScript 6 представляет функции стрелок , которые можно рассматривать как лямбда-функции. У них нет собственной thisпривязки. Вместо этого thisищется в области видимости, как обычная переменная. Это означает, что вам не нужно звонить .bind. Это не единственное специальное поведение, которое они имеют, пожалуйста, обратитесь к документации MDN для получения дополнительной информации.

function MyConstructor(data, transport) {
    this.data = data;
    transport.on('data', () => alert(this.data));
}

Набор thisобзвона - часть 2

Некоторые функции / методы, которые принимают обратные вызовы, также принимают значение, на которое thisдолжен ссылаться обратный вызов . По сути, это то же самое, что связывать его самостоятельно, но функция / метод делает это за вас. Array#map ^{[Документы]} такой метод. Его подпись:

array.map(callback[, thisArg])

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

var arr = [1, 2, 3];
var obj = {multiplier: 42};

var new_arr = arr.map(function(v) {
    return v * this.multiplier;
}, obj); // <- here we are passing `obj` as second argument

Примечание. Вопрос о том, можете ли вы передать значение, thisобычно упоминается в документации к этой функции / методу. Например, метод jQuery ^[docs]$.ajax описывает параметр под названием context:

Этот объект станет контекстом всех обратных вызовов Ajax.

Распространенная проблема: использование объектных методов в качестве обратных вызовов / обработчиков событий

Другое распространенное проявление этой проблемы - когда объектный метод используется в качестве обработчика обратного вызова / события. Функции являются первоклассными гражданами в JavaScript, а термин «метод» - это просто разговорный термин для функции, которая является значением свойства объекта. Но эта функция не имеет конкретной ссылки на свой «содержащий» объект.

Рассмотрим следующий пример:

function Foo() {
    this.data = 42,
    document.body.onclick = this.method;
}

Foo.prototype.method = function() {
    console.log(this.data);
};

Функция this.methodназначается в качестве обработчика события щелчка, но если document.bodyщелкнуть, зарегистрированное значение будет undefined, поскольку внутри обработчика события thisссылается на document.body, а не на экземпляр Foo.
Как уже упоминалось в начале, то , что thisотносится к зависит от того, как функция называется , не так, как она определена .
Если бы код был похож на следующий, может быть более очевидно, что функция не имеет неявной ссылки на объект:

function method() {
    console.log(this.data);
}


function Foo() {
    this.data = 42,
    document.body.onclick = this.method;
}

Foo.prototype.method = method;

Решение такое же, как упомянуто выше: если доступно, используйте .bindдля явного связывания thisс конкретным значением

document.body.onclick = this.method.bind(this);

или явно вызвать функцию как «метод» объекта, используя анонимную функцию в качестве обработчика обратного вызова / события, и назначить объект ( this) другой переменной:

var self = this;
document.body.onclick = function() {
    self.method();
};

или используйте функцию стрелки:

document.body.onclick = () => this.method();

Вот несколько способов получить доступ к родительскому контексту внутри дочернего контекста:

1. Вы можете использовать bind()функцию.
2. Сохраните ссылку на context / this внутри другой переменной (см. Пример ниже).
3. Используйте функции ES6 Arrow .
4. Изменить код / ​​дизайн функции / архитектуру - для этого вы должны иметь команду над шаблонами проектирования в javascript.

1. Используйте bind()функцию

function MyConstructor(data, transport) {
    this.data = data;
    transport.on('data', ( function () {
        alert(this.data);
    }).bind(this) );
}
// Mock transport object
var transport = {
    on: function(event, callback) {
        setTimeout(callback, 1000);
    }
};
// called as
var obj = new MyConstructor('foo', transport);

Если вы используете underscore.js- http://underscorejs.org/#bind

transport.on('data', _.bind(function () {
    alert(this.data);
}, this));

2 Сохраните ссылку на context / this внутри другой переменной

function MyConstructor(data, transport) {
  var self = this;
  this.data = data;
  transport.on('data', function() {
    alert(self.data);
  });
}

3 Стрелка

function MyConstructor(data, transport) {
  this.data = data;
  transport.on('data', () => {
    alert(this.data);
  });
}

Это все в "волшебном" синтаксисе вызова метода:

object.property();

Когда вы получаете свойство от объекта и вызываете его за один раз, объект будет контекстом для метода. Если вы вызываете тот же метод, но в отдельных шагах, вместо этого контекст является глобальной областью (окном):

var f = object.property;
f();

Когда вы получаете ссылку на метод, он больше не привязывается к объекту, это просто ссылка на простую функцию. То же самое происходит, когда вы получаете ссылку для использования в качестве обратного вызова:

this.saveNextLevelData(this.setAll);

Вот где вы бы связали контекст с функцией:

this.saveNextLevelData(this.setAll.bind(this));

Если вы используете jQuery, вы должны использовать $.proxyвместо этого метод, так как bindон поддерживается не во всех браузерах:

this.saveNextLevelData($.proxy(this.setAll, this));

Беда с "контекстом"

Термин «контекст» иногда используется для обозначения объекта, на который ссылается это . Его использование является неуместным , поскольку он не соответствует ни семантически , ни технически с ECMAScript - х это .

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

Это показано в разделе 10.4.2 ECMA-262 :

Установите для ThisBinding то же значение, что и для ThisBinding вызывающего контекста выполнения.

который ясно указывает на то, что это является частью контекста исполнения.

Контекст выполнения предоставляет окружающую информацию, которая добавляет смысл к исполняемому коду. Он включает в себя гораздо больше информации, чем просто thisBinding .

Таким образом, значение этого не «контекст», это просто одна часть контекста исполнения. По сути, это локальная переменная, которая может быть установлена ​​при вызове любого объекта и в строгом режиме для любого значения вообще.

Вы должны знать об этом ключевом слове.

На мой взгляд, вы можете реализовать «это» тремя способами (Self / Arrow function / Bind Method)

Ключевое слово this функции ведет себя немного иначе в JavaScript по сравнению с другими языками.

Он также имеет некоторые различия между строгим режимом и не строгим режимом.

В большинстве случаев значение этого определяется тем, как вызывается функция.

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

ES5 представил метод bind () для установки значения функции this независимо от того, как она вызывается,

и ES2015 представили функции стрелок, которые не обеспечивают собственную привязку this (она сохраняет значение this лексического контекста).

Метод 1: Self - Self используется для сохранения ссылки на оригинал, даже если контекст меняется. Эта техника часто используется в обработчиках событий (особенно в замыканиях).

Ссылка : https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this

function MyConstructor(data, transport) {
    this.data = data;
    var self = this;
    transport.on('data', function () {
        alert(self.data);
    });
}

Метод 2 : функция стрелки - выражение функции стрелки является синтаксически компактной альтернативой регулярному выражению функции,

хотя без привязок к ключевым словам this, arguments, super или new.target.

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

Ссылка : https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions

  function MyConstructor(data, transport) {
    this.data = data;
    transport.on('data',()=> {
        alert(this.data);
    });
}

Метод 3 : Bind - метод bind () создает новую функцию, которая,

при вызове имеет ключевое слово this установленное значение,

с заданной последовательностью аргументов, предшествующей любому, предоставленному при вызове новой функции.

Ссылка: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_objects/Function/bind

  function MyConstructor(data, transport) {
    this.data = data;
    transport.on('data',(function() {
        alert(this.data);
    }).bind(this);

Во-первых, вам необходимо иметь четкое понимание scopeи поведение thisключевых слов в контексте scope.

this& scope:

there are two types of scope in javascript. They are :

   1) Global Scope

   2) Function Scope

короче говоря, глобальная область действия относится к объекту окна. Переменные, объявленные в глобальной области видимости, доступны из любого места. С другой стороны, область действия функции находится внутри функции. Переменная, объявленная внутри функции, обычно не доступна из внешнего мира. thisКлючевое слово в глобальной области действия относится к объекту окна. thisВнутренняя функция также ссылается на объект окна. Так thisчто всегда будем ссылаться на окно, пока мы не найдем способ манипулировать, thisчтобы указать контекст по нашему выбору.

--------------------------------------------------------------------------------
-                                                                              -
-   Global Scope                                                               -
-   ( globally "this" refers to window object)                                 -     
-                                                                              -
-         function outer_function(callback){                                   -
-                                                                              -
-               // outer function scope                                        -
-               // inside outer function"this" keyword refers to window object -                                                                              -
-              callback() // "this" inside callback also refers window object  -

-         }                                                                    -
-                                                                              -
-         function callback_function(){                                        -
-                                                                              -
-                //  function to be passed as callback                         -
-                                                                              -
-                // here "THIS" refers to window object also                   -
-                                                                              -
-         }                                                                    -
-                                                                              -
-         outer_function(callback_function)                                    -
-         // invoke with callback                                              -
--------------------------------------------------------------------------------

Различные способы манипулирования this внутри функций обратного вызова:

Здесь у меня есть функция конструктора Person. Он имеет свойство nameи четыре метода , называемого sayNameVersion1, sayNameVersion2,sayNameVersion3 , sayNameVersion4. У всех четырех из них есть одна конкретная задача. Принять обратный вызов и вызвать его. Обратный вызов имеет специальную задачу, которая заключается в регистрации свойства name экземпляра функции конструктора Person.

function Person(name){

    this.name = name

    this.sayNameVersion1 = function(callback){
        callback.bind(this)()
    }
    this.sayNameVersion2 = function(callback){
        callback()
    }

    this.sayNameVersion3 = function(callback){
        callback.call(this)
    }

    this.sayNameVersion4 = function(callback){
        callback.apply(this)
    }

}

function niceCallback(){

    // function to be used as callback

    var parentObject = this

    console.log(parentObject)

}

Теперь давайте создадим экземпляр из конструктора person и вызовем разные версии метода sayNameVersionX(X относится к 1,2,3,4), niceCallbackчтобы увидеть, сколько способов мы можем манипулировать thisвнутренним обратным вызовом для обращения кperson экземпляру.

var p1 = new Person('zami') // create an instance of Person constructor

связать:

Привязка заключается в создании новой функции с установленным значением thisключевого слова.

sayNameVersion1и sayNameVersion2использовать связывание для управления thisфункцией обратного вызова.

this.sayNameVersion1 = function(callback){
    callback.bind(this)()
}
this.sayNameVersion2 = function(callback){
    callback()
}

первый связывается thisс обратным вызовом внутри самого метода. А для второго передается обратный вызов с привязанным к нему объектом.

p1.sayNameVersion1(niceCallback) // pass simply the callback and bind happens inside the sayNameVersion1 method

p1.sayNameVersion2(niceCallback.bind(p1)) // uses bind before passing callback

вызов :

first argumentОт callметода используется как thisвнутри функции , которая вызывается сcall прилагается к нему.

sayNameVersion3используется callдля манипулирования thisссылкой на объект person, который мы создали, вместо объекта window.

this.sayNameVersion3 = function(callback){
    callback.call(this)
}

и это называется следующим образом:

p1.sayNameVersion3(niceCallback)

применять :

Аналогично call, первый аргумент applyссылки относится к объекту, который будет обозначенthis ключевым словом.

sayNameVersion4использует applyдля манипулирования thisссылаться на объект человека

this.sayNameVersion4 = function(callback){
    callback.apply(this)
}

и это называется следующим образом. Просто обратный вызов передается,

p1.sayNameVersion4(niceCallback)

Мы не можем связать это с тем setTimeout(), как это всегда выполняется с глобальным объектом (Window) , если вы хотите получить доступ к thisконтексту в функции обратного вызова, то, используя bind()функцию обратного вызова, мы можем добиться так:

setTimeout(function(){
    this.methodName();
}.bind(this), 2000);

Вопрос вращается вокруг того, как thisключевое слово ведет себя в JavaScript. thisведет себя по-другому, как показано ниже,

1. Значение this обычно определяется контекстом выполнения функции.
2. В глобальной области действия thisссылается на глобальный объект ( windowобъект).
3. Если строгий режим включен для любой функции, то значение thisбудет таким же, undefinedкак в строгом режиме, глобальный объект ссылается undefinedвместоwindow объекта.
4. Объект, который стоит перед точкой, является тем, к чему будет привязано ключевое слово this.
5. Мы можем установить значение этого явно с call(),bind() иapply()
6. Когда new ключевое слово (конструктор), оно привязывается к создаваемому новому объекту.
7. Функции со стрелками не связываются this - вместо этого они thisсвязаны лексически (т.е. основаны на исходном контексте)

Как подсказывает большинство ответов, мы можем использовать функцию Arrow или bind()Method или Self var. Я бы процитировал пункт о лямбдах (функция стрелки) из руководства по стилю Google JavaScript

Предпочитайте использовать функции стрелок над f.bind (это), и особенно над goog.bind (f, это). Избегайте писать const self = this. Функции стрелок особенно полезны для обратных вызовов, которые иногда передают неожиданные дополнительные аргументы.

Google явно рекомендует использовать лямбды, а не связывать или const self = this

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

function MyConstructor(data, transport) {
  this.data = data;
  transport.on('data', () => {
    alert(this.data);
  });
}

Ссылки:

1. https://medium.com/tech-tajawal/javascript-this-4-rules-7354abdb274c
2. стрелка-функции-против-безвыходном

В настоящее время возможен другой подход, если в коде используются классы.

С поддержкой полей класса это можно сделать следующим образом:

class someView {
    onSomeInputKeyUp = (event) => {
        console.log(this); // this refers to correct value
    // ....
    someInitMethod() {
        //...
        someInput.addEventListener('input', this.onSomeInputKeyUp)

Наверняка под капотом все старые добрые функции стрелок связывают контекст, но в этой форме это выглядит намного более ясно, чем явное связывание.

Поскольку это предложение этапа 3, вам понадобится babel и соответствующий плагин babel для его обработки, как сейчас (08/2018).

Другим подходом, который является стандартным способом связывания DOM2this внутри прослушивателя событий, позволяющим всегда удалять прослушиватель (среди других преимуществ), является handleEvent(evt)метод из EventListenerинтерфейса:

var obj = {
  handleEvent(e) {
    // always true
    console.log(this === obj);
  }
};

document.body.addEventListener('click', obj);

Подробную информацию об использовании handleEventможно найти здесь: https://medium.com/@WebReflection/dom-handleevent-a-cross-platform-standard-since-year-2000-5bf17287fd38

this в JS:

Значение thisв JS на 100% определяется тем, как вызывается функция, а не тем, как она определена. Мы можем относительно легко найти значение thisпо «правилу слева от точки» :

1. Когда функция создается с помощью ключевого слова function, значение this является объект слева от точки вызываемой функции
2. Если от точки не осталось объекта, то значение thisвнутри функции часто является глобальным объектом ( globalв узле, windowв браузере). Я бы не рекомендовал использовать thisздесь ключевое слово, потому что оно менее явное, чем что-то вродеwindow !
3. Существуют определенные конструкции, такие как функции стрелок и функции, созданные с использованием Function.prototype.bind()функции, которая может фиксировать значение this. Это исключения из правила, но они действительно помогают установить значение this.

Пример в nodeJS

module.exports.data = 'module data';
// This outside a function in node refers to module.exports object
console.log(this);

const obj1 = {
    data: "obj1 data",
    met1: function () {
        console.log(this.data);
    },
    met2: () => {
        console.log(this.data);
    },
};

const obj2 = {
    data: "obj2 data",
    test1: function () {
        console.log(this.data);
    },
    test2: function () {
        console.log(this.data);
    }.bind(obj1),
    test3: obj1.met1,
    test4: obj1.met2,
};

obj2.test1();
obj2.test2();
obj2.test3();
obj2.test4();
obj1.met1.call(obj2);

Вывод:

Позвольте мне провести вас через выходы 1 на 1 (игнорируя первый журнал, начиная со второго):

1. thisэто obj2из-за левой части правила точки, мы можем видеть, как test1называется obj2.test1();. obj2слева от точки и, следовательно, thisзначения.
2. Несмотря на то, obj2что слева от точки, test2связано с obj1помощью bind()метода. Так что thisценность есть obj1.
3. obj2находится слева от точки из функции , которая называется: obj2.test3(). Поэтому obj2будет ценность this.
4. В этом случае: obj2.test4() obj2слева от точки. Однако функция стрелки не имеет собственной thisпривязки. Поэтому он будет привязан к thisзначению внешнего объема, который являетсяmodule.exports объектом, который был зарегистрирован в начале.
5. Мы также можем указать значение thisс помощью callфункции. Здесь мы можем передать желаемое thisзначение в качестве аргумента, что obj2в данном случае.