We know the differences between arrow and regular functions in JavaScript. But sometimes I often meet difficult situations to predict the running results of JavaScript functions correctly.
So I have built simple test scripts to explain deeper about JavaScript functions and introduce here.
For the beginners, please visit here.
const case1 = { name: "Case1", fnArrow: () => { console.log("case1/fnArrow: ", this.name) }, fnRegular: function(){ console.log("case1/fnRegular: ", this.name) }, fnArrowOutside: () => { console.log("case1/fnArrowOutside: ", this.name) }, fnRegularOutside: function(){ console.log("case1/fnRegularOutside: ", this.name) }, } class Case2 { constructor() { this.name = "Case2" } fnArrow = () => { console.log("case2/fnArrow: ", this.name) } fnRegular(){ console.log("case2/fnRegular: ", this.name) } fnArrowOutside = () => { console.log("case2/fnArrowOutside: ", this.name) } fnRegularOutside(){ console.log("case2/fnRegularOutside: ", this.name) } } const case2 = new Case2() case1.fnArrow(); case1.fnRegular(); case2.fnArrow(); case2.fnRegular(); setTimeout(case1.fnArrowOutside, 100); setTimeout(case1.fnRegularOutside, 200); setTimeout(case2.fnArrowOutside, 300); setTimeout(case2.fnRegularOutside, 400); And this is a running result.
Top comments (0)