how to access javascript object variables in prototype function

Question

I have the following javascript

function person() {
  //private Variable
  var fName = null;
  var lName = null;

  // assign value to private variable
  fName = "Dave";
  lName = "Smith";
};

person.prototype.fullName = function () {
  return this.fName + " " + this.lName;
};

var myPerson = new person();
alert(myPerson.fullName());

I am trying to get an understanding of object orientated techniques in javascript. I have a simple person object and added a function to its prototype.

I was expecting the alert to have "Dave Smith", however I got "underfined underfined". why is that and how do I fix it?

score 13 · Accepted Answer · edited May 23 '17 at 12:25

Unfortunately you can't access a private variable. So either you change it to a public property or you add getter/setter methods.

function person() {

    //private Variable
    var fName = null;
    var lName = null;

    // assign value to private variable
    fName = "Dave";
    lName = "Smith";

    this.setFName = function(value){ fName = value; };
    this.getFName = function(){ return fName; }
};

see javascript - accessing private member variables from prototype-defined functions

But actually this looks like what you are looking for: Javascript private member on prototype

from that SO post:

As JavaScript is lexically scoped, you can simulate this on a per-object level by using the constructor function as a closure over your 'private members' and defining your methods in the constructor, but this won't work for methods defined in the constructor's prototype property.

in your case:

var Person = (function() {
    var store = {}, guid = 0;

    function Person () {
        this.__guid = ++guid;
        store[guid] = { 
            fName: "Dave",
            lName: "Smith"
        };
    }

    Person.prototype.fullName = function() {
        var privates = store[this.__guid];
        return privates.fName + " " + privates.lName;
    };

    Person.prototype.destroy = function() {
        delete store[this.__guid];
    };

    return Person; 
})();


var myPerson = new Person();

alert(myPerson.fullName());

// in the end, destroy the instance to avoid a memory leak
myPerson.destroy();

Check out the live demo at http://jsfiddle.net/roberkules/xurHU/

wil the `Person.prototype.fullName` inside the 'constructor' will be rewritten each construction? — Jeroen van Langen, Oct 18 '17 at 12:12

score 5 · Answer 2 · answered Jul 22 '11 at 02:04

When you call person as a constructor, a new object is created as if by new Object() and assigned to its this keyword. It is that object that will be returned by default from the constructor.

So if you want your instance to have properties, you need to add them to that object:

function Person() {

    // assign to public properties
    this.fName = "Dave";
    this.lName = "Smith";
};

Incidentally, by convention functions that are intended to be called as constructors are given a name starting with a capital letter.

score 2 · Answer 3 · answered Jul 22 '11 at 02:03

You're declaring those variables as local to the function, instead of making them part of the object. In order to put them in the instance, you've got to use 'this' in the constructor as well. For example:

function person() {
    this.fName = 'Dave';
    this.lName = 'Smith';
}

person.prototype.fullName = function () {
    return this.fName + " " + this.lName;
};

var myPerson = new person();

alert(myPerson.fullName());

score 0 · Answer 4 · answered Jul 22 '11 at 02:03

In the constructor you should assign your variables to this:

    this.fName = null;
    this.lName = null;

But then they are not private. JavaScript does not have private variables like a "classic" Object Oriented language. The only "private" variables are local variables. An alternative to the above is to assign getter/setter methods to this within the constructor.

how to access javascript object variables in prototype function

4 Answers4