CODEWITHSUNDEEP
javascriptjquery
Raissa Ditya Putri
Raissa Ditya Putri

Reputation: 119

Put many function inside function in Javascript

I'm newbie in Javascript and wanna learn function to make own plugin.

So first i'm learn about this:

(function() {
      // Define our constructor
      this.Cms = function(){
        this.Test = function()
        {
            return "Halo there";
        }
      };
    }());
var md = new Cms();

With that, I can access md variable and Test method successfully in browser console.

> md.Test()
< "Halo there"

I wanna make many function inside Cms, so I trying this:

(function() {
      // Define our constructor
      this.Cms = function(){
        this.Test = function()
        {
            return "Halo there";
        }

        this.TestAgain = function()
        {
            this.Helpme = function()
            {
                return "Heya";
            }
        }
      };
    }());

And execute var md = new Cms.TestAgain() in console, that returning error:

Uncaught TypeError: Cms.TestAgain is not a constructor at <anonymous>:1:10

My goal is make many function and each function can called in variable. For example I can declare var md = new Cms.TestAgain() and run function md.Helpme() that can return value Heya. Also I can declare var md = new Cms() and run function md.TestAgain.Helpme() with same return value Heya.

It's possible? Help me guys :)

Thanks.

Upvotes: 2

Views: 132

Answers (3)

user1636522
user1636522

Reputation:

The new keyword is intented to be used in conjunction with a class (a template for objects) like so:

function Person (firstname, lastname) {
  this.firstname = firstname;
  this.lastname = lastname;
}

donald = new Person("Donald", "Trump");
barack = new Person("Barack", "Obama");
console.dir(donald);
console.dir(barack);

You don't need it here. Instead you could just write:

var cms = {
  testAgain: {
    helpme: function () { return "Heya"; }
  }
};

And later write:

cms.testAgain.helpme();

Upvotes: 0

sanketd617
sanketd617

Reputation: 809

First of all, the function is called Anonymous self executing function.

Secondly, it is better to define your function the following way as the very well known library jQuery does:

(function(window) {
    // Define your function here
    var Cms = function () {
         // Function body
    };

    // Add the function to the window scope so that it can be accessed anywhere
   window.Cms = Cms;
})(window);

When you define functions like this:

var Cms = function () {
    this.test = function () {
        console.log("Hello");
    };

    this.testAgain = function() {
        console.log("Hello again");
    };
};

You have to call it like this:

// First create an object of Cms
var md = new Cms();

// Then call the methods
md.test(); // Hello
md.testAgain(); // Hello again

If you want another function in testAgain, you can do this way:

var Cms = function () {
    ...
    this.testAgain = function() {
        this.help = function() {
            console.log("help");
        };
    };
};

// Create object of Cms
var md = new Cms();

// Create object of testAgain
var x = new md.testAgain();

// Now call the function
x.help();

Here is the entire code snippet:

(function(window) {
    var Cms = function () {
         this.test = function () {
             console.log("Hello");
         };
         this.testAgain = function () {
             this.help = function() {
                 console.log("Help");
             };
         };
    };
    window.Cms = Cms;
})(window);

// Create the object
var md = new Cms();
// Call the function test
md.test(); // Hello

// Create the object of testAgain using object of Cms 
var x = new md.testAgain(); // Hello again

// Call the function help
x.help(); // Help

If you don't want to create objects and directly want to call Cms.test(), you can use JavaScript objects like this:

// Create a object
var Cms = {};
Cms.test = function() {
    console.log("Hello");
};

// Create a nested objects here
Cms.testAgain = {};

Cms.testAgain.help = () {
    console.log("Help");
};

And then call it directly as:

Cms.test(); // Hello
Cms.testAgain.help(); // Help

Notice that here you don't need the new operator.

Here is the entire code snippet:

(function(window) {
     var Cms = {};
     Cms.test = function () {
          console.log("Hello");
     };
     Cms.testAgain = {};
     Cms.testAgain.help = function () {
          console.log("Hello again");
     };

     window.Cms = Cms;
})(window);

// Directly call the functions
Cms.test(); // Hello
Cms.testAgain.help(); // Help

Above code is same as doing this:

(function(window) {
     var Cms = {
         test: function () {
             console.log("Hello");
         },
         testAgain: {
             help: function () {
                 console.log("Hello again");
             },
         },
     };

     window.Cms = Cms;
})(window);

// Directly call the functions
Cms.test(); // Hello
Cms.testAgain.help(); // Help

Hope this helps.

Upvotes: 1

Ashok
Ashok

Reputation: 2932

In your functional code 

(function() {
  // Define our constructor
  this.Cms = function() {
    this.Test = function() {
      return "Halo there";
    }
    this.TestAgain = function() {
      this.Helpme = function() {
        return "Heya";
      }
    }
  };
}());

every time when you create instance or object using new keyword it give access within function limit

For example on instance of Cms give you access on Test and TestAgain

var md = new Cms()

But for access Helpme you need to object of TestAgain which depend on Cms which is 

const testAgain = new md.TestAgain()

Now you can freely call Helpme function on instance of testAgain

console.log(testAgain.Helpme())

Upvotes: 0

Related Questions