Nov 24, 2008

In javascript, everything is what?

When I learned c# long ago, I was told everything in .net is object. I used javascript long before I learned c#. But I have never asked myself this question. Now I ask myself this question. I think everything in javascript is object too.

  1. Static object which can not create object
  2. Dynamic object which can create object, its name in javascript is function.

First let's talk about static object, it can be defined like this. and it can have member variable and method.

    var o = {}; 
    //or this, they are the same
    //var o = new Object(); 
    o.greet = function () {
        alert("hello");
    }

Now let's talk about function. I had problem to understand javascript at first, because function is too confusing. Since I came from OO world, I looked at javascript in the eye of OO developer, I tried to map javascript construct into oo construct. In the end, I found that this efford is counter productive, and I decided that javascript function is so unique. We don't have to compare it with c# or java language. But before I have this conclusion, here is my struggle. I think function of javascript can be many thing in traditional OO luanguage. It can be an object, namespace, class, constructor(factory), or function(method). It is such a loose concept.

function as object

Here is as sample an function as object, animal is a function, but it is also an object, you can attache member dyanmically.

    var animal = function() { };
    animal.name = "fred";
    animal.say = function() { alert(this.name); }
    animal.say();

function as class(constructor)

var Animal = function() {
    this.name = "fred";
    this.greet = function() {
    alert(this.name);
    }
}

var a = new Animal();
a.greet();

function as factory

var Animal = function() {
    var r = {};
    r.name = "fred";
    r.greet = function() { alert(this.name); }
    return r;
}

var a = Animal(); //no "new" keyword
a.greet();

function as function

function greet()
{
    alert("hello");
}

greet();

Javascript function is actual very simple, I shouldn't look at it in traditional view. Instead I should focus on its purpose. I think there are two purpose of function.

  1. To create object.

    As demo before, we can use tradition style consturctor, which return nothing. So it has be called using "new". Otherwise bad thing happend, it will be run in the context of global object. Or we can use factory function. It is safe, because it be called with and without "new".

  2. To do other thing.

But our function can have too thing mix purpose together, this is what jQuery does. For example, $("p.neat").addClass("ohmy").show("slow"); Each function does some job, and return an object, for next function call.

Static object and dyanmic object(function), they both have consturctor.

var o = {};
alert(o.constructor); //function Object(){[native code]}

var animal = function() { return {} };
alert(animal.constructor); //function Function(){ [native code] }
alert(Function.constructor); //function Function(){ [native code] }

But function has prototype, and static object does not have

var o = {};
alert(o.prototype); //undefined

var animal = function() { return {} };
alert(animal.prototype); ////[object Object]