Javascript object with Default function and other functions - Stack Overflow

admin管理员组

文章数量:1277898

I am trying to create my own plugin for something, however, having trouble with the first step. I would like to have a an object that can take a parameter as default and have other functions in there as well. Please look at the example below on what I am trying to acplish.

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

Basically, I want the parent object that I can call by itself with a parameter. a("test"); At the same time, I want other functions inside that parent object that can ALSO access other functions within that object. a.Test() -> calls a.TestMessage(), however, not having to write "a." every time while being inside that object.

I am trying to create my own plugin for something, however, having trouble with the first step. I would like to have a an object that can take a parameter as default and have other functions in there as well. Please look at the example below on what I am trying to acplish.

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

Basically, I want the parent object that I can call by itself with a parameter. a("test"); At the same time, I want other functions inside that parent object that can ALSO access other functions within that object. a.Test() -> calls a.TestMessage(), however, not having to write "a." every time while being inside that object.

• javascript

Share Improve this question Follow asked Feb 11, 2017 at 15:06 FerX32FerX32 1,40733 gold badges1919 silver badges2828 bronze badges

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 6

The problem with your code is you're overwriting the value of a with the second statement. If you want to add properties to the function a refers to, you can do that by assigning to properties on it:

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

Now, instead of replacing the function reference in a with a reference to a new object, we're just adding properties to the function object it already refers to.

Note, though, that within Test, you need to qualify TestMessage in order to refer to it correctly:

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

or if you can rely on a.Test always being called via a, then:

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

...but the former is more reliable.

Live Example:

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

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

If you want to keep using the simple TestMessage function references, without any prefix, then you could create a closure, in the format of an immediately invoked function expression. Like this:

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();

You can always return an Object which can have any number of functions. And a function calls another function of its object using this.

I have added a very simple snippet to explain this, please let me know for any clarification.

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

And as you're writing a plugin, you should always isolate your objects/modules from main references to make them more reusable and clean.

You can also use revealing module pattern.

To expose only the functions that you are actually planning to call. The helper functions can stay inside your object, without being able to access them from outside.

You can also keep the intial str value in an local variable like, var string = str; and use it in your functions

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();

本文标签： Javascript object with Default function and other functionsStack Overflow