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);
  }
}

You need to pass some parameters to `Name`. `container_id` is `undefined`, so `$(this.containerID)` won't work. — gen_Eric, Nov 08 '13 at 19:05
Related: http://stackoverflow.com/questions/310870/use-of-prototype-vs-this-in-javascript — cmbuckley, Nov 08 '13 at 19:05
Question 2: http://stackoverflow.com/questions/336859/var-functionname-function-vs-function-functionname — orhanhenrik, Nov 08 '13 at 19:05
P.S. Don't just say "This gives me an error", show us the ***exact error***. — gen_Eric, Nov 08 '13 at 19:05
with sample code provided this.userID would be undefined because you didn't pass any vaue for it to the constructor. It could be a problem with the `this` context. Maybe you should check this answer that explains about prototype and the value of `this` http://stackoverflow.com/a/16063711/1641941 — HMR, Nov 08 '13 at 19:15

DontVoteMeDown · Accepted Answer · 2013-11-08T19:24:00.513

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.

score 0 · Answer 2 · answered Nov 08 '13 at 19:12

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.

score 0 · Answer 3 · answered Nov 08 '13 at 19:17

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.

Javascript OOP - declaring methods of an object

3 Answers3