81

Объясните, пожалуйста, почему после присвоения var f = obj1.f теряется контекст вызова и выводится undefined?

var obj1 = {

  x: 3,

  f: function() {
    return (this.x);
  }
};

alert(obj1.f());
var f = obj1.f;
alert(f());

24
  • 4
    Встречный вопрос, а почему вы решили, что контекст вызова должен сохраниться? Commented 14 июн. 2016 в 18:12
  • 7
    Потому что функции в javascript (в отличие от некоторых других языков) существуют сами по себе, вне привязки к объекту. В первом случае Вы вызываете функцию как метод объекта. Во втором случае, достаете функцию из объекта, а после вызываете саму по себе. ru.wikipedia.org/wiki/… Commented 14 июн. 2016 в 18:13
  • 7
    Коллеги, вопрос валидный, может быть, кто-нибудь даст развёрнутый ответ? Было бы полезно тем, кто не спец в JS (например, мне).
    – VladD
    Commented 14 июн. 2016 в 18:46
  • 3
    @VladD вопрос валидный, но ответ на него есть в каждом первом (ну может в каждом втором) учебнике по JS.
    – Alexey Ten
    Commented 15 июн. 2016 в 7:35
  • 6
    @AlexeyTen, процентов 80 вопросов по js которые появляются здесь (и на других сайтах) есть в каждом втором учебнике по js. И все равно будут появляться. Не отвечать на них чтоли? Commented 15 июн. 2016 в 7:39

6 ответов 6

111

Значение this внутри функции зависит от того как вызывается функция и как создана функция.

Как вызывается?

Вызвать функцию можно следующими способами:

Вызов функции

Если есть обычная функция, в большинстве случаев значением this будет глобальный объект (для браузера window). При использовании "strict mode" - undefined.

var f = function (){
  console.log('common:',this.toString());
};
f();

var fStrict = function (){
  "use strict";
  console.log('strict:', this);
};
fStrict();

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

Например, при передаче функции в .addEventListener, значением this будет элемент, которому добавлен обработчик.


Вызов метода

Метод - это функция находящаяся в объекте.

var Obj = {toString:function(){ return "[object Obj]";}};
Obj.f = function (){
  console.log('common:',this.toString());
};
Obj.f();

Obj.fStrict = function (){
  "use strict";
  console.log('strict:', this.toString());
};
Obj.fStrict();

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


Вызов конструктора

Функцию можно вызывать в качестве конструктора, для этого перед вызовом нужно использовать оператор new: new Foo()

function Foo(name){
  this.name = name;
}

var foo = new Foo('foo');
console.log(foo);

При вызове функции в качестве конструктора создается новый объект, и значение this ссылается на это созданный объект.

Особенность: при использовании наследования и классов из ES2015 обращение к this до вызова super в зависимости от браузера вызовет исключение о попытке обратиться к необъявленной/неинициализированной переменной.

class A {}
class B extends A {
  constructor(){
    console.log(this);
  }
}
var b = new B();


Вызов с помощью методов call и apply

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

var f = function (){
  console.log('common:',this);
};
f.call({o:'object'});

var fStrict = function (){
  "use strict";
  console.log('strict:', this);
};
fStrict.apply({o:'object'});

В библиотеках вроде jQuery с помощью этих функций вызываются коллбэки передаваемые в различные функции, например: each, map, on и другие. В качестве this в этом случае устанавливается текущий элемент коллекции, либо html-элемент.


Вызов в качестве коллбэков в функциях обработки массивов

Некоторые встроенные функции для объекта типа Array позволяют так же напрямую указать значение this для передаваемого коллбэка:

var specialMap = {'b':'specialB','d':'specialD'}
var source= ['a','b','c','d','e'];
var mapped = source.map(function(el){
  return this[el] || ('common-'+el);
},specialMap);

console.log('source:',source);
console.log('mapped:',mapped);

Как создается?

Объявление функции или функционального выражения

Обычное объявление функции:

function A(){}

var a = function (){};

при обычном объявлении значение this определяется при вызове способами описанными выше.


Создание функции с помощью bind

Функция bind возвращает новую привязанную функцию. Значение this внутри созданной функции всегда то, которое передали при вызове bind.

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

Важная особенность: в НЕ strict mode при передаче в качестве параметра this значений null и undefined - этот параметр будет проигнорирован и this будет установлен в глобальный объект.

function A(){console.log(typeof this,'is window', this === window);}
console.log('execute with null');
A.bind(null)();
console.log('execute with undefined');
A.bind(undefined)();

function A1(){'use strict'; console.log(typeof this, this);}
console.log('execute with null');
A1.bind(null)();
console.log('execute with undefined');
A1.bind(undefined)();

Важная особенность: значение this у созданной функции нельзя переопределить используя функции call и apply описанные выше.

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

var B = A.bind({o:'object'});
console.log('execute binded');
B();
console.log('execute with call');
B.call({another: 'some new object'});

console.log('execute as constructor');
new B();


Стрелочные функции

Стрелочные функции появились в ES2015 и при создании привязываются к текущему значению this.

После создания значение this нельзя поменять указанными выше способами.

Кроме того стрелочную функцию нельзя использовать в качестве конструктора.

function A(){
  this.t = (place)=>console.log(place,this);
}  

var a = new A()
a.t('method:');

var tt = a.t;
tt('free function execute:');

tt.call({o:'object'},'using call function');

new tt('constructor');


на основе ответов:
- How does the “this” keyword work?
- How does “this” keyword work within a JavaScript object literal?

11
  • 3
    Тогда ты ещё не ленился:=:) (+) Commented 2 мая 2019 в 13:36
  • 2
    @Alexandr_TT, тогда еще не было вопроса, на который можно сослаться как на дубликат :)
    – Grundy
    Commented 2 мая 2019 в 13:37
  • 1
    То что-то не то про null написал: i.sstatic.net/g7YAZ.png
    – Qwertiy
    Commented 16 янв. 2020 в 19:10
  • @Qwertiy, ага, в es5 или 6 поменялось поведение :) наверное уберу этот абзац
    – Grundy
    Commented 16 янв. 2020 в 19:54
  • @Qwertiy, не, все правильно, обновил ответ :-) в не strict mode - будет глобальный объект, в strict mode - что передали, то и получили. В примере это как раз заметно :)
    – Grundy
    Commented 16 янв. 2020 в 20:06
41

Вкратце: в первом случае Вы вызываете функцию как метод объекта, во втором - берете функцию и саму по себе.

Более многословно:
Функции в javascript, в отличие от некоторых других популярных языков, являются так называемыми объектами первого класса. То есть они существуют и имеют смысл сами по себе, без привязки к объекту.

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

Вызов функции сразу через точку myObject.myFunction() это просто сокращенный способ задания this сразу, этакий сахар. Когда Вы вызываете через точку на самом деле происходит примерно следующее:

var func = myObject.myFunction; //Получаем функцию-свойство объекта myObject
func.call(myObject); // Вызываем эту функцию с нужным контекстом.

Чтобы создать функцию с привязанным контекстом, например для передачи в обработчик, обычно используют bind, например так:

var func = myObject.myFunction.bind(myObject);
0
29

Функция вызывается в контексте объета НЕ потому что она создана внутри объекта. Она вызывается в контексте объекта, потому что она вызывается как метод obj.func()

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

Одна и та же функция может быть вызвана как методы разных объектов.

function foo() {
  blah blah
}

x = {}; x.foo=foo; x.foo() //тут this будет установлен на объект х
x2 = {}; x2.foo=foo; x2.foo() //тут this будет установлен на объект х2
foo(); //тут this не будет установлен

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

18

В дополнение к другим ответам.

Если вы пишите на TypeScript, то можно воспользоваться вот таким декоратором:

function bound(target, propertyKey: PropertyKey, descriptor: PropertyDescriptor): PropertyDescriptor {
    var value = descriptor.value;

    return {
        configurable: descriptor.configurable,
        enumerable: descriptor.enumerable,

        get() { return value.bind(this); }
    }
}

Когда декораторы появятся в Javascript, можно будет написать его и там При использовании Babel так можно сделать и в Javascript:

function bound(target, propertyKey, descriptor) {
    var value = descriptor.value;

    return {
        configurable: descriptor.configurable,
        enumerable: descriptor.enumerable,

        get() { return value.bind(this); }
    }
}

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

class Foo {
    private readonly _baz;

    constructor(baz) {
        this._baz = baz;
    }

    @bound bar() {
         console.log(this._baz);
    }
}

var bar = new Foo(42).bar;
bar(); // 42

Если принципиально чтобы последовательные обращения к свойству выдавали одинаковые значения (например, дабы избежать избыточных рендеров в React) - придется написать чуть более сложный код:

var bfmc = Symbol("boundFunctionsMemoizedCache");

function bound(target, propertyKey: PropertyKey, descriptor: PropertyDescriptor): PropertyDescriptor {
    return {
        enumerable: descriptor.enumerable,

        get() {
            if (!this.hasOwnProperty(bfmc))
                this[bfmc] = {};

            if (this[bfmc].hasOwnProperty(propertyKey))
                return this[bfmc][propertyKey];

            return this[bfmc][propertyKey] = descriptor.value.bind(this);
        }
    }
}

В принципе, можно написать и чуть проще (например, создавать отдельный символ на каждый вызов bound или вообще переопределять свойство propertyKey) - но я не уверен что такой код сможет быть правильно оптимизирован и не наплодит кучу скрытых классов где не надо. Буду рад услышать замечания по этому поводу от того, кто уже сталкивался с оптимизациями Javascript под конкретные браузеры.


Замечание. Этот ответ показывает устаревшую старую версию декораторов, которая никогда не войдет в стандарт.

8
  • var a = new Foo(7); console.log(a.bar === a.bar); - будет false. Можно улучшить так, чтобы было true?
    – Qwertiy
    Commented 22 авг. 2017 в 13:21
  • В реакте PureComponent будет пересчитываться из-за таких изменений, а это плохо. Да и вообще, ну логично же, что должна возвращаться ссылка на одну и ту же функцию, а не создаваться клон бинда на каждом вызове - вдруг она у меня в цикле 1000000 раз вызывается.
    – Qwertiy
    Commented 22 авг. 2017 в 13:28
  • @Qwertiy замечание принимается. Дописал ответ. Commented 22 авг. 2017 в 13:45
  • 1
    @VasyaShmarovoz обратите внимание, на дополнение Commented 22 авг. 2017 в 13:49
  • @PavelMayorov, а там нельзя как-нибудь value присобачить вместо get?
    – Qwertiy
    Commented 22 авг. 2017 в 13:57
2

Когда вы создаете обьект - вы по сути создаете его контекст, this внутри обьекта ссылается на контекст обьекта. После присвоения данной функции обычной переменной - вы сами же вырываете функцию из её контекста, тем самым привязка this внутри данной функции теряется, под this теперь имеется ввиду обьект window. Тоесть обращаясь к this.x теперь на самом деле вы обращаетесь к window.x который и есть undefined.

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

1
  • Самый короткий и понятный ответ .красава .но я напишу ещё более понятнее на свой взгляд )
    – Gotha
    Commented 4 июл. в 22:01
0

Попробую максимально коротко.

This - откуда запускается функция
Все лежит в window

Когда делаем obj.f() -запускаем f в obj который уже в window .
window.obj.f() получается.

Когда делаем var ff = obj.f мы берём ТОЛЬКО f отдельно от obj и выходит window.ff = obj.f

Когда потом делаем ff() мы по-сути получили window.f()

Ведь мы перенесли только функцию из obj в window Теперь this у f() = window.
А в window нету x поэтому undefined
Как-то так.
Но при использовании "strict mode" -поняв что this=window ставится this=undefined чтобы не поломать глобальную область и не устроить Хаус.

window тоже обычный объект который мы всегда указываем .просто не явно .он же и является глобальной областью видимости о которой все говорят. А ещё он лежит сам в себе позволяя проверять наличие глобальных переменных)

Все остальные сильно замудрили с ответами. Как по мне только Alex Zaharchuk нормально рассказал после которого я понял что происходит. Остальные тоже много чего полезного сказали и нужного но от этого сильно расплывчато стало.

2
  • 1
    Как написано в соседних ответах, в строгом режиме this будет undefined, так что уже на этом ваш ответ можно считать неверным
    – andreymal
    Commented 4 июл. в 22:31
  • @andreymal оу упустил момент спасибо.важный момент .но ответ также считаю верным .просто .это защита от путаницы и ошибок .он ее просто вырезал дабы не устроить Хаус .подправлю ответ.спасибо
    – Gotha
    Commented 4 июл. в 22:38

Ваш ответ

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

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.