具有默认功能和其他功能的 Javascript 对象答案

【问题标题】：Javascript object with Default function and other functions具有默认功能和其他功能的 Javascript 对象
【发布时间】：2017-02-11 15:06:40
【问题描述】：

我正在尝试为某些东西创建自己的插件，但是第一步遇到了麻烦。我想要一个可以将参数作为默认参数并在其中也具有其他功能的对象。请查看下面的示例，了解我要完成的工作。

var a = function(str) { console.info(str); }
a = {
    Test: function() { console.info(TestMessage()); },
    TestMessage: function() { return "Test Message"; }
}

基本上，我想要可以通过参数自己调用的父对象。一个测试”）;同时，我希望该父对象中的其他函数也可以访问该对象中的其他函数。 a.Test() -> 调用 a.TestMessage()，但是，不必写“a”。每次都在那个物体里面。

【问题讨论】：

标签： javascript

【解决方案1】：

您的代码的问题是您覆盖第二条语句a 的值。如果你想给 a 引用的函数添加属性，你可以通过分配给它的属性来做到这一点：

var a = function(str) { console.info(str); };
a.Test = function() { console.info(TestMessage()); };
a.TestMessage = function() { return "Test Message"; };

现在，我们没有将 a 中的函数引用替换为对新对象的引用，而是向它已经引用的函数对象添加属性。

但请注意，在 Test 中，您需要限定 TestMessage 才能正确引用它：

a.Test = function() { console.info(a.TestMessage()); };
// --------------------------------^^

或者，如果您可以依赖始终通过 a 调用的 a.Test，那么：

a.Test = function() { console.info(this.TestMessage()); };
// --------------------------------^^^^^

...但前者更可靠。

现场示例：

var a = function(str) { console.info(str); };
a.Test = function() { console.info(a.TestMessage()); };
a.TestMessage = function() { return "Test Message"; };

a("Direct");
a.Test();

【讨论】：

我明白了，谢谢。这会是大型插件的最佳方法吗？我在想我会封装它，就像它会是一个大对象，里面会有所有可以相互调用的子函数，而不必写这个或父名。我的意思是，如果这种方式适用于大型插件，那么我可以接受。
@AAA：在我看来，您真正想要的是“揭示模块模式”，您可以在其中使用内部具有私有函数的 IIFE，这些函数可以在没有限制的情况下相互调用，并让它返回一个对象外部接口。
是的，这听起来有点像（：但是，有没有办法用那种模式做“默认”？就像这个：stackoverflow.com/questions/5647258/…也许我可以做一些像透露= function(str) 和 doreveal("direct")，它可以做 "if (str != undefined) { console.info(str); return; } .. 你怎么看？
@AAA：当然。 jQuery 就是一个很好的例子。您只需定义一个函数，为其添加属性，然后从 IIFE 中返回它。 var Thingy = (function() { function foo() { } function bar() { } function baz() { } function Thingy() { } Thingy.prop = function() { }; return Thingy; })(); 在该 IIFE 中，您可以调用 foo、bar 和 baz（和 Thingy）不合格。不过，它们是完全私密的。

【解决方案2】：

如果您想继续使用简单的TestMessage 函数引用，不带任何前缀，那么您可以创建一个闭包，格式为立即调用的函数表达式。像这样：

var a = (function () { // Immediately Invoked Function
    // Define your functions here "at ease":
    function testMessage() { 
        return "Test Message"; 
    }
    function test() { 
        console.info(testMessage()); 
    }
    function main(str) { 
        console.info(str); 
    }
    // Now assign the sub-functions to main:
    main.test = test;
    main.testMessage = testMessage;
    // And return that:
    return main;
})(); // execute immediately so to get the return value

// Test it

a('hello');
a.test();

【讨论】：

【解决方案3】：

您也可以使用显示模块模式。

仅公开您实际计划调用的函数。辅助函数可以留在您的对象内部，而无法从外部访问它们。

您还可以将初始 str 值保存在局部变量中，例如 var string = str;并在你的函数中使用它

function A ( str ) {
   console.info( str );

        function test( ) {
            console.info( testMessage( ) );
        }

        function testMessage( ) {
            return "Test Message";
        }

     return {
        test: test
     }
}
var a = new A( "testing" );
a.test();

【讨论】：

【解决方案4】：

你总是可以返回一个可以有任意数量的函数的对象。一个函数使用this调用它的对象的另一个函数。

我已经添加了一个非常简单的 sn-p 来解释这一点，请让我知道任何澄清。

var parent = createParent();

parent.callAllFunction();


function createParent() {
 return ParentConstructor();
}

function ParentConstructor() {
 var obj = {};
  
 obj.function1 = function1; 
 obj.function2 = function2; 
 obj.function3 = function3; 
 obj.function4 = function4; 
 obj.callAllFunction = callAllFunction;
 
 function function1() {
 	console.log('called function1');
 }

 function function2() {
 	console.log('called function2');
 }

 function function3() {
 	console.log('called function3');
 }

 function function4() {
 	console.log('called function4');
 }

 function callAllFunction() {
	 this.function1();
	 this.function2();
	 this.function3();
   this.function4();
 }
 
 return obj;
}

当您编写插件时，您应该始终将您的对象/模块与主要引用隔离开来，以使它们更加可重用和清洁。

【讨论】：