Javascript coding style

Question

I am a newbies to Javascript and recent need to support for it. May anyone help me to understand the following coding?

var proj = proj || {};
(function () {
    var functA = function () {
        var base = {};  // I don't understand from this line
        base.getString = this.getString;
        this.getString = function () {
            var strings = base.getString.call($this);
            return strings.concat(["ab","cd","ef"]);
        };
    }; 
})();

I am quite confused with the getString function. Can anyone kindly explain the purpose of it? Also, is there any name for such kind of coding style or can anyone lead me to some articles about this style of coding?

Many thanks.

Where did you did pick up this example? It seems, that this piece of code wants to illustrate a specific pattern, which can be used in a concrete context. We need to know this context to explain its tricky details to you. — Raoul
– Raoul, Commented Jul 15, 2014 at 15:43
This is part of the code that the previous programmer written in the company. Since there is no comment on the source, so it makes me very difficult to study it. — user3841544
– user3841544, Commented Jul 15, 2014 at 15:51
What is $this? Where (and how) is that functA subsequently used? — Bergi
– Bergi, Commented Jul 15, 2014 at 15:56
Okay. I think you are hiding some important information from ourselves. Otherwise the inner function "functA" can never be invoked, and thus makes the whole iife (immediatly invoked function expression, (function(){…})()) a waste. Therefore the only line left is the first line, which you claim to have understood. — Raoul
– Raoul, Commented Jul 15, 2014 at 16:00

Jason Baker · Accepted Answer · 2014-07-15 16:08:02Z

1

In Javascript, curly braces define both scope (as in method definitions) and object types (what Ruby people call hashes and Python people call dictionaries). The line you're confused about is declaring a variable to be an empty object.

After that, the programmer is adding a function to their new object. Javascript throws references around like crazy, so the programmer has set up base.getStrings as an alias pointing to the getStrings function they define later.

As for the purpose of the function itself, my best guess is that it's generating test data, but without understanding the entire code base it's impossible to say,

The line var strings = base.getStrings.call($this) seems to be seeding the method with strings from another scope. I can't know what $this refers to, but intuition tells me that it is a reference to the this of an outer scope, which also has a getStrings method.

The call() method executes the function and forces resolution of the this keyword to the first parameter, in this case $this. Since base.getStrings is aliased to this.getStrings, the programmer can use this trick to force the call to $this.getStrings, avoiding an infinite recursion.

edited Jul 15, 2014 at 16:08

answered Jul 15, 2014 at 15:41

Jason Baker

2,4833 gold badges24 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user3841544 Over a year ago

Thank you very much for your reply. I would like to ask further. How about the line: "var strings = base.getString.call($this);"? It try to call itself?

Jason Baker Over a year ago

The call() method executes the function with the this keyword forced to resolve to the value of the first parameter ($this, here). I suspect that the programmer is seeding the method with whatever comes out of $this.getStrings. I'm going to update my answer with a more detailed explanation of how I reached that conclusion

Bergi · Accepted Answer · 2014-07-15 16:05:55Z

This looks like a super-call in a mixin pattern to me. Imagine that this and $this refer to an object that already has a getString method that returns an array of strings.

Now, when functA is called on that object, it will create a base object, and store the original this.getString function on it. Then, it will overwrite the this.getString method with an own definition.

This new version of the method will call the original function (which is referred to as base.getString) on the $this object, and return its result but slightly modified (extended by the "ab","cd","ef" array elements).

var base = {};  // I don't understand this line

It's not strictly necessary actually. One could equally have just directly stored the original function in a variable, there is no need to create this base object:

function functA() {
    var original_getString = this.getString;
    this.getString = function new_getString() {
        var strings = original_getString.call(this);
        return strings.concat(["ab","cd","ef"]);
    };
}

Collectives™ on Stack Overflow

Javascript coding style

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related