Using the this keyword in my namespaced JavaScript

Question

I'm creating a small library of oft-used functions and want to refer to them within my namespace using the this keyword - searching has produced many different conflicting suggestions, tips and syntax. My structure looks like this:

var LibraryName = {

    someValue: 0,

    firstFunc: function(stuff) {

        LibraryName.someValue = 99;
        LibraryName.secondFunction();

    },

    secondFunction: function() {

        LibraryName.doSomething(LibraryName.someValue);

    }

}

So what I'm wondering is, do I have to refer to the full function name inside my namespace or can I use the keyword 'this' - I tried:

var LibraryName = {

    someValue: 0,

    firstFunc: function(stuff) {

        this.someValue = 99;
        this.secondFunction();

    },

    secondFunction: function() {

        this.doSomething(this.someValue);

    }

}

But I got errors stating that:

Uncaught TypeError: undefined is not a function

Thanks in advance!

You should be able to use `this`, but it looks like you haven't defined `doSomething`... A word of caution though, using `this` requires calls to these methods to be from the `LibraryName` context (i.e. if you do `var firstFunc = LibraryName.firstFunc` you will lose the `this` context). [More on this](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this) — wjohnsto, Dec 12 '14 at 17:15
The value of `this` depends on how the function is called. What you have will work if you call the function properly. — Felix Kling, Dec 12 '14 at 17:16
You are stars - just enough info to get me passed that hurdle - I was calling LibraryName.firstFunc() - Thanks again! — Tony Merryfield, Dec 12 '14 at 17:24
Tip: look at what line errors come from. Chrome's console allows you to click on the line and see the code in the browser. — DanielST, Dec 12 '14 at 17:33
The name of your object literal starts with a capital, this indicates it's a constructor but it's not. If your library has sub objects containing functions then `this` would refer to that sub object and not your library. Explanation about this, construction functions and prototype can be found here: http://stackoverflow.com/a/16063711/1641941 — HMR, Dec 13 '14 at 03:13

score 2 · Answer 1 · edited May 23 '17 at 12:01

2

I prefer this method:

http://jsfiddle.net/71mLyk28/1/

var LibraryName = function () {
    //constructor stuff
}

LibraryName.prototype = {
    someValue: 0,
    firstFunc: function (stuff) {
        this.someValue = 99;
        this.secondFunction();
    },
    secondFunction: function () {
        this.doSomething(this.someValue);
    },
    doSomething: function(){
        console.log("success");
    }
}

var l = new LibraryName(); // instantiate a LibraryName object
l.firstFunc();

Adding to the prototype instead of directly to the object helps with memory usage (if you have more than one of this object) and with inheritance.

See JS - Why use Prototype?

edited May 23 '17 at 12:01

Community

1
1

answered Dec 12 '14 at 17:21

DanielST

13,783
7
42
65

It doesn't look like the OP wants to create multiple instances. – Felix Kling Dec 12 '14 at 17:26
@FelixKling It helps with inheritance too, and it doesn't have much of a downside. It's useful to have some type of consistent pattern and this is a pretty good one. – DanielST Dec 12 '14 at 17:28
Well, I'd say use the right tool for the problem. Keeping it simple and not overengineering a solution is important as well. Given that the OP seems to be a beginner, introducing another concept instead of explaining what he did wrong might be more confusing that helpful. Just my 2c. – Felix Kling Dec 12 '14 at 17:32
@FelixKling That's fair. I just know that I ended up rewriting a ton of code about 3 months into fulltime JS development because I was inventing my own patterns (and they sucked). But it does teach you how the innards work. – DanielST Dec 12 '14 at 17:35
Yeah, it's a tradeoff :) – Felix Kling Dec 12 '14 at 17:36
You broke l.constructor (this.constructor in functions) using this syntax. – HMR Dec 13 '14 at 03:08

score 1 · Answer 2 · answered Dec 12 '14 at 17:17

The doSomething method doesn't exist in your object:

 var LibraryName = {   
      someValue: 0,    
      firstFunc: function (stuff) {
          this.someValue = 99;
          this.secondFunction();  
      },   
      secondFunction: function () {
          this.doSomething(this.someValue);
      },  
      doSomething: function (val) {
          console.log('dosomething');
      }
  };

P.s. using this can be tricky if you reference your methods. Read here.

JSFIDDLE.

score 0 · Answer 3 · answered Dec 12 '14 at 17:20

0

That's because this.doSomething isn't defined anywhere, so if you replace it with this.firstFunc you won't have that Error

answered Dec 12 '14 at 17:20

Arber Sylejmani

2,078
1
16
20

Suchit kumar · Answer 4 · 2014-12-12T17:43:41.600

0

you can try like this:

 var LibraryName = {

                someValue: 0,

                firstFunc: function(stuff) {

                    this.someValue = 99;
                    this.secondFunction();

                },

                secondFunction: function() {

                    this.doSomething(this.someValue);

                },
                doSomething: function(value){
                    alert(value);
  }

            }

LibraryName.firstFunc();// since the at the creation time of `object LibraryName` ,properties and methods are added we can directly call them using `.` operator.

edited Dec 12 '14 at 17:43

answered Dec 12 '14 at 17:23

Suchit kumar

11,809
3
22
44

1

Why should the OP try this? Why are you suggesting this solution? I'm sure the OP would appreciate an **explanation**. – Felix Kling Dec 12 '14 at 17:34
@FelixKling i have added comment based on my understanding. – Suchit kumar Dec 12 '14 at 17:48

Using the this keyword in my namespaced JavaScript

4 Answers4