context.js

(() => {
  
function Person (userName) {
  this.userName = userName;
  
  this.present = function () {
    console.log(`Hi, I'm ${this.userName}`);
  }
  
  this.greet = function(person){
   console.log(`Hello ` + person); 
  }
}
  
  
class PersonEs6 {
  
  constructor(userName){
    this.userName = userName;
  }
  
  present(){
    console.log(`Hi, I'm ${this.userName}`);
  }
  
  greet(person){
   console.log(`Hello ` + person); 
  }
}

const myInstance1 = new Person('John');
const myInstance2 = new Person('Jane');

document.addEventListener('click', myInstance1.present);
document.addEventListener('click', myInstance1.present.bind(myInstance1));
document.addEventListener('click', myInstance1.present.bind(myInstance2));
document.addEventListener('click', myInstance1.present.bind());
document.addEventListener('click', () => myInstance1.present());

document.addEventListener('click', myInstance1.greet);
document.addEventListener('click', myInstance1.greet.bind(myInstance1));
document.addEventListener('click', myInstance1.greet.bind(myInstance1, "Frodo"));
document.addEventListener('click', myInstance1.greet.bind(myInstance2, "Baggins"));
document.addEventListener('click', myInstance1.greet.bind());
document.addEventListener('click', () => myInstance1.greet("Sam"));
            
myInstance1.present.call(myInstance1);                       
myInstance1.present.call(myInstance2);

myInstance1.greet.call(myInstance1);                       
myInstance1.greet.call(myInstance2);
myInstance1.greet.call(myInstance1, "Bilbo");
})()