1
    <!doctype >
<html>
<meta utf="utf-8">
<header>
    <title>PRACTISE</title>
    <script >

function MakeMe(name , age , likes, shout){ //creates objects
    return {
        name : name,
        age : age,
        likes : likes,
        shout : function(){
            alert(shout + " " +last(this.likes));
        }
    }
}

function last(obj){ //gets last element of the array
    var el=obj.pop();
    obj.push(el);
    return el;
}

var dammy = MakeMe("Damilola" , 20, ["Jesus" , "Programming"], "Ewooooooo");//creates an object

dammy.shout();

var dara = MakeMe("Daramola" , 17, ["God" , "Gaming" , "Ed sheeran"] , "Leaveeeeeeeeeeee");//creates an object

// i wrote the following codes below to check if dammy and dara are really different objects
alert(last(dara.likes));
dara.shout();
dammy.likes.push("Taylor");
alert(last(dara.likes));
alert(last(dammy.likes));
dammy.shout();
    </script>
    </head>
</html>

My main question is : Is this an ok way of creating objects in javascript as oppose to the normal method of using a constructor and using the "new" keyword. If there is any side effect of creating objects using the above method. Thank You

    //Normal way is
function MakeMe(name ,age, likes, shout){
   this.name = name;
   this.age= age;
   this.likes={"me", "you", "us"};
   this.shout = function(){
                alert(shout + " " +last(this.likes));
            };
}

var dammy = new MakeMe("D" , 17, ["God" , "Gaming" , "Lorde"] , "Loveee");
user3622157
  • 35
  • 5

2 Answers2

3

There is a difference, and that difference lies in the prototype of the object you returned. The second way, with new makes an object that inherits from the prototype of the MakeMe function, while the first one with {} just creates a stand-alone object that is not related to MakeMe at all.

I've show that in two simplified examples.

function Make1(value) {
  return {prop: value};
}

// Construction using {} returns a simple object that inherits nothing from Make1.
var object1 = Make1('foo');

// So I can add methods all I want...
Make1.prototype.showMe = function() {
  alert(this.prop);
}

// But object1 won't get them, and the line below shows that the method is not assigned.
alert(typeof object1.showMe);

// ..  and the line below will fail.
object1.showMe();

function Make2(value) {
  this.prop = value;
}

// Construct 'new' returns an object that inherits everything from the prototype of Make2.
var object2 = new Make2('bar');

// I can now add a method to the prototype.
Make2.prototype.showMe = function() {
  alert(this.prop);
}

// And call that method for the object and any other object that was constructed
// this way. They all share this common behaviour now.
object2.showMe();

Now this isn't a problem per se. It just depends on what you need in a specific situation, and you can use both in your project.

I can't remember where I learned this, so I looked up some 'random' sources that seem to explain this prototyping well.

GolezTrol
  • 114,394
  • 18
  • 182
  • 210
  • 1
    Good Answer.. So both way creates objects. Which is the objective now , but use the new keyword style creates a kind of connection between the constructor and the created objects. Just similar to classes in java. Thank you. Its clearer now – user3622157 Dec 24 '14 at 08:31
  • Very similar to classes, though slightly different. See [prototype based vs. class based inheritance](http://stackoverflow.com/questions/816071/prototype-based-vs-class-based-inheritance) for a discussion. – GolezTrol Dec 24 '14 at 12:26
0

The difference is important at the prototype level. An object in javascript has a prototype chain. In this way you can see an object as an inheritor of each of its prototype. In the first case you have no prototype chain so no possible inheritance.

Take a look at: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Introduction_to_Object-Oriented_JavaScript

Gnucki
  • 5,043
  • 2
  • 29
  • 44