CODEWITHSUNDEEP
javascriptsocket.io
prothan
prothan

Reputation: 520

Javascript object constructor

I know a little bit about Javascript, but am still finding my way. I saw a tutorial on Javascript working with Socket.IO. I was trying to follow along, but was a little confused by this Javascript constructor, with header Online code. I have not seen this format before. Is this equivalent to the code I wrote below it? Is it proper to create a constructor with the var self = {...} method?

//Online code
//-------------------------
var Player = function(id){
var self = {
    x:250,
    y:250,
    id:id
}
return self;
}

//Equivalent?
//------------------------
var Player = function(id){
    var self = this;
    this.x = 250;
    this.y = 250;
    this.id = id;
}

Upvotes: 1

Views: 62

Answers (3)

Fyodor Yemelyanenko
Fyodor Yemelyanenko

Reputation: 11848

In your example both funcions will ruturn the same object. So yes, they are equivalent in terms of result.

The differences are:

  1. First function can be called itself (var p1 = Player ("id")) or using new keyword var p2 = new Player ("id"). p1 and p2 will be objects with the same properties. But they will not be equal (p1 !== p2) as they are different objects.

Second function can be called only with new keyword var p3 = new Player ("id") Calling without new returns undefined

  1. First function cannot use prototype based inheritance. Second can.

The proper way of creating constructors is to use second form. It is considered good practice.

Upvotes: 1

Mark
Mark

Reputation: 92430

The primary difference between the two functions is the way they are linked (or not linked) to the prototype object of the function.

This method is links the returned object to Player.prototype:

var Player = function(id) {
  // var self = this; <== this doesn't do anything
  this.x = 250;
  this.y = 250;
  this.id = id;
}

let p = new Player('some id')
// linked to player protoype :
console.log(Object.getPrototypeOf(p) === Player.prototype) // true

// which means you get inheritence:
Player.prototype.talk = function() {
  console.log(this.id, "talking")
}
p.talk() // sees the talk method on Player

If you create a one-off object in the function and return that instead, it is no longer linked to the function prototype. It's just a regular old object returned from a function:

var Player = function(id){
  var self = {
      x:250,
      y:250,
      id:id
  }
  return self;
}

let p = Player("some id")
console.log(Object.getPrototypeOf(p) === Player.prototype) // false

Player.prototype.talk = function(){console.log("hello")}

// no inheritence
try {   
  p.talk()    // <= that's an error 
  } catch(err){
  console.log("Error:", err)
 }

Upvotes: 1

Pablo
Pablo

Reputation: 10602

If you create a constructor, you can re use it, any one can create an instance. If you create a new object, only that one you can use.

var Player = function(id){
    var self = this;
    this.x = 250;
    this.y = 250;
    this.id = id;
}
const player = new Player(id)

In this case, the properties are part of the object, so, each Player will have them

If you return an object, like:

var Player = function(id){
var self = {
    x:250,
    y:250,
    id:id
}
return self;
}

this value will be assined to who calls the method, but the instance will be an empty obect

Upvotes: 2

Related Questions