在 js 中提供嵌套函數的引用

Question

我想在 2nd js 中提供對 1st js 的 function 的參考。 我知道單個函數和傳遞變量等。但是，如何在另一個 function 中引用 function？

HTML

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

腳本.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]);
        }
    });

純刷卡.js

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

        // ...
    });

Answer 1

在此特定示例中，您將需要通過new Application （或類似應用程序）創建的 object，該應用程序將具有onClickNext作為繼承屬性。 因此，例如，如果您有從變量app引用的 object ，那么：

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

    // ...
});

function 也可以作為Application.prototype.onClickNext訪問，但它顯然是用作方法，而不是直接使用。 （從技術上講，使用您顯示的代碼，如果您直接調用它會起作用，但我認為goToNext的內容比console.log更復雜。無論如何，直接調用Application.prototype.onClickNext將是非常糟糕的實踐，沒有提供有效的this來使用。）

Answer 2

附加對全局 object 的引用（在瀏覽器中為window ）

在下面的代碼中，我已將var instance更改為window.instance 。 這允許您使用window.instance.onClickNext()在pure-swipe.js中訪問它

// 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
});