Javascript OOP - declaring methods of an object

Question

This is the most basic JS object example I can think of that illustrates my questions.

Question 1.

How can I reference functions within a class so that in other code I could call a method? This gives me an error.

  var name1 = new Name();
  name1.render(); 

Question 2.

What is the difference between declaring functions in-line like this vs. using var getByID = function() ... ?

Example object:

function Name(user_id, container_id) {
  this.userID = user_id;
  this.containerID = container_id;
  this.firstName = null;
  this.lastName = null;

  function getByID(userID) {
    // An ajax call that takes a userID to get a name.
  }

  function setName() {
    // An ajax call to get the name from db.
    name_record = this.getByID(this.userID); ????? this returns an error that getByID is undefined.
    this.firstName = name_record.firstName;
    this.lastName = name_record.lastName;
  }

  function render() {
    $(this.containerID).val(this.firstName + ' ' + this.lastName);
  }
}

Answer 1

You can declare an object like you done in your second question, it's valid because a function is an object too. Or other ways like:

var Name = {
    render: function() {
    }
}

Name.render();

Or with prototype :

function Name() {
}

Name.prototype.render = function() {
}
// or
Name.prototype = {
    getByID: function() {
    },
    setName: function() {
    }
}
var n = new Name();

All these snipets are a valid object declaration.

Your second question may answer the first ones. When you declare a function like this:

function Name() {
    function render() {
    }
}
var n = new Name();

It is like render() be a private method. if you call outside the function name n.render() , you will see an error thrown because render is not recognized. But if you change to this...

function Name() {
    this.render = function() {
    }
}

... then n.render() will work like render() being a public method. See this and this for further information about public and private methods.

Now, the difference between declaring a function "in-line" or setting it to a variable is that with this:

function Name() {
}

You can do:

var n1 = Name();
var n2 = Name();
var nn = Name(); // and so on...

But with:

var n = function Name() {
}

Is that n() will work and Name() will not. Even var a = Name() will throw an exception.

Here's a good article about this subject that worth a read. I hope it can help.

Answer 2

Question 1: A "Class" in Javascript is nothing more than an object. An object has properties which you can access. Those properties are either variables, functions, or other objects. By declaring your function like:

  function render() {
    $(this.containerID).val(this.firstName + ' ' + this.lastName);
  }

You are declaring a function within the scope of function Name() but that function isn't a property of Name. It's just a private method. There are multiple ways you could make it a part of Name(), such as:

function Name(user_id, container_id) {
  this.userID = user_id;
  this.containerID = container_id;
  this.firstName = null;
  this.lastName = null;
  this.render = function() {
    console.log('hello world');
  }
}

var name1 = new Name();
name1.render();

Question 2: There is no difference. They are simply two different syntax's that achieve the same result. The second way (declaring a var and defining the function) immediately gives you a reference to the function, but that can be achieved just as well the first way.

Answer 3

Answer to your first question:

Functions getByID,setName and render are local to the constructor and cannot be called by class object. You have to use prototypal inheritance.

for eg.

function Name(user_id, container_id) {
this.userID = user_id;
this.containerID = container_id;
this.firstName = null;
this.lastName = null;
}

Name.prototype = {

getByID :function(userID) {
  // An ajax call that takes a userID to get a name.
}

setName:function() {
  // An ajax call to get the name from db.
  name_record = this.getByID(this.userID); 
  this.firstName = name_record.firstName;
  this.lastName = name_record.lastName;
}

render:function() {
  $(this.containerID).val(this.firstName + ' ' + this.lastName);
}
};

Answer to your second question:

in case of abc();//Error function abc(){ }

this function is created at run time , so you can call it only after declaration

however, this

abc();
var abc = function(){
};

is created at parse time so you can call it before declaration.