Sign Up

Sign Up to our social questions and Answers Engine to ask questions, answer people’s questions, and connect with other people.

Have an account? Sign In

Have an account? Sign In Now

Sign In

Login to our social questions & Answers Engine to ask questions answer people’s questions & connect with other people.

Sign Up Here

Forgot Password?

Don't have account, Sign Up Here

Forgot Password

Lost your password? Please enter your email address. You will receive a link and will create a new password via email.

Have an account? Sign In Now

You must login to ask a question.

Forgot Password?

Need An Account, Sign Up Here

Please briefly explain why you feel this question should be reported.

Please briefly explain why you feel this answer should be reported.

Please briefly explain why you feel this user should be reported.

Sign InSign Up

The Archive Base

The Archive Base Logo The Archive Base Logo

The Archive Base Navigation

  • SEARCH
  • Home
  • About Us
  • Blog
  • Contact Us
Search
Ask A Question

Mobile menu

Close
Ask a Question
  • Home
  • Add group
  • Groups page
  • Feed
  • User Profile
  • Communities
  • Questions
    • New Questions
    • Trending Questions
    • Must read Questions
    • Hot Questions
  • Polls
  • Tags
  • Badges
  • Buy Points
  • Users
  • Help
  • Buy Theme
  • SEARCH
Home/ Questions/Q 8975579
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Editorial Team
Asked: June 15, 20262026-06-15T18:55:02+00:00 2026-06-15T18:55:02+00:00

Are there any important/subtle/significant differences under the hood when choosing to use one of

  • 0

Are there any important/subtle/significant differences under the hood when choosing to use one of these four patterns over the others? And, are there any differences between the them when “instantiated” via Object.create() vs the new operator?

1) The pattern that CoffeeScript uses when translating “class” definitions:

Animal = (function() {

  function Animal(name) {
    this.name = name;
  }

  Animal.prototype.move = function(meters) {
    return alert(this.name + (" moved " + meters + "m."));
  };

  return Animal;

})();

and

2) The pattern that Knockout seems to promote:

var DifferentAnimal = function(name){

    var self = this;

    self.name = name;

    self.move = function(meters){
        return alert(this.name + (" moved " + meters + "m."));
    };

}

and

3) a similar, simple pattern I’ve often seen:

var DifferentAnimalWithClosure = function(name){

    var name = name;

    var move = function(meters){

    };

    return {name:name, move:move};

}

and

4) The pattern that Backbone promotes:

var OneMoreAnimal= ClassThatAlreadyExists.extend({

    name:'',
    move:function(){}

});

Update 1: Changed pattern #2 and added pattern #3 in response to Elias’ response // minor formatting

  • 1 1 Answer
  • 0 Views
  • 0 Followers
  • 0
Share
  • Facebook
  • Report

Leave an answer
Cancel reply

You must login to add an answer.

Forgot Password?

Need An Account, Sign Up Here

1 Answer

  • Voted
  • Oldest
  • Recent
  • Random
  1. Editorial Team
    Editorial Team
    2026-06-15T18:55:04+00:00Added an answer on June 15, 2026 at 6:55 pm

    Just to be clear: JS doesn’t know of classes, just objects and custom, self-defined constructor functions, but that’s besides the point.
    To answer your question in short: yes, there are some small and even some fairly large differences between the various ways of creating a new object you’re posting here.

    CoffeeScript:
    This is actually the most clear-cut and traditional way to create your own constructor, but it has been “optimized” in the sense that it’s been ready set-up to use (optional) closure variables.
    Basically, what this code does, is use an IIFE, to wrap both the constructor definition and the proptotype method assignments in their own, private scope, that returns a reference to the new constructor. It’s just clean, simple JS, no different from what you might write yourself.

    Knockout:
    Now this threw me a little, because to me, at least, the snippet you provide looks either like part of a module pattern, or a power constructor. But since you’re not using strict mode, omitting the new would still make for dangerous situations, and since the entire function goes trough the trouble of creating a new instance of DifferentAnimal, only to then construct a second object literal, assigning all properties of DifferentAnimal to that secondary object, I’d say you’re missing something. Because, truth be told, omitting the last return {}; statement here, would probably make no difference at all. Plus: as you can see, you’re declaring a method (move) in what is, in essence, a constructor. This means that every instance will be assigned its own function object move, rather then getting it from the prototype.
    In short: have another close look at where you got this snippet from, and double-check if this is the full version, because if it is, I can only see arguments against this.

    Using a variable, defined inside the constructor is simply: a closure, suppose your properties have a distinct initial state, determined by some arguments, passed to that constructor:

    function MyConstructor(param)
    {
         var paramInit = param/2;//or something
         this.p = paramInit;//this property can change later on, so:
         this.reInit = function()
         {//this method HAS to be inside constructor, every instance needs its own method
             this.p = paramInit;//var paramInit can't, it's local to this scope
         };
    }
    var foo = new MyConstructor(10);
    console.log(foo.p);//5
    foo.p = 'hi';
    console.log(foo.p);//hi
    foo.reInit();
    console.log(foo.p);//5
    console.log(foo.paramInit);//undefined, not available outside object: it's a pseudo-private property
    

    That’s all there is too it, really. When you see ppl using var that = this; or something, that’s often to create a reference to the main object that is available anywhere, without having to deal with the headaches of this (what does this reference? What should the method do when applied to an object other than the one it was originally intended for? etcetera…)

    Backbone:
    Here, we’re dealing with another case: extending objects (IE: using methods, properties of either an existing “class” (constructor) or a particular instance) is not the same as simply creating an object.
    As you well know, JS objects can be assigned new properties at any given time. Those properties can be removed, too. Sometimes, prototype properties can be redefined on the instance itself (masking the prototypal behaviour) etc… So it all depends on what you want the resulting object (the newly created object, that extends the given instance) to look like: do you want it to take all properties from the instance, or do you want both objects to use the same prototype somewhere down the line?
    Both of these things can be achieved by using simple JS, too, but they just take a bit more effort to write yourself. However, if you write, for example:

    function Animal(name)
    {
        this.name = name;
    }
    Animal.prototype.eat= function()
    {
        console.log(this.name + ' is eating');
    };
    

    That could be deemed the equivalent of writing:

    var Animal = Object.extend({name:'',eat:function()
    {
        console.log(this.name + ' is eating');
    }});
    

    A lot shorter, but lacking the constructor.

    new vs Object.create
    Well, that’s an easy one: Object.create just is a lot more powerful that new: you can define prototype methods, properties (including weather or not they are enumerable, writeable etc…) right at the time you need to create an object, instead of having to write a constructor and a prototype, or create an object literal and mess around with all those Object.defineProperty lines.
    The downsides: Some people still aren’t using ECMA5 compliant browsers (IE8 is still not quite dead). In my experience: it does become quite hard to debug sizeable scripts after a while: though I tend to use power-constructors more than I do regular constructors, I still have them defined at the very top of my script, with distinct, clear and quite descriptive names, whereas object-literals are things I just create “on-the-fly”. Using Object.create, I noticed I tend to create objects that are really a little too complex to qualify as actual object literals, as though they are object literals:

    //fictional example, old:
    var createSomething = (function()
    {
        var internalMethod = function()
        {//method for new object
            console.log(this.myProperty || '');
        };
        return function(basedOn)
        {
            var prop, returnVal= {};
            returnVal.myProperty = new Date();
            returnVal.getCreated = internalMethod;//<--shared by all instances, thx to closure
            if (!basedOn || !(basedOn instanceof Object))
            {//no argument, or argument is not an object:
                return returnVal;
            }
            for (prop in basedOn)
            {//extend instance, passed as argument
                if (basedOn.hasOwnProperty(prop) && prop !== '_extends')
                {
                    returnVal[prop] = basedOn[prop];
                }
            }
            returnVal._extends = basedOn;//<-- ref as sort-of-prototype
            return returnVal;
        };
    }());
    

    Now this is pretty verbose, but I’ve got my basic constructor ready, and I can use it to extend an existing instance, too. It might seem less verbose to simply write:

    var createSomething = Object.create(someObject, {getCreated:function()
    {
        console.log(this.myProperty);
    },
    myProperty:new Date()});
    

    But IMO, this makes it harder on you do keep track of what object is created where (mainly because Object.create is an expression, and will not be hoisted.
    Ah well, that’s far from a conclusive argument of course: both have their pro’s and con’s: I prefer using module patters, closures and power constructors, if you don’t that’s just fine.

    Hope this cleared up a thing or 2 for you.

    • 0
    • Reply
    • Share
      Share
      • Share on Facebook
      • Share on Twitter
      • Share on LinkedIn
      • Share on WhatsApp
      • Report

Sidebar

Related Questions

Are there any important differences between declaring <script type=text/javascript> </script> and <script language=javascript> </script>
Are there any recommended libraries, patterns or examples on how to implement Prefetching and/or
Is there any way to use Google's API to retrieve a user's current zipcode
I was wondering if there is any difference in performance (or any other important
Are there any important features in Rails or Django which do not exist in
Is there any java library that with given text (title) gets collection of important
What all events can be triggered programmatically using jQuery? Also is there any important
I have not seen any important TCP/IP server not use SO_REUSEADDR : Apache HTTP
Is there any important difference between using parentheses and angled brackets for texture sampler
Is there any ruby gem/ rails plugin available for parsing the resume and importing

Explore

  • Home
  • Add group
  • Groups page
  • Communities
  • Questions
    • New Questions
    • Trending Questions
    • Must read Questions
    • Hot Questions
  • Polls
  • Tags
  • Badges
  • Users
  • Help
  • SEARCH

Footer

© 2021 The Archive Base. All Rights Reserved
With Love by The Archive Base

Insert/edit link

Enter the destination URL

Or link to existing content

    No search term specified. Showing recent items. Search or use up and down arrow keys to select an item.