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

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.