Как в javascript можно вызвать функцию
Второй способ — это передать нашу функцию в другую функцию в качестве аргумента. Передаваемая функция будет назваться «функцией обратного вызова» или «колбэк-функцией», а её вызов произойдет по завершению какого-либо действия (например, выполнения другой функции, истечения времени таймера, наступления события на странице и т.д.):
const getMessage = (greeting, callback) => console.log(greeting); // функция callback() будет вызвана после выполнения console.log(greeting) callback(); >; getMessage('Hi!', myFunction); // => Hi! It's my function! // в этом примере функция myFunction() будет вызвана после истечения времени в 1000 миллисекунд (1 секунда) setTimeout(myFunction, 1000); // => It's my function! 17 января 2022
Очень просто. Допустим у нас есть функция getSum() , которая вычисляет сумму двух чисел и возвращает результат. Вызов этой функции будет выглядеть так:
getSum(1, 3); Тут мы передаём в нашу функцию два параметра 1 и 3, а вернуть она должна число 4.
Вызов функций JavaScript
Код внутри функции JavaScript не выполняется, когда эта функция определяется. Он выполняться только тогда, когда эта функция будет «запущена».
Обычно говорят «вызвать функцию» или «выполнить функцию».
Запуск функции как функции
function myFunction(a, b) < return a * b; >myFunction(10, 2); // вернет 20
Функция в предыдущем примере не принадлежит какому-либо объекту. Однако в JavaScript всегда существует «дефолтный» глобальный объект.
В HTML таким глобальным объектом является HTML страница, таким образом, функция из предыдущего примера «принадлежит» текущей HTML странице.
В браузере объект страницы — это окно браузера или объект window. Так, функция из примера автоматически становится функцией объекта window. Таким образом, myFunction() и window.myFunction() это одна и та же функция:
function myFunction(a, b) < return a * b; >window.myFunction(10, 2); // также вернет 20
Это обычный способ вызывать функции JavaScript. Однако, это не очень хорошая практика. Глобальные переменные, методы или функции могут создавать конфликты имен и приводить к сбоям в глобальном объекте.
Ключевое слово this
В JavaScript ключевое слово this — это объект, который «владеет» текущим кодом.
При использовании в функции значением ключевого слова this является объект, который «владеет» данной функцией.
Обратите внимание, что this — это не переменная, а ключевое слово. Вы не можете изменять его значение.
Глобальный объект
Когда функция вызывается без объекта-владельца, значением ключевого слова this становится глобальный объект.
В браузере глобальный объект — это окно браузера (объект window).
В следующем примере функция возвращает объект window:
var x = myFunction(); // значением x будет объект window function myFunction()
Внимание! Вызов функции как глобальной, устанавливает this на глобальный объект. Использование объекта window в качестве переменной может привести к краху вашей программы.
Вызов функции как метода
В JavaScript вы можете определять функции как методы объектов.
В следующем примере создается объект (myObject) с двумя свойствами (firstName и lastName) и одним методом (fullName):
var myObject = < firstName:"John", lastName: "Doe", fullName: function () < return this.firstName + " " + this.lastName; >> myObject.fullName(); // вернет "John Doe"
Метод fullName — функция. Эта функция принадлежит объекту. Объект myObject — владелец функции fullName.
Ключевое слово this указывает на объект, который «владеет» данным кодом JavaScript. В данном случае значением ключевого слова this является объект myObject:
var myObject = < firstName:"John", lastName: "Doe", fullName: function () < return this; >> myObject.fullName(); // вернет [object Object] (объект-владелец)
Вызов функции как метод объекта устанавливает в качестве значения ключевого слова this сам объект.
Вызов функции как конструктора объекта
Если перед вызовом функции стоит ключевое слово new, то это вызывается конструктор объекта.
Выглядит так, будто вы создаете новую функцию, но так как функции в JavaScript являются объектами, вы на самом деле создаете новый объект:
// Это функция конструктор: function myFunction(arg1, arg2) < this.firstName = arg1; this.lastName = arg2; >// Это создает новый объект var x = new myFunction("John", "Doe"); x.firstName; // вернет "John"
Вызов конструктора создает новый объект. Новый объект наследует свойства и методы своего конструктора.
У ключевого слова this в конструкторе нет значения. Значением ключевого слова this станет новый объект, созданный при вызове функции конструктора.
Как вызвать функцию при клике? js
Есть вот такой вот код, который берёт инфу из localStorage и отрисовывает её на другой вкладке. Всё работает нормально до тех пор, пока я не повешу эту функцию на клик. Когда я вышаю на клик и перехожу на ту вкладку, где должна отрисовываться инфа, то мне пишет Cannot read property ‘addEventListener’ of null. ticketButton находится во вкладке, где нужно тыкнуть на эту кнопку и и отобразить инфу на на другую вкладку в блок ticketsContainer
ticketButton.addEventListener('click', () => < displayTickets(); >) function displayTickets() < let seatsItems = JSON.parse(localStorage.getItem('seats')); let time = localStorage.getItem('time'); let day = localStorage.getItem('day'); let ticketsContainer = document.querySelector('.ticketsContainer'); if(seatsItems && ticketsContainer) < ticketsContainer.innerHTML = ''; Object.values(seatsItems).map(item =>< ticketsContainer.innerHTML += ` Ваш ряд: $ Ваше место: $
$, $
`; >) > > Отслеживать
Денис Коваль
задан 15 окт 2020 в 19:06
Денис Коваль Денис Коваль
45 6 6 бронзовых знаков
Тут приходится гадать, что за вкладки (браузера или самописные какие-то), где ticketButton и прочее. Отредактируйте вопрос, иначе ответы будут пальцем в небо пока вам не понравится.
– user347472
15 окт 2020 в 19:13
Всё, вроде бы написал понятно
15 окт 2020 в 19:17
Ну вы умалчиваете что за вкладки, почему ticketButton становится null не ясно. Возможно у вас этот код вызывается в каждой вкладке, например повешен на » tab.onchаnge » и во второй вкладке просто нет кнопки. В общем не ясно как отвечать, не хватает информации. Вкладок в вашем коде нет, заметьте, а вы про них говорите.
– user347472
15 окт 2020 в 19:21
У меня есть два html файла, в первом находится кнопка, во вторном контейнер, куда должна отрисовываться инфа. И функция работает как следует до тех пор, пока не повешу её на кнопку, которая находится в первом html файле. Второй html с контейнером так же как и первый подключён к одному js файлу
15 окт 2020 в 19:25
Возможно нужно второй html, который сблоком, подключить к отдельному js файлу, и уже в нём доставать эту инфу из localStorage, но мне ведь нужно повесить эту функцию на кнопку.
как вызвать функцию из другого файла js
Для вызова функции из другого файла js необходимо сначала загрузить этот файл в текущий скрипт. Это можно сделать с помощью тега в html файле, где вы хотите вызвать функцию. Например, если у вас есть файл functions.js , который содержит функцию myFunction , то вам нужно добавить следующий тег в html файл:
src="functions.js"> После этого вы можете вызвать функцию myFunction в текущем скрипте. Например:
myFunction(); Если вы хотите вызвать функцию из другого файла js внутри модуля (ES6 и выше), вы можете использовать ключевое слово import . Например, если у вас есть файл functions.js со следующим содержимым:
export const myFunction = () => console.log('Hello world!'); >; Тогда вы можете импортировать функцию myFunction в другом файле js следующим образом:
import myFunction > from './functions.js'; myFunction(); Важно отметить, что для использования import и export вам нужно использовать модульный формат файла js (ES6 и выше), а также ваш файл js должен быть загружен в браузер с помощью тега .