Objects, Classes and Bindings in JavaScript

by Eugene Manager

HTML

<button id="myNiceButton"> nice </button>
<button id="myNicerButton"> nicer </button>
<button id="myes6Button"> es6 </button>

JavaScript

// creating Class as a Function 
function Friend (name)
{
  this.name = name;
  this.sayName = function (){ 
    console.log(this.name);
  }
}
f = new Friend('Tim');

// creating object from declaration
var enemy = { 
  name: 'Tom',
  sayName: function (){
    console.log(this.name)
  }
}
enemy.extendingFuntionSayName = function() {
  console.log(this.name+' extention');
};

// console.log(f.name);

f.sayName();
enemy.sayName();

// add event listener on button click where 
// and making it trigger the function that BOUND to it's object

let buttonNice = document.getElementById('myNiceButton')
buttonNice.addEventListener('click', f.sayName.bind(f));

let buttonNicer = document.getElementById('myNicerButton')
buttonNicer.addEventListener('click', function(){ return f.sayName() });

let buttonEs6 = document.getElementById('myes6Button')
buttonEs6.addEventListener('click', ()=>{enemy.extendingFuntionSayName()} );