All, I am struggling with an error which says TypeError: curTemplete.addSection is not a function, Please forgive that I am not familiar with the js OO, Please help to review my problem. thanks.

The code looks like below.

Templete.js

LayoutTemplete=function(currentTmpContainer,templeteId,data)
{
    var curTemplete = this;

    curTemplete.addSection(null, null);//this line run with error above.


    this.addSection = function(uiItem, data) {
        alert('ddd');
    };
};

In the dom ready event.

function loadTempleteContent(templeteId)
{
    var jData=[{name: 'jerry'},{name: 'mike'},{name: 'claire'}];
    var tmp = new LayoutTemplete($("#currentTmpContainer"),templeteId,jData);
}

All, I am struggling with an error which says TypeError: curTemplete.addSection is not a function, Please forgive that I am not familiar with the js OO, Please help to review my problem. thanks.

The code looks like below.

Templete.js

LayoutTemplete=function(currentTmpContainer,templeteId,data)
{
    var curTemplete = this;

    curTemplete.addSection(null, null);//this line run with error above.


    this.addSection = function(uiItem, data) {
        alert('ddd');
    };
};

In the dom ready event.

function loadTempleteContent(templeteId)
{
    var jData=[{name: 'jerry'},{name: 'mike'},{name: 'claire'}];
    var tmp = new LayoutTemplete($("#currentTmpContainer"),templeteId,jData);
}

• javascript

• Got a JSFiddle? Also, what does your code do? It would be helpful if we knew – starbeamrainbowlabs Commented Mar 11, 2013 at 12:49
• What utility are you using for templates? It is most probable that the function isn't defined because you haven't loaded the templating utility (yet). But first, are you using an AMD loader? Because that would also affect WHEN the utility loads. – Prisoner ZERO Commented Mar 11, 2013 at 12:50
• 3 At the moment you call curTemplete.addSection, the property hasn't been defined yet. You do that only after the if statement. If you move the if statement after you assign the property it should be alright. – Felix Kling Commented Mar 11, 2013 at 12:50
• 1 put this.addSection before var curTemplete = this; – Sebas Commented Mar 11, 2013 at 12:52
• 1 Re your edit: Even without the if statement, the problem is still the same. You cannot call the function before it was created. Call it after you assigned it. – Felix Kling Commented Mar 11, 2013 at 12:56

2 Answers 2

You cannot call a function before it was defined. This has nothing to do with OOP. Consider this example:

foo();
var foo = function() {
    alert(42);
};

It will throw a similar error.

Define the function/the property before you access it:

this.addSection = function(uiItem, data) {
    alert('ddd');
};

this.addSection(null, null);

Better yet, define addSection on the prototype, so that you don't create a new function every time you create an instances of LayoutTemplete.

LayoutTemplete = function(currentTmpContainer,templeteId,data) {
    this.addSection(null, null);
};

LayoutTemplete.prototype.addSection = function(uiItem, data) {
    alert('ddd');
};

Felix is trying to tell you what your issue is, here it is explicitly:

var curTemplete = this;

curTemplete.addSection(null, null);//this line run with error above.

Here you reference and attempt to call curTemplete.addection, which has not been assigned a value yet, so it resolves to undefined. When the call is attempted, undefined is not a function (as the error tells you). addSection is not defined until the assignment below:

this.addSection = function(uiItem, data) {
    alert('ddd');
};

Now it's defined. Move the assignment before the call (and if you're going to assign this to a local variable, you may as well use it):

var curTemplete = this;
curTemplete.addSection = function(uiItem, data) {
    alert('ddd');
};
curTemplete.addSection(null, null);