向对象添加函数

Add function to object

本文关键字：函数 添加 对象      更新时间：2023-09-26

我有以下代码

var PROMO = PROMO || {};
PROMO.Base = (function () {
  var _self = this;
  var Init = function () {
    WireEvents();
  };
  var WireEvents = function () {
   //wire up events
  };
} ());

在同一个文件中，我有调用上述函数的代码

我正试图到达一个终点，在那里我可以使用以下代码

 $(document).ready(function () {
    PROMO.Base.Init();
 });

这给出了错误

Cannot call method 'Init' of undefined

现在我知道有很多方法可以编写javascript，但在这种情况下，我希望能够调用我的函数，或者至少可以用上面显示的方式调用Init方法。

var PROMO = PROMO || {};
PROMO.Base = (function () {
  var _self = this;
  var Init = function () {
    WireEvents();
  };
  var WireEvents = function () {
   //wire up events
  };
  var reveal = {
        Init: Init        
  };
  return reveal;
} ());

您需要返回面向公众的函数。请参阅更新的代码。

使用IIFE和直接归因对这两种模式进行处理。

使用var会使定义私有化，并且您的函数不会返回任何内容。使用此：

PROMO.Base = {
    Init: function() {
    },
    WireEvents: function() {
    };
};

您正在使用IIFE(立即执行函数表达式(包装定义。因此，您的PROMO.Base对象将被分配(function(){//blabla})();返回的值。但是您的函数没有return语句。默认情况下，它将返回undefined。

这就是你的PROMO.Base将是undefined的方式，你会得到这个：

Cannot call method 'Init' of undefined

如果你真的想要IIFE:

var PROMO = PROMO || {};
// NEVER use _self = this inside static functions, it's very dangerous.
// Can also be very misleading, since the this object doesn't point to the same reference.
// It can be easily changed with Function.prototype.call and Function.prototype.apply
PROMO.Base = (function () {
    _PROMO = {
        Init : function () {
            document.body.innerHTML += "itworks";
        },
        WireEvents : function () {
   //wire up events
        }
    }
    return _PROMO;
} ());
PROMO.Base.Init();

更新

更好更简单的模式是简单地将函数分配给PROMO.Base。请注意，不应将静态函数大写，而应仅将构造函数大写。所以，如果某个东西不是要实例化的，不要称它为Init，它应该是init。这就是惯例。

var PROMO = {};
PROMO.Base = {};
PROMO.Base.init = function() {
    console.log("this works");
};
PROMO.Base.wireEvents = function() {
    console.log("this is a static function too");
};

您可以将其附加到window对象，如。。。

window.PROMO = (function($, _){
// this will access PROMO.Base 
PROMO.Base = {
    // inner functions here
    Init:{}
};
})(jQuery, _);

然后像你一样加载。

或者，如果您依赖jQuery

(function($){
    var PROMO = {
        // inner functions
        Init: function(){},
        WireEvents: function(){}
    };
    $.PROMO = PROMO;
})(jQuery);

DOM就绪

jQuery(function ($) {
    var promo = $.PROMO || undefined;
    promo.Base.Init();
});
相关文章：