Frontend Fundamentals 11 (Wtf is `this`?)

1. Understanding this, apply, call, and bind with ChatGPT.

So I told GPT I was unsure of these concepts and made it test me with some questions then evaluate my answers. Here are my takeaways.

call uses comma-separated arguments, and appl…


This content originally appeared on DEV Community and was authored by ZhiHong Chua

1. Understanding this, apply, call, and bind with ChatGPT.

So I told GPT I was unsure of these concepts and made it test me with some questions then evaluate my answers. Here are my takeaways.

  • call uses comma-separated arguments, and apply uses array of arguments
  • this refers to (1) object itself in object methods, (2) newly created instance in constructor methods, and (3) global object (window) in global function non-strict mode
  • arrow functions inherit this from lexical context, while traditional functions inherit this from where it is called
  • bind() helps us attach a context to a function that will be used later

More questioning:

  • global mode is not preferred these days, but may be encountered when dealing with legacy code 
const user = {
  name: 'Bob',
  greet: function() {
    // Regular function in setTimeout: `this` is not bound to `user`.
    setTimeout(function() {
      console.log('Regular timer:', this.name);
    }, 1000);

    // Arrow function in setTimeout: inherits `this` from greet.
    setTimeout(() => {
      console.log('Arrow timer:', this.name);
    }, 1000);
  }
};

user.greet();
// Expected Output after 1 second:
// "Regular timer:" may log undefined (or error in strict mode).
// "Arrow timer: Bob" logs correctly.


This content originally appeared on DEV Community and was authored by ZhiHong Chua


Print Share Comment Cite Upload Translate Updates
APA

ZhiHong Chua | Sciencx (2025-02-10T05:01:39+00:00) Frontend Fundamentals 11 (Wtf is `this`?). Retrieved from https://www.scien.cx/2025/02/10/frontend-fundamentals-11-wtf-is-this/

MLA
" » Frontend Fundamentals 11 (Wtf is `this`?)." ZhiHong Chua | Sciencx - Monday February 10, 2025, https://www.scien.cx/2025/02/10/frontend-fundamentals-11-wtf-is-this/
HARVARD
ZhiHong Chua | Sciencx Monday February 10, 2025 » Frontend Fundamentals 11 (Wtf is `this`?)., viewed ,<https://www.scien.cx/2025/02/10/frontend-fundamentals-11-wtf-is-this/>
VANCOUVER
ZhiHong Chua | Sciencx - » Frontend Fundamentals 11 (Wtf is `this`?). [Internet]. [Accessed ]. Available from: https://www.scien.cx/2025/02/10/frontend-fundamentals-11-wtf-is-this/
CHICAGO
" » Frontend Fundamentals 11 (Wtf is `this`?)." ZhiHong Chua | Sciencx - Accessed . https://www.scien.cx/2025/02/10/frontend-fundamentals-11-wtf-is-this/
IEEE
" » Frontend Fundamentals 11 (Wtf is `this`?)." ZhiHong Chua | Sciencx [Online]. Available: https://www.scien.cx/2025/02/10/frontend-fundamentals-11-wtf-is-this/. [Accessed: ]
rf:citation
» Frontend Fundamentals 11 (Wtf is `this`?) | ZhiHong Chua | Sciencx | https://www.scien.cx/2025/02/10/frontend-fundamentals-11-wtf-is-this/ |

Please log in to upload a file.



There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.

Related Posts