The Many Ways “this” changed within my Code, with the Help of Debugger and Console.log.

class List {
//...
appendList(){
//...
}
renderListShowPage(e) {
//...
}
//...
}

“this”

class List {
//...
appendList(){
debugger
}
renderListShowPage(e) {
debugger
}
//...
}
class List {appendList(){
//...
let title = document.createElement("h1")
// time to add event listener
title.addEventListener("click", renderListShowPage)
//...
}
renderListShowPage(e) {
//...
}
//...
}
class List {appendList(){
//...
let title = document.createElement("h1")
title.addEventListener("click", this.renderListShowPage)
//...
}
renderListShowPage(e) {
debugger
this.appendPlayerForm()
}//...
}

.bind()

class List {appendList(){
//...
let title = document.createElement("h1")
title.addEventListener("click", this.renderListShowPage.bind(this)
//...
}
renderListShowPage(e) {
debugger
this.appendPlayerForm()
}//...
}
This triggers the renderListShowPage method.
This debugger allows us to pause the code at this point and work in the console.
This is the value of this which can be seen inside of the browser’s console

Arrow Functions

class List
appendList(){
title.addEventListener("click", function(){console.log(this)})
}
}
Inside the console.
class List
appendList(){
title.addEventListener("click", () => {console.log(this)})
}
}

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store