Предоставление ссылки на вложенные функции в js

#javascript #html

#javascript #HTML

Вопрос:

Я хотел бы предоставить ссылку на функцию 1-го js во 2-м js. Я знаю об отдельных функциях и передаваемых переменных и т.д. Однако, как мне дать ссылку на функцию внутри другой функции?

HTML

 ...
...
<script src="./js/scripts.js">
  </script>
  <script src="./js/pure-swipe.js">
  </script>

scripts.js

 @param {HTMLElement} element The Element
var Application = function(element) {
        this.init();
    };
    Application.prototype = {
      onClickNext: function() {
            this.goToNext();
        }
     goToNext: function() {
            console.log("NEXT");
        },
};

window.addEventListener("load", function() {
        var elements = Utility.toArray(document.querySelectorAll(Utility.selector("application")));
        for (var i = 0; i < elements.length; i  ) {
            var instance = new Application(elements[i]);
        }
    });

pure-swipe.js

     document.addEventListener('swiped-left', function(e) {
       
            onClickNext(); //Call function here

        // ...
    });

Ответ №1:

Прикрепите ссылку на глобальный объект (который в браузере является window )

В приведенном ниже коде я изменил var instance на window.instance . Это позволяет вам получить к нему доступ в pure-swipe.js с помощью window.instance.onClickNext()

 // scripts.js
window.addEventListener("load", function() {
        var elements = Utility.toArray(document.querySelectorAll(Utility.selector("application")));
        for (var i = 0; i < elements.length; i  ) {
            window.instance = new Application(elements[i]);
        }
    });

// pure-swipe.js
document.addEventListener('swiped-left', function(e) {
    window.instance.onClickNext(); //Call function here
});

1. Извините, я не понимаю этого. На что именно я должен дать ссылку? Функция или приложение.прототип? Не могли бы вы, пожалуйста, показать мне пример? Спасибо

2. @Saif — покажите свой код — где вы создаете новый Application .

3. Идеально! Большое спасибо. Так что просто пришлось добавить window к экземпляру. Но есть ли за этим причина? Я имею в виду, почему бы просто не получить доступ к экземпляру переменной напрямую?

4. @Saif потому что они находятся в отдельных файлах. Код в файлах не может взаимодействовать друг с другом напрямую — pure-swipe.js hsa понятия не имеет, в каких переменных объявлено scripts.js , но они выполняются в одном контексте (глобальном контексте браузера). Таким образом, пока вы делаете ссылку доступной в контексте, который могут читать оба файла — например, путем прикрепления ссылок на window объект, — они могут «разговаривать» друг с другом.

Ответ №2:

В этом конкретном примере вам понадобится объект, созданный с помощью new Application (или аналогичный), который будет иметь onClickNext на нем наследуемое свойство. Итак, если у вас есть объект, на который ссылается переменная app , например, тогда:

 document.addEventListener('swiped-left', function(e) {
   
        app.onClickNext(); //Call function here

    // ...
});

Функция также доступна как Application.prototype.onClickNext но она явно предназначена для использования как метод, а не напрямую. (Технически, с показанным вами кодом это сработало бы, если бы вы вызывали его напрямую, но я предполагаю, что содержимое goToNext более сложное, чем просто console.log . В любом случае, прямой вызов Application.prototype.onClickNext был бы очень плохой практикой без предоставления ему допустимого this значения для использования.)