無法調用Javascript對象方法

Question

我得到一個控制台錯誤TypeError: bodys.show is not a function在加載我的頁面時TypeError: bodys.show is not a function 。 我究竟做錯了什么？

function loadingScreen(selector,css)
{
    this.loadingAnimation = $("<div><p>Loading</p><div></div></div>").appendTo(selector);
    this.containerCss = $.extend({'border-radius':"20px",position:"absolute",height:"40px",width:"120px","display":"none"}, css);
    this.loadingAnimation.css(this.containerCss);
    this.p = this.loadingAnimation.children("p").first();
    this.p.css({width:"100%",'text-align':"center"});
    this.div = this.loadingAnimation.children("div").first();
    this.div.css({position:"abslolute",left:"0",top:"0",'background-color':"rgba(255,100,100,0.5)",height:"100%",width:"10%"});
    function show(){
        this.loadingAnimation.css("display","block");
        animate(this.div,"right");
    }
    function hide(){
        this.loadingAnimation.css("display","none");
        this.div.stop(true,true);
        this.div.css("margin-left","0px");
    }
    function animate(element,direction)
    {
        if(direction === "right"){
            element.animate({"margin-left":"120px"},animate(element,"left"));
        }
        else if(direction === "left"){
            element.animate({"margin-left":"0px"},animate(element,"right"));
        }
    }
}

$(document).ready(function()
{
    var bodys = new loadingScreen("body",{});
    bodys.show();
});

Answer 1

在函數體內聲明變量/函數時，它們是“私有的”，除非它們作為函數本身的屬性附加 - 在體內，您將使用this關鍵字來執行此操作。

該功能show()是私有的內部loadingScreen，使其作為其父的成員函數訪問，與聲明它this ：

this.show  = function(){...

...}

...它仍然可以訪問loadingScreen范圍內的loadingScreen ，但是可以作為loadingScreen的方法在外部loadingScreen 。

編輯：

正如Naomik在下面指出的那樣，你也可以將它附加到對象的原型：

loadingScreen.prototype.show = function()...

...顯然原型函數比標准成員聲明執行得更快，但是 - 因為你將在主函數體之外聲明它，它將無法訪問函數內部的私有變量，所以在這種情況下它沒有多大用處。

Answer 2

目前show()函數是在loadingScreen的本地/私有范圍內loadingScreen ，為了使show公開可見使用this.show

所以改變你的代碼

 this.show = function() {

代替

function show(){

Answer 3

您可以使用this.show = show;將show到您的新實例this.show = show; 在你的構造函數中

或者你可以做到這一點

// loading-screen.js
(function(window, $) {

  var LoadingScreen = function (selector, css) {
    this.$elem = $(selector);
    this.$elem.css(css);
  };

  LoadingScreen.prototype.show = function () {
    return this.$elem.show();
  };

  LoadingScreen.prototype.hide = function () {
    return this.$elem.hide();
  };

  window.LoadingScreen = LoadingScreen;

})(window, jQuery);

作為原型的一部分，現在可以訪問任何LoadingScreen實例的show和hide函數。 最重要的是，你有一個很好的小代碼模塊，可以與所有其他腳本分開包含。

用法

<script src="loading-screen.js"></script>
<script>
  $(function() {
    var ls = new LoadingScreen("body", {});
    ls.show();
    ls.hide();
  });
</script>

---

jQuery插件 - 一個演示

既然你正在使用jQuery，而不是將selector和一些css傳遞給vanilla構造函數，那么將它包裝在jQuery插件中可能是有意義的。

(function(window, $) {

  var LoadingScreen = function($elems, css) {
    this.$elems = $elems;
    this.$elems.css(css);
  };

  LoadingScreen.prototype.show = function() {
    this.$elems.slideDown(250);
  };

  LoadingScreen.prototype.hide = function() {
    this.$elems.slideUp(250);
  };

  $.fn.loadingScreen = function(css) {
    return new LoadingScreen(this, css);
  };

})(window, jQuery);

用法非常相似，但看起來更傳統的jQuery

$(function() {
  var ls = $("p").loadingScreen({backgroundColor: "blue"});

  // notice .show and .hide delegate to our plugin methods now
  ls.show();
});