Why do I have to use “this” to access in inner property of a function

Question

What is the difference between

function person(first_name, last_name) {
    this.first = first_name
    this.last  = last_name
}

and this:

function person(first_name, last_name) {
    var first = first_name
    var last  = last_name
}

Why only the first one makes person.first & person.last accessible outside the function?

Answer 1

when you write constructor function ( using new ) - you add properties using this.XXX

then you do :

var p = new Person('s','d');

and then you have access to p.first etc.

in the second example : youre not creating any properties..

youre only creating private variables.

so you cant access them...

Answer 2

By using this.something you're saying that THIS is an object and something is his property.

By using var, you're saying that it's just a variable and not a property.

More information about variable vs property: http://javascriptweblog.wordpress.com/2010/08/09/variables-vs-properties-in-javascript/

Answer 3

Because of function scope .

A variable lifetime is between the curly braces of the function. The this keyword allows to access the function properties outside of it.

Definitely take a look at this link: https://developer.mozilla.org/en/JavaScript/Reference/Functions_and_function_scope

Answer 4

The this keyword within a function is called the invocation context .

1) If you define your function as a member of an object (a method ):

myObject.someMethod = function() { this.x = 2; };

then the invocation context, this , is the object to which the method is being added, myObject . So after calling myObject.someMethod(); above, myObject.x is then 2. The member x is undefined until you call the method, unless you defined it before.

2) If you use your function as a constructor with the new keyword, then this refers to the new object that is being created:

function MyX() { this.x = 3; };
var myX = new MyX();

You'll then have property myX.x set to 3.

Note that I called my constructor MyX() , not myX() . You should call yours Person() , not person() . It's just a convention, but it is useful to indicate that a function is meant to be used as a constructor.

3) Finally, if you use this within a function that you call as neither a method nor a constructor, then this refers to the global object ( document or, equivalently, window ). Note however that if you are using javascript in strict mode (which you should do), this is undefined in such a situation, which means that you basically cannot use this in a function that is not a method or a constructor.

---

Your specific question refers to case 2), the constructor. this.x = 3 in the constructor just sets property x of the newly created object. After some object myX is created, you can then access and modify x externally as any other object property using myX.x .

Answer 5

'var' keyword make a variable scoped. In the last example var first and var last create variable accessible only in the scope of the function. You can see this as a local variable in a constructor.

Answer 6

when in javascript you declare a variable as

    var variable

it only exists inside the method where you declared it. If you want a variable to be accessible for everyone (that is, global) it has to be declared without the 'var' part

Answer 7

You do not necessarily have to use this . It'd also work fine if you've got a structure like this:

Person = function(first_name, last_name) {
    var first, last;
    create(first_name, last_name);    

    function create(first_name, last_name) {
        first = first_name
        last  = last_name
    }

    return {
        firstName: first,
        lastName: last
    }
}