Question Bank
JavaScript `this` and Arrow Function Code Traces
Difficulty: Medium
Six traces covering lost-`this` on extracted methods, arrow inherits-from-enclosing, function-as-constructor return, IIFE `this`, and static vs prototype methods.
JavaScript `this` and Arrow Function Code Traces
Six traces covering lost-`this` on extracted methods, arrow inherits-from-enclosing, function-as-constructor return, IIFE `this`, and static vs prototype methods.
1,063 views
34
What does the following code print, and what is the minimal fix?
Examples
Example 1:
Input: sayName()
Output: undefined
Explanation: Extracting student.getName into a bare reference detaches the method, so this is the global object (or undefined in strict mode) and this.name is undefined.What is the output of the following code, and why does the IIFE break the binding?
Examples
Example 1:
Input: obj.innerMsg()
Output: undefined
Explanation: The inner IIFE is invoked as a plain function with no receiver, so its this is the global object (or undefined in strict mode) and this.msg is undefined.What does the following code print? Why is the assignment Student.getName = ... the wrong approach?
Examples
Example 1:
Input: student1.getName()
Output: TypeError: student1.getName is not a function
Explanation: Student.getName attaches a static to the constructor function itself, not to Student.prototype, so instances cannot find getName.What does the following code print, and why do the two methods disagree?
Examples
Example 1:
Input: student.getName(); student.getLastName();
Output: foo; undefined
Explanation: Regular methods bind this at the call site, while arrow methods capture this lexically at definition time, so the arrow cannot see student.What does this code print? What does the constructor-style function return when called WITHOUT new?
Examples
Example 1:
Input: studentScoreInfo.score; studentScoreInfo.name
Output: 100; undefined
Explanation: Without new the function returns the literal { score }, and this.name silently writes to the global object instead of the returned object.What is the output of each call below? Pay attention to which functions are method shorthand vs arrow expressions.
Examples
Example 1:
Input: student.getName_1(); student.getName_2(); student.getThis_1(); student.getThis_2().name
Output: undefined; foo; enclosing this (top-level {} or globalThis); foo
Explanation: Arrow methods capture the surrounding lexical this at definition, while regular method shorthands bind this to the receiver at the call site.