JavaScript Function（）和JavaScript对象之间的区别

Question

I'm trying to understand something in JavaScript which confuses me.

Let's say that I want to create a method Guard.ThrowError() in JavaScript, I have 2 approaches for this:

1. Using an object:

   This is basically the approach which I found on the net.

    var Guard2 = { ThrowIfNull: function() { throw new Error('sdmflsfk'); } }; 

2. Using a Function:

   When you create a class "Guard" in TypeScript and you let it compile to JavaScript, you get something like this:

    var Guard = (function() { function Guard() { } Guard.ThrowIfNull = function () { throw new Error('sdmflsfk'); }; return Guard; })(); 

Both functions can be called using Guard.ThrowIfNull() . I would like to know what's the difference and when choose I choose approach 1 over approach 2?

Thanks for your valuable feedback.

Kind regards

Answer 1

I would like to know what's the difference and when choose I choose approach 1 over approach 2?

The only difference is that Guard is a function in your second example and not a function in your first. So the second one can be called (in that code it doesn't actually do anything, but it can be called); the first can't.

Functions are objects in JavaScript, proper real objects, and so like all other objects, they can have additional properties added to them like your ThrowIfNull .

jQuery is a widely-used example of this: The main function, jQuery (aka $ ) is used for its function-ness:

$("#foo").on("click", function() { /*...*/ });

...and also for its object-ness, because it has various properties attached to it exactly as you've done with Guard :

$.ajax(/*...*/);

Answer 2

Both approach works because a function in javascript is also an object. The only difference is that you can call a function myFunction(); and you can't do it with a object.

Answer 3

Function approach is used to create classes in JS. Using this approach, you can have private and public properties. This cannot be achieve in object approach. All properties are public in object.

Sample Example

 function testClass(){ // Private member var a = "abc"; var b = "test"; function print(){ console.log(a,b); } return { print: print } } testClass().print(); // testClass().a This will throw error 

Answer 4

Guard2 - your approach 1 - is somehow a 'static' definition of an object. You can't instatiate another object of that type.

Guard - your approach 2 - is a mixed: it's a definition of an 'automatic class' Guard which gets instantiated. The result is almost the same as you can't instantiate new objects from that as well.

Usually, you would do it like this:

var Guard = function() {

  function Guard() { };

  Guard.ThrowIfNull = function () {
    throw new Error('sdmflsfk');
  }; 

};

var myGuard = new Guard();