Откуда берёт this стрелочная функция?

Question

[zlodiak]

Один и тот же код написан для обычной функции и для стрелочной:

const cat = {
	lives: 9,
  jumps: () => {
  	console.log('what?!', this)
  	this.lives--;
  }
};
console.log('cat before', cat.lives);
cat.jumps();
console.log('cat after', cat.lives);

const dog = {
	lives: 9,
  jumps: function() {
  	this.lives--;
  }
};
console.log('dog before', dog.lives);
dog.jumps();
console.log('dog after', dog.lives);

Как видите, кошка после прыжка не теряет жизнь, а собачка теряет. С собачкой всё понятно - при вызове метода перед точкой указывается контекст:
dog.jumps();
Поэтому this внутри функции указывает на контекст. Поэтому есть метод jumps() может получить доступ к свойству lives.

Но с кошкой ситуация не понятна. Помогите пожалуйста разобраться. Я понимаю происходящее так:
1. вызывается метод тоже с указанием контекста перед точкой:
cat.jumps();
2. но так как функция стрелочная, то контекст cat игнорируется(другими словами стрелочная функция не связывает свой this с контекстом cat)
3. при этом console.log('what?!', this) почему-то выводит в консоль значение window
4. мне не понятно почему именно window.
5. я правильно предполагаю, что раз вызов cat.jumps(); происходит ИЗ глобального объекта, то cat заменяется на window?

Answer 1

[Robur]

по простому:
this в стрелочной функции будет равен тому же чему равен был this в том месте где ее определили.

const x= this
setTimeout(() => console.log(this === x))  //true


class X {
  f() {
    const x=this
    setTimeout(() => console.log(x===this)) //true
   }
}

x=this
const obj = {
    y: ()=> console.log(x===this) //true
}

Ну и так далее.
Если вам не понятно что будет в x в таких примерах - читайте что такое this и как он работает, безотносительно к стрелочным функциям

Comments

[zlodiak]

Robur я тоже долго искал простое определение, но к сожалению, его нет. Вот вы говорите, что

чему равен был this в том месте где ее определили.

Это слишком неконкрентно звучит. Потому что в этом случае:

class X {
  f() {
    const x=this
    setTimeout(() => console.log(x===this)) //true
   }
}

местом, В котором определили стрелочную функцию будет f(). В результате this стрелочной будет равен this обычной функции.

А в этом случае

x=this
const obj = {
    y: ()=> console.log(x===this) //true
}

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

Однако в случае

const x= this
setTimeout(() => console.log(this === x))  //true

this стрелочной функции, которая как раз установлена ВНУТРИ объекта(глобального).

[Robur]

zlodiak, звучит конкретнее некуда. Разбирайтесь как работает this, у вас это понимание либо отсутствует, либо в корне неверное.

Подскажу еще немного:

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

1. Местом в котором я определил стрелочную функцию будет не объект.
2. this стрелочной функции и не должен быть равен this который установлен "внутри объекта"
3. нет никакого this "внутри объекта" вообще. Есть this который будет установлен как контекст вызываемой функции, и он может содержать ссылку на этот объект, а может и на что-то другое. Может вообще быть null.

Почему - поймете когда поймете что такое this и как он работает..

[shsv382]

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

[Robur]

shsv382, может быть и привязан

[shsv382]

Robur, только через bind

[Robur]

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

[shsv382]

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

Answer 2

[shsv382]

В стрелочной функции this будет lexical scoped (не знаю, как точно это перевести, но по смыслу - где определили, оттуда и this)

Comments

[zlodiak]

shsv382 я интуитивно чувствую, что выше определение правильно, но посмотрите на мой пример с объектом cat.
1. Где определена стрелочная функция?
2. В объекте cat.
3. но this стрелочной функции не ссылается на объект cat

правильно ли я понимаю, что уровень "объект" нужно исключить из lexical scope? Но сделать это трудновато потому что lexical enviroment создаётся для скрипта, блока, функции. Так вот объект, как я понимаю, это как раз блок

[shsv382]

this не относится к лексическому окружению, только к динамическому, то есть стрелочная функция берет this извне, то есть в случае с котиками он будет ссылаться на window

[shsv382]

И да, естественно, у кота не убавится жизней, потому что this.lives в этом случае будет window.lives, который равен undefined

[zlodiak]

shsv382, и всё таки до меня ещё не дошло) Скажите пожалуйста, что такое динамическое окружение, которое вы упомянули? Оно не гуглится поэтому я до сих пор не разобрался почему в случае с котиками поиск this поднимается до window

[shsv382]

Динамическое окружение: там, где вызвал функцию;
Лексическое окружение: там, где определил функцию.

У твоих jumps лексическим окружением будут объекты (песик и котик), а динамическим - объект window

[shsv382]

И вот, в продолжение предыдущего сообщения, когда ты вызываешь эти методы, то что происходит:
динамический this метода dog.jumps() привязывается к объекту, который вызывает метод, то есть this === dog, динамический this метода cat.jumps() берет внешний this по отношению к объекту, который вызывает метод, то есть this === window.
Если бы ты внутри метода dog.jumps() вызывал метод cat.jumps(), то this был бы равен dog.
Это не так просто для понимания, знаю, но что делать)))

[zlodiak]

shsv382, неа))

DEMO

[shsv382]

ну да, тупанул, ты же все равно вызывать его будешь в window

Answer 3

[Иван Клименко]

Вот и вот.

Comments

[zlodiak]

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

[Иван Клименко]

zlodiak, вот же напрямую в статье про this написано:

[kn1ght_t]

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

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

Объект никакого this не имеет

В строгом режиме this - undefined, не в строгом - window

[zlodiak]

kn1ght_t,

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

Вот это меня как раз и смущает. Моя функция cat.jumps лексически находится внутри объекта cat. Следовательно this теоретически должен указывать на этот объект. Но практически видно, что this перепрыгивает ещё на уровень вверх и оказывается равным window

[Иван Клименко]

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

[Иван Клименко]

zlodiak, вот более показательный пример:

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

const arrow = () => console.log(this);

const obj = {
    surprise: 'Ohoohoho',
    ordinary,
    arrow
};

ordinary(); // window
obj.ordinary(); // {surprise: 'Ohoohoho'}

arrow(); // window
obj.arrow(); // window

[zlodiak]

Иван Клименко, а что скажете по поводу такого примера? Ведь в нём this не равен ни window, ни undefined

class Point {  
  constructor(x, y) {
    this.x = x;
    this.y = y;
  }
  log() {
    console.log(this === myPoint);
    setTimeout(()=> {
    	console.log(this);									// point
      console.log(this === myPoint);      // => true
      console.log(this.x + ':' + this.y); // => '95:165'
    }, 1000);
  }
}
var myPoint = new Point(95, 165);  
myPoint.log();

[Иван Клименко]

zlodiak, дать вам ссылку на статью про классы и this в них?)

В конструкторе this ведёт себя немного отлично от поведения в обычной функции.

Экземпляр класса после создания -- это обычный объект. А дальше смотрите мой пример выше.

[Иван Клименко]

zlodiak, вот ещё один показательный пример:

class Point {  
    constructor(x, y) {
        this.x = x;
        this.y = y;
    }

    log() {
        console.log(this);
        setTimeout(() => {
    	    console.log(this);
        }, 1000);
    }
}

const point = new Point(95, 165);
const log = point.log;
  
point.log();
log();