Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 06.04.2021, 00:27
Аватар для Babyslam
Интересующийся
Отправить личное сообщение для Babyslam Посмотреть профиль Найти все сообщения от Babyslam
 
Регистрация: 25.02.2015
Сообщений: 26

Стрелочная функция и 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?
Ответить с цитированием
  #2 (permalink)  
Старый 06.04.2021, 06:49
Аватар для voraa
Профессор
Отправить личное сообщение для voraa Посмотреть профиль Найти все сообщения от voraa
 
Регистрация: 03.02.2020
Сообщений: 2,743

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

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

Последний раз редактировалось voraa, 06.04.2021 в 06:52.
Ответить с цитированием
  #3 (permalink)  
Старый 06.04.2021, 07:46
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,205

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

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

rabbit.func()

И теперь все валишь на new...
Ответить с цитированием
  #4 (permalink)  
Старый 06.04.2021, 09:24
Аватар для Babyslam
Интересующийся
Отправить личное сообщение для Babyslam Посмотреть профиль Найти все сообщения от Babyslam
 
Регистрация: 25.02.2015
Сообщений: 26

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

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

rabbit.func()

И теперь все валишь на new...
Хм, что-то странно такое слышать, почему я метод объекта не могу записать через стрелочную функцию? Метод объекта можно передать через свойство.
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()


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

Последний раз редактировалось Babyslam, 06.04.2021 в 09:36.
Ответить с цитированием
  #5 (permalink)  
Старый 06.04.2021, 10:36
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,205

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...
Ответить с цитированием
  #6 (permalink)  
Старый 06.04.2021, 12:15
Аватар для destus
Профессор
Отправить личное сообщение для destus Посмотреть профиль Найти все сообщения от destus
 
Регистрация: 18.05.2011
Сообщений: 1,207

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

Поэтому можно сказать что дело в наличии new перед функцией.
Ответить с цитированием
  #7 (permalink)  
Старый 06.04.2021, 12:40
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,205

Сообщение от Babyslam
почему я метод объекта не могу записать через стрелочную функцию?
Писать-то ты можешь... Вот только this там будет "особенный".

Цитата:
Стрелочные функции особенные: у них нет своего «собственного» this. Если мы используем this внутри стрелочной функции, то его значение берётся из внешней «нормальной» функции.
https://learn.javascript.ru/object-m...ktsiy-net-this
Ответить с цитированием
  #8 (permalink)  
Старый 06.04.2021, 12:42
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,205

Сообщение от destus
Поэтому можно сказать что дело в наличии new перед функцией.
Скорее наличие "нормальной" функции, внутри которой будет стрелочная функция...
Т.о. стрелочная возьмет this из "нормальной" функции, внутри которой она (стрелочная функция) находится.
Ответить с цитированием
  #9 (permalink)  
Старый 06.04.2021, 17:39
Интересующийся
Отправить личное сообщение для worldsering Посмотреть профиль Найти все сообщения от worldsering
 
Регистрация: 01.04.2021
Сообщений: 11

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



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как-то странно работает код. Не выполняется целиком функция Yuriy-155 jQuery 7 22.11.2019 16:14
Стрелочная функция в объекте Tipylja Общие вопросы Javascript 8 02.08.2019 19:48
Функция вызывается несколько раз KiberQ Общие вопросы Javascript 11 01.03.2017 15:45
не вызывается функция при изменении option soft4you Общие вопросы Javascript 1 23.07.2014 17:41
AJAX функция для новых html-элементов broadcast77 AJAX и COMET 25 03.03.2014 14:01