Стрелочная функция в объекте
Здравствуйте, есть вот такая функция-модуль:
var paralax = ( () => { const bg = document.querySelector('.header__bg') ,user = document.querySelector('.header__me') ,text = document.querySelector('.header__img-portfolio'); return { move: function (block, windowScroll, rateVaue) { var shift = windowScroll / -rateVaue + '%'; var style = block.style; style.top = shift; }, init: function (windowScroll) { this.move(bg, windowScroll, 45); } } })(); Она возвращает два метода move и init, в таком виде она работает, но если эти методы описывать через стрелочные функции то я получаю ошибку this.move is not a function Я так понимаю теряется контекст в таком случае? Подскажите пожалуйста, как этого избежать?:-? |
Tipylja,
вариант... const paralax = (() => { const bg = document.querySelector('.header__bg'), user = document.querySelector('.header__me'), text = document.querySelector('.header__img-portfolio'), move = (block, windowScroll, rateVaue) => { const shift = windowScroll / -rateVaue + '%'; const style = block.style; style.top = shift; }, init = (windowScroll) => { move(bg, windowScroll, 45); }; return { move, init } })(); |
Цитата:
paralax.init.move - не существует что и приводит к ошибке this в JS динамически заменяется в момент вызова функции и всегда указывает в контексте какого объекта он исполняется. В отличии от некоторых языков программирования где он является константным указателем на экземпляр класса. <script> function GetName() { return this.name; } var vasa = {name: "Вася"}; var lena = {name: "Лена"}; var petia = {name: "Петя"}; vasa.gn = GetName; lena.gn = GetName; petia.gn = GetName; document.write ( vasa.gn() + "<br>") ; document.write ( lena.gn() + "<br>") ; document.write ( petia.gn() + "<br>") ; </script> В JS очень важно понимать как создается и работает контекст исполнения функции (текущая область видимости переменных). |
Цитата:
const paralax = (() => { const bg = document.querySelector('.header__bg') , user = document.querySelector('.header__me') , text = document.querySelector('.header__img-portfolio') return { move(block, windowScroll, rateVaue) { const shift = windowScroll / -rateVaue + '%'; const style = block.style; style.top = shift; }, init(windowScroll) { this.move(bg, windowScroll, 45); } } })(); |
Спасибо за ответы. Но все работает и так, в приведенном мною примере, если функции описывать классически путем, а вот если использовать стрелочный синтаксис, то нет.
На сколько я понимаю, то в классическом виде this указывает на возвращаемый объект, который по замыканию видит переменные внутри модуля и методы внутри себя this.move и this.init, но если объявлять функции через стрелочный синтаксис, то this указывает на window, а там никаких move и init нет. И вопрос в том, как быть, если хочется уйти от классического объявления функции и перейти полностью на стрелочные |
Цитата:
|
Цитата:
Цитата:
В вашем примере нужно, чтобы функция содержала собственный контекст this, в том решении, которое вам привёл рони, вы всё-таки не можете использовать this, вы не можете вызывать методы в контексте, у вас нет внутри метода ссылки на объект. В моём примере выше (пост №4) я вам показал, как можно избежать потери контекста. (+ БОНУСЫ! не нужно печатать имена методов два раза, не нужно печатать «стрелки») Цитата:
Каким бы образом функция синтаксически не записывалась, она принимает аргументы, производит какие-либо действия, и возвращает результат. И всё! А вы когда либо задумывались о том, что может существовать нечто, напоминающее функцию, оно тоже принимает аргументы, производит действия, останавливается и возвращает результат. Однако может обратно вернуться и продолжить выполнение дальше! Опять возвратить результат. А представьте две такие функции, которые переходят из одной в другую! Вот это бы я назвал «уйти от классического объявления функции» |
переделать в стрелочную функцию
Добрый день, возникла проблемка( нужно переделать функцию в стрелочную, нижнюю часть я сделал а при изменении верхней, консоль ругается что не переданы аргументы.
<script> function sum() { const params = Array.prototype.slice.call(arguments); if (!params.length) return 0; return params.reduce((prev, next) => prev + next); } console.log(sum(1, 2, 3, 4)); // 10 console.log(sum()); // 0 </script> |
Цитата:
Короткий вариант... function sum(...params) { if(!params.length) return 0; return params.reduce((prev, next) => prev + next); } console.log(sum(1, 2, 3, 4));// 10 console.log(sum());// 0 Длинный вариант... const sum = (...params) => { if(!params.length) return 0; return params.reduce((prev, next) => prev + next); } console.log(sum(1, 2, 3, 4));// 10 console.log(sum());// 0 Более короткий вариант... const sum = (...params) => params.reduce((prev, next) => prev + next, 0); console.log(sum(1, 2, 3, 4));// 10 console.log(sum());// 0 |
Часовой пояс GMT +3, время: 03:00. |