this not bound

by fredericklim

HTML

<p id='a'></p>
<button type='button' onclick='document.getElementById("a").innerHTML = "hello"'>
Click</button>

JavaScript

let user = { name: "John" };
let admin = { name: "Admin" };

function sayHi() {
  document.getElementById('a').innerHTML = this.name;
}

//let sayHi = () => document.getElementById('a').innerHTML = this.name;

// use the same function in two objects
user.f = sayHi;
admin.f = sayHi;

// these calls have different this
// "this" inside the function is the object "before the dot"
user.f(); // John  (this == user)
//admin.f(); // Admin  (this == admin)