Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

how to access javascript object variables in prototype function

Tags:

javascript

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?

like image 325
David Kethel Avatar asked Jul 22 '11 01:07

David Kethel


2 Answers

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/

like image 86
roberkules Avatar answered Sep 20 '22 11:09

roberkules


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.

like image 28
RobG Avatar answered Sep 20 '22 11:09

RobG