CODEWITHSUNDEEP
javascriptclass
user34537
user34537

Reputation:

Classes and functions in JS?

Here is some sample code.

When I call f1() inside of f2() it dies. I don't understand why. I also tried replacing this with Test.prototype and it fails the same way. After talking to a read I asked if i did var foo = new bar() and call a function on foo would this always be the the foo variable. His answer confused me.

How do classes/this work in JS? I only want the basics. I don't need virtual functions, inheritance, etc although static vars and functions may be easy to explain. I don't need to know how public/private works but as long as i can figure out how i can access public variables and functions i'll be fine for now.

var msg='';
try{

function Test(){
    var a='';
    var b=3;
    var c=4;
    this.f1=function(){
        msg+="f1\n";
    }
    this.f2=function(){
        msg+="f2a\n";
        f1();
        msg+="f2b\n";
    }
    this.f3=function(){
        msg+=b+"\n";
        b=5;
    }
    function f4(){
        c++;
    }
}

var t1 = new Test();
t1.f2();
t1.f3();
t1.f4();
console.log(t1.b);
}
catch(err)
{
    console.log(err);
}
console.log(msg);

Upvotes: 2

Views: 120

Answers (3)

Geuis
Geuis

Reputation: 42267

Other answers are correct: 

this.f2=function(){
    msg+="f2a\n";
    f1();
    msg+="f2b\n";
}

to:

this.f2=function(){
    msg+="f2a\n";
    this.f1();
    msg+="f2b\n";
}

Why:

I can tell from your terminology that you are coming from a different language background like Java or something.

Lets first get some simple things out of the way.

There are no classes in javascript (well, there is in an upcoming version but we don't need to talk about that at the moment). In javascript, we objects and the prototype chain.

"this" is defined by the object that contains the object.

Nearly everything is an object. Almost everything inherits from the primitive Object(). 

console.log( ({}).constructor.prototype ) // Object {}

Functions have prototypes, objects have constructors which have prototypes. I know, this can seem confusing at first.

console.log( ({}).prototype ) // undefined
console.log( function(){}.prototype ) // Object {}
console.log( (new Function()).prototype ) // Object {}

So for a very basic example, compare these two.

//eg1
var fn = function(){
   console.log( this ); // window
}

//eg2
var x = {
    fn: function(){
        console.log( this ); // Object {fn: function}
    }
};
x.fn();

Here we can see that in eg1, fn() is defined within the context of the global scope. (See Side Note below). In eg2, we can see that "this" refers to the containing object "x";

** Side note: In a browser, this is always "window". In an environment like node.js, its called something else and has a different set of objects and functions. Don't worry about it now, we'll stick to browsers.

Hope this helps.

Upvotes: 4

Ben McCormick
Ben McCormick

Reputation: 25718

You need to call this.f1() not f1()

f1 is not defined as a global function, its defined as a property on the object so you need to reference it through the object.

More on classes

As far as how classes work overall, JS uses prototypical inheritance. Any function can be used as a constructor if you put it after the new operator. USing the new operator causes this to be bound to the newly created object. So any references to this inside the constructor will be bound to that newly created object.

So your t1 object will have all of the functions attached to itself as methods on the new object.

t1.b will not return anything since b was not attached to the object. It was only defined as a local variable within the constructor, it was never bound to the object

Upvotes: 1

Mostafa Shahverdy
Mostafa Shahverdy

Reputation: 2725

change line 13 to this.f1(); then it work perfectly!

Upvotes: 1

Related Questions