Стрелочная функция и контекст?

Question

[Ruslan]

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

class Car{
    constructor() {
        this.name = "BMW"
    }
    showname = () => {
        console.log(this.name);
    }
}
let car = new Car();
car.showname();

Comments

[Lynn «Кофеман»]

https://learn.javascript.ru/arrow-functions-basics

[Lynn «Кофеман»]

https://learn.javascript.ru/class#svoystva-klassov

[Роман Дворянов]

Так контекст тут не стрелочной же функции, а класса Car

[Роман]

Роман Дворянов, в том и вопрос, почему берется контекст от объекта класса Car а не от самого класса Сar? )))

Другими словами почему стрелочная функция ведет себя как

в этом примере

class Car{
    constructor() {
        this.name = "BMW"
    }
    showname(){
        console.log(this.name);
    }
}
let car = new Car();
car.showname();  // BMW

а нет так как

в этом примере

class Car{
    constructor() {
        this.name = "BMW"
    }
    showname(){
        console.log(Car.name);
    }
}
let car = new Car();
car.showname(); // Car )))))

[Роман Дворянов]

Роман, кмк потому что переменная car экземпляр объекта Car, а не объект Car

[Lynn «Кофеман»]

Роман, потому что в спеке сказано что свойства классов инициализируются в контексте экземпляра

А ваш второй пример вообще не о том

[Роман]

Роман Дворянов, но контекст стрелочной функции не зависит от того, после какого объекта она вызывается через точку, а в примере автора вопроса выходит что зависит)

[Роман Дворянов]

Роман, контекст стрелочной функции? У стрелочных функций нет собственного контекста

[Роман]

Lynn «Кофеман», та я в курсе, но чисто технически объявление типа

showname = () => {
        console.log(this.name);
    }

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

[Роман]

контекст стрелочной функции? У стрелочных функций нет собственного контекста

Роман Дворянов, это не совсем верная интерпретация, и именно она сбивает тек кто впервые сталкивается с подобным поведением стрелочных функций. Правильнее будет сказать так

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

Роман Дворянов, Lynn «Кофеман», я хорошо понимаю как это работает, но своим комментарием хотел лишь объяснить то, что по моему мнению хотел спросить автор вопроса. Надеюсь следующий пример лучше слов объяснить то, что я имел ввиду:

this.name = 123;
const test = ()=>{
  console.log(this.name, typeof this.name)
}

const obj = {
  name: 456,
  test: test,
  innerTest1: ()=>{
  	console.log(this.name, typeof this.name)
  },
  innerTest2: function (){
  	console.log(this.name, typeof this.name)
  },
  innerTest3: test
}
test() // 123 string
obj.test() // 123 string
obj.innerTest1() // 123 string
obj.innerTest2() // 456 'number'
obj.innerTest3() // 123 string

PS: но и у меня тут уже возник собственный вопрос, почему 123 - строка, а 456 - число? ))))
или это jsfiddle уже намутил с враперами и гетерами/сетерами?
https://jsfiddle.net/20epqvwm/3/

[Роман Дворянов]

Роман, а, так вы б сразу сказали, что это дополнительные ребусы))

[Роман]

Роман Дворянов, ну возможно я не очень корректно сформулировал свой первый комментарий)))

[Роман]

Lynn «Кофеман», Роман Дворянов, ну и вот еще один показательный и

забавный ребус

this.name = 111;
const test = ()=>{
  console.log(this.name)
}

function Func(){
		this.name = 222
    this.test1 = test;
    this.test2 = ()=>{
    	console.log(this.name)
    };
    this.test3 = function(){
    	console.log(this.name)
    };
}
Func.prototype.test4 = test;
Func.prototype.test5 = function(){
	console.log(this.name)
}
Func.prototype.test6 = ()=>{
	console.log(this.name)
}


class Class{
	constructor(){
		this.name = 333
    this.test1 = test;
    this.test2 = ()=>{
    	console.log(this.name)
    };
    this.test3 = function(){
    	console.log(this.name)
    };
  }
  test4(){
    	console.log(this.name)
  };
  test5 = function(){
    	console.log(this.name)
  };
  test6 = ()=>{
    	console.log(this.name)
  };
  test7 = test
}


const obj1 = new Func();
const obj2 = new Class();
test();	// 111
obj1.test1();	// 111
obj1.test2();	// 222
obj1.test3();	// 222
obj1.test4();	// 111
obj1.test5();	// 222
obj1.test6();	// 111

obj2.test1();	// 111
obj2.test2();	// 333
obj2.test3();	// 333
obj2.test4();	// 333
obj2.test5();	// 333
obj2.test6();	// 333
obj2.test7();	// 111

особенно в моментах разницы срабатывания методов obj2.test1(),obj2.test7() и методов obj2.test2(), obj2.test6(), ведь у них по идее должен быть один и тот же внешний контекст)))

Lynn «Кофеман», это как раз к вопросу о том, что является методом класса а что нет. Вы скажете, что контекст прибивается к стрелочной фанке в момент ее создания, но в примере автора, в момент создания его метода, внешним контекстом по логике вещей должен быть именно контекст класса а не контекст объекта класса)

ЗЫ: я знаю что ответ на этот вопрос как раз и содержится в спецификациях классов, которые определяют синтаксис обращения к контексту класса через имя класса, а все остальное получает контекст объекта класса за исключением контекста стрелочных функций, созданных вне класса.

Answer 1

[Aetae]

В моем понимании стрелочная функция берет контекст при объявлении

Не совсем при объявлении, скорее при создании.(хотя это одно и тоже, но так меньше непонимания, имхо)
Соответственно при создании нового экземпляра класса объявляется(создаётся) новая стрелочная функция в контексте этого экземпляра. По сути это просто свойство, уникальное для каждого экземпляра, в отличие от метода, который один для всех.

class Car{
    constructor() {
        this.name = "BMW"
    }
    showname = () => {
        console.log(this.name);
    }
}
let { showname } = new Car();
let obj = {
  name: 'random',
  showname
}
obj.showname() // всё равно BMW

Вообще все свойства в классе объявляются(создаются) в контексте экземпляра:

class Car {
    storedThis = this
}
const car = new Car();
const { storedThis } = car;
car === storedThis; // true

После же того как они были созданы они живут обычной жизнью.

Answer 2

[Mikhail Osher]

Это babel-plugin-proposal-class-properties.
Дописывает свойства в конструктор.

class Foo {
  foo = 5;
  
  bar = () => {
  	console.log(this.foo); 
  };
}

// вспомогательные функции вырезаны из ответа для упрощения
var Foo = function Foo() {
  var _this = this;

  _classCallCheck(this, Foo);

  _defineProperty(this, "bar", function () {
    console.log(_this.foo);
  });

  this.foo = 5;
};