In JavaScript: Syntax difference between function & method definition within a class

Question

The Object class has both methods and functions meaning they both are accessed through Object.nameOfMethodOrFunction(). The following question What is the difference between a method and a function explains the difference between a method and and a function, but it doesn't explain how to create them within an object. For example, the code below defines the method sayHi. But how do you define a function inside the same object?

var johnDoe =
{
      fName : 'John',
      lName: 'Doe',
      sayHi: function()
      {
        return 'Hi There';
      }
};

Maybe do you mean members and are you asking is their a constructor for an object? — , Dec 30 '12 at 06:40
@scartag: a method is a function but not always the inverse. (square is a rectangle kind of philosophy). — Brad Christie, Dec 30 '12 at 06:45
@scartag: No, if you look at http://msdn.microsoft.com/en-us/library/ie/kb6te8d3%28v=vs.94%29.aspx, you will see that methods and function are listed separately. So, there is a difference. — user1888243, Dec 30 '12 at 06:45
in context of your question, they aren't really different. if you were to define a function inside same object, it would be a method, wouldn't it? — scartag, Dec 30 '12 at 06:46
I know the difference between function in a global scope and method within an object, but I didn't expect to be able to define both function and method within an object. So, I'm trying to understand how syntactically they are defined differently? — user1888243, Dec 30 '12 at 06:48
@scartag:In that case, Microsoft would not have bothered to list them separate from each other. — user1888243, Dec 30 '12 at 06:49
@user1888243 I see your point. i've taken a look at the link and it is a bit puzzling. I'll be waiting for any answers that clears that up. — scartag, Dec 30 '12 at 06:56
The two lists on MSDN could be better named "static methods" and "instance methods". — DCoder, Dec 30 '12 at 06:58
@DCoder: I'm beginning to think the same that they should name it static methods. Naming them function on MSDN page is just a misleading. — user1888243, Dec 30 '12 at 07:14

score 7 · Accepted Answer · answered Dec 30 '12 at 06:56

The following defines two classes, ClassA and ClassB, with equal functionality but different in nature:

function ClassA(name){
    this.name = name;
    // Defines method ClassA.say in a particular instance of ClassA
    this.say = function(){
        return "Hi, I am " + this.name;
    }
}

function ClassB(name){
    this.name = name;
}
// Defines method ClassB.say in the prototype of ClassB
ClassB.prototype.say = function(){
    return "Hi, I am " + this.name;
}

As shown below, they doesn't differ much in usage, and they are both "methods".

var a = new ClassA("Alex");
alert(a.say());
var b = new ClassB("John");
alert(b.say());

So now what you mean for "function", according to the msdn link that you gave as a comment, seems that "function" is just a "static method" like in C# or Java?

// So here is a "static method", or "function"?
ClassA.createWithRandomName = function(){
    return new ClassA("RandomName"); // Obviously not random, but just pretend it is.
}

var a2 = ClassA.createWithRandomName(); // Calling a "function"?
alert(a2.say()); // OK here we are still calling a method.

So this is what you have in your question:

var johnDoe =
{
      fName : 'John',
      lName: 'Doe',
      sayHi: function()
      {
        return 'Hi There';
      }
};

OK, this is an Object, but obviously not a class.

Thanks Alvin. Is that the standard definition of static methods? Does ClassA.createWithRandomName() have access to this or other data within ClassA? — user1888243, Dec 30 '12 at 07:07
@user1888243 well, because JavaScript isn't strongly typed, what I've called "Class" is actually just a function and has its prototype. Everything except `null` and `undefined` are `Object`s. Probably see this question and its answer: http://stackoverflow.com/questions/7694501/class-static-method-in-javascript — Alvin Wong, Dec 30 '12 at 07:15

Brad Christie · Answer 2 · 2012-12-30T16:10:14.940

0

var johnDoe = {
  fName: 'John',
  lName: 'Doe',
  sayHi: function(){
    function message(){ return 'Hi there'; }
    return message();
  }
};

That's about as good as you're going to get with the object declaration method of creating a 'class' in JavaScript. Just keep in mind that function is only valid within sayHi's scope.

However, if you use a function as a class structure, you have a little more flexibility:

var johnDoe = function(){
  this.publicFunction = function(){
  };
  var privateFunction = function(){
  };
};
var jd = new johnDoe();
jd.publicFunction(); // accessible
jd.privateFunction(); // inaccessible

(though both are really considered methods since they have access to the object's scope within).

edited Dec 30 '12 at 16:10

answered Dec 30 '12 at 06:43

Brad Christie

100,477
16
156
200

`jd->publicFunction()` should be `jd.publicFunction()` :) – DCoder Dec 30 '12 at 07:00
@DCoder: indeed; that's what I get for going between languages. ;p – Brad Christie Dec 30 '12 at 16:10

score 0 · Answer 3 · answered Dec 30 '12 at 07:04

Quoting Aaron with "A method is on an object. A function is independent of an object".

Logically a method is useless without a "this" defined.

Consider this example:

var johnDoe =
{
    fName: 'John',
    lName: 'Doe',
    sayHi: function () {
        return 'Hi There, my name is ' + this.fName;
    }
};

function sayHi2() {
    return 'Hi There, my last name is ' + this.lName;
}

//Will print Hi there, my first name is John
alert(johnDoe.sayHi());

//An undefined will be seen since there is no defined "this" in SayHi2.
alert(sayHi2());

//Call it properly now, using the oject johnDoe for the "this"
//Will print Hi there, my last name is Doe.
alert(sayHi2.call(johnDoe));

In JavaScript: Syntax difference between function & method definition within a class

3 Answers3