Prototype vs __proto__

by bhupendra negi

JavaScript

//************ __PROTO__ **************//
const userFunctions = {
  showScore: function() {
    alert(this.score);
  },
  increment: function() {
    this.score++;
  }
}

// factory function
function setUser(name, score) {
  const obj = Object.create(userFunctions);
  obj.name = name;
  obj.score = score;
  return obj;
}

var user1 = setUser("John", 33);
user1.increment();
user1.showScore();
console.log(user1);

// *************** PROTOTYPE ****************** //
function SetUser(name, score) {
  this.name = name;
  this.score = score;
}

SetUser.prototype.showScore = function() {
  alert(this.score);
};

SetUser.prototype.increment = function() {
  this.score++;
}
var user2 = new SetUser("Shyam", 11);
user2.increment();
user2.showScore();
console.log(user2);

// ******** Issue in OOP JS  (that=this)=> arrow functions  ********//

function SetPlayer(name, score) {
  this.name = name;
  this.score = score;
}

SetPlayer.prototype.displayName = function() {
  alert(this.name);
};

SetPlayer.prototype.increment = function() {
  //var that = this
  function add() {
    // that.score++;
    // here this refes to window
    alert(this.score);
  }
  add1 = () => {
    alert(this.name)
  };
  add();
  add1();
}

var user3 = new SetPlayer("Cheetah", 56);
user3.increment();

// ******* ES 6 CLASSES ARE JUST SYNTATIC SUGAR ***********//

class UserCreator {
  constructor(name, score) {
    this.name = name;
    this.score = score;
  }
  increment() {
    alert(this.score);
  }
  displayName() {
    alert(this.name);
  }
}

var user4 = new UserCreator("ravi", 77);
console.log(user4);
user4.displayName();