Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Стрелочная функция и this (https://javascript.ru/forum/misc/82231-strelochnaya-funkciya-i.html)

Babyslam 06.04.2021 00:27

Стрелочная функция и this
 
Подскажите пожалуйста почему по разному работает данный код:
Функция конструктор
function Rabbit(name) {
  this.name = name;
  this.func = () => { console.log(this.name)}
}

const rabbit = new Rabbit('Banny');
rabbit.func(); // Banny


А в обычном объекте или функции:

const rabbit = {
  name: 'Banny',
  func: () => { console.log(this.name)}
}

rabbit.func(); // undefined || window


В стрелочных функциях, this привязан к окружению, в котором была создана функция.
Все дело в ключевом слове new?

voraa 06.04.2021 06:49

Читайте, учите основы javascript
https://developer.mozilla.org/ru/doc...rrow_functions
https://learn.javascript.ru/object-methods

new тут роли не играет. Он создает объект, а не функцию.

ksa 06.04.2021 07:46

Babyslam, ты попутал синтаксис создания метода объекта...

const rabbit = {
  name: 'Banny',
  func() {alert(this.name)}
}

rabbit.func()

И теперь все валишь на new... :nono:

Babyslam 06.04.2021 09:24

Цитата:

Сообщение от ksa (Сообщение 535263)
Babyslam, ты попутал синтаксис создания метода объекта...

const rabbit = {
  name: 'Banny',
  func() {alert(this.name)}
}

rabbit.func()

И теперь все валишь на new... :nono:

Хм, что-то странно такое слышать, почему я метод объекта не могу записать через стрелочную функцию? Метод объекта можно передать через свойство.
const rabbit = {
  name: 'Banny',
  func() {alert(this.name)}
}

rabbit.func()

const rabbit = {
  name: 'Banny',
  func: function() {alert(this.name)}
}

rabbit.func()


const rabbit = {
  name: 'Banny',
  func: () => {alert(this.name)}
}

rabbit.func()


Это одни и те же свойства объекта.

ksa 06.04.2021 10:36

Babyslam, пробую твои варианты...
const rabbit0 = {
  name: 'Banny 0',
  func: () => {alert('0. ' + this.name)}
}

rabbit0.func()

const rabbit1 = {
  name: 'Banny 1',
  func: function() {alert('1. ' + this.name)}
}

rabbit1.func()

В нулевом нет данных по this.name... :no:

destus 06.04.2021 12:15

Babyslam,
в первом варианте, через new, это примерно следующее
function Rabbit(name) {
  // this = {};
  this.name = name;
  this.func = () => { console.log(this.name)};
  // return this;
}

Поэтому можно сказать что дело в наличии new перед функцией.

ksa 06.04.2021 12:40

Цитата:

Сообщение от Babyslam
почему я метод объекта не могу записать через стрелочную функцию?

Писать-то ты можешь... Вот только this там будет "особенный".

Цитата:

Стрелочные функции особенные: у них нет своего «собственного» this. Если мы используем this внутри стрелочной функции, то его значение берётся из внешней «нормальной» функции.
https://learn.javascript.ru/object-m...ktsiy-net-this

ksa 06.04.2021 12:42

Цитата:

Сообщение от destus
Поэтому можно сказать что дело в наличии new перед функцией.

Скорее наличие "нормальной" функции, внутри которой будет стрелочная функция...
Т.о. стрелочная возьмет this из "нормальной" функции, внутри которой она (стрелочная функция) находится.

worldsering 06.04.2021 17:39

В первом случае, ты создал функцию конструктор и в этом случае, this - указывает на твой "локальный" объект, и дело тут не в new, уже в момент создания функции - конструктора, твой this указывает на неё же - на твою функцию конструктор, А во втором случае ты создал объект с ключом, у которого значение некая функция, которая обращается к глобальному объекту и ищет в нем свойство name ...


Часовой пояс GMT +3, время: 23:37.