Output Questions: this & Prototype Chain

The four this rules (highest to lowest priority):

new — this is the newly created object.
Explicit — call/apply/bind sets this explicitly.
Implicit — obj.method() → this is obj.
Default — bare function call → this is global/undefined (strict).

Arrow functions have no own this — they inherit from the enclosing lexical scope.

Q1 — implicit binding

Run it yourself

Edit and run. Output is captured from console.log. Async logs (setTimeout/Promise) appear in real execution order.

const obj = {
name: 'Alice',
greet() {
  return 'Hello, ' + this.name;
}
};

console.log(obj.greet()); // ?

const fn = obj.greet;
console.log(fn());        // ?

Console

Answer & why

"Hello, Alice"
"Hello, undefined"

obj.greet() — implicit binding: this is obj. fn() — the method is extracted into a plain variable, so when called as fn(), this is global (window) or undefined (strict). window.name is "" (empty string in browsers, undefined in Node strict).

Q2 — call, apply, bind

Run it yourself

Edit and run. Output is captured from console.log. Async logs (setTimeout/Promise) appear in real execution order.

function greet(greeting, punctuation) {
return greeting + ', ' + this.name + punctuation;
}

const user = { name: 'Bob' };

console.log(greet.call(user, 'Hello', '!'));      // ?
console.log(greet.apply(user, ['Hi', '?']));      // ?

const bound = greet.bind(user, 'Hey');
console.log(bound('.')); // ?

Console

Answer & why

"Hello, Bob!"
"Hi, Bob?"
"Hey, Bob."

call(thisArg, ...args) — sets this and spreads args.
apply(thisArg, argsArray) — same but args as array.
bind(thisArg, ...partialArgs) — returns a new function with this permanently bound. The 'Hey' is partially applied; '.' is the remaining argument.

Q3 — arrow function: no own this

Run it yourself

Edit and run. Output is captured from console.log. Async logs (setTimeout/Promise) appear in real execution order.

const obj = {
value: 42,
regular: function() {
  return this.value;
},
arrow: () => {
  return this.value;
}
};

console.log(obj.regular()); // ?
console.log(obj.arrow());   // ?

Console

Answer & why

42
undefined

regular() — implicit binding: this is obj, so this.value is 42. arrow() — arrow functions don’t have their own this. They inherit this from where they were defined — at the object literal level, which is the global scope. global.value is undefined.

Q4 — this in nested functions

Run it yourself

Edit and run. Output is captured from console.log. Async logs (setTimeout/Promise) appear in real execution order.

const obj = {
name: 'Outer',
getNameFn: function() {
  return function() {
    return this.name;  // ?
  };
},
getNameArrow: function() {
  return () => {
    return this.name;  // ?
  };
}
};

const fn1 = obj.getNameFn()();
const fn2 = obj.getNameArrow()();

console.log(fn1); // ?
console.log(fn2); // ?

Console

Answer & why

undefined
"Outer"

getNameFn() returns a plain function. When called as (), this is global → global.name is undefined. getNameArrow() returns an arrow function. Arrows inherit this from the enclosing scope — which is getNameArrow’s this, which is obj (called as obj.getNameArrow()). So this.name is "Outer".

Q5 — new binding

Run it yourself

Edit and run. Output is captured from console.log. Async logs (setTimeout/Promise) appear in real execution order.

function Person(name) {
this.name = name;
this.sayHi = function() {
  return 'Hi, I am ' + this.name;
};
}

const p1 = new Person('Alice');
const p2 = new Person('Bob');

console.log(p1.sayHi());              // ?
console.log(p2.sayHi());              // ?
console.log(p1.sayHi === p2.sayHi); // ?

Console

Answer & why

"Hi, I am Alice"
"Hi, I am Bob"
false

new Person('Alice') creates a fresh object, sets this to it, runs the constructor, and returns it. Each instance has its own name AND its own sayHi function (because it’s created inside the constructor — this wastes memory). If sayHi were on Person.prototype, instances would share one copy.

Q6 — prototype chain lookup

Run it yourself

Edit and run. Output is captured from console.log. Async logs (setTimeout/Promise) appear in real execution order.

function Animal(name) {
this.name = name;
}
Animal.prototype.speak = function() {
return this.name + ' speaks';
};

const a = new Animal('Dog');

console.log(a.name);                      // ?
console.log(a.speak());                   // ?
console.log(a.hasOwnProperty('name'));    // ?
console.log(a.hasOwnProperty('speak'));   // ?
console.log(a.__proto__ === Animal.prototype); // ?

Console

Answer & why

"Dog"
"Dog speaks"
true
false
true

name is an own property on a. speak is on Animal.prototype — not own. When you access a.speak, JS walks the prototype chain: a → Animal.prototype (found!). hasOwnProperty returns false for prototype-inherited properties. a.__proto__ points to Animal.prototype.

Q7 — class inheritance and super

Run it yourself

Edit and run. Output is captured from console.log. Async logs (setTimeout/Promise) appear in real execution order.

class Animal {
constructor(name) {
  this.name = name;
}
speak() {
  return this.name + ' makes a noise.';
}
}

class Dog extends Animal {
speak() {
  return super.speak() + ' Woof!';
}
}

const d = new Dog('Rex');
console.log(d.speak());                       // ?
console.log(d instanceof Dog);                // ?
console.log(d instanceof Animal);             // ?
console.log(Object.getPrototypeOf(Dog) === Animal); // ?

Console

Answer & why

"Rex makes a noise. Woof!"
true
true
true

Dog.speak() calls super.speak() which invokes Animal.prototype.speak with this still being the Dog instance (d). instanceof walks the prototype chain — d is both a Dog and an Animal. Object.getPrototypeOf(Dog) (not the instance — the class itself!) is Animal — classes inherit static methods too.

Q8 — this lost in callback

Run it yourself

Edit and run. Output is captured from console.log. Async logs (setTimeout/Promise) appear in real execution order.

class Button {
constructor(label) {
  this.label = label;
}

clickRegular() {
  setTimeout(function() {
    console.log('regular:', this.label); // ?
  }, 0);
}

clickArrow() {
  setTimeout(() => {
    console.log('arrow:', this.label);   // ?
  }, 0);
}
}

const btn = new Button('Save');
btn.clickRegular();
btn.clickArrow();

Console

Answer & why

regular: undefined
arrow: Save

clickRegular — the callback is a regular function. When setTimeout calls it, this is global/undefined. global.label is undefined. clickArrow — arrow function captures this from clickArrow’s scope (which is the Button instance), so this.label is 'Save'.

Q9 — bind priority over implicit

Run it yourself

Edit and run. Output is captured from console.log. Async logs (setTimeout/Promise) appear in real execution order.

function greet() {
return this.name;
}

const obj1 = { name: 'A', greet };
const obj2 = { name: 'B' };

const boundToObj2 = obj1.greet.bind(obj2);

console.log(obj1.greet());     // ?
console.log(boundToObj2());    // ?

Console

Answer & why

"A"
"B"

obj1.greet() — implicit binding → this is obj1. boundToObj2() — explicit bind wins over implicit. Even though greet was originally accessed via obj1, bind(obj2) permanently sets this to obj2.

Q10 — class static this

Run it yourself

Edit and run. Output is captured from console.log. Async logs (setTimeout/Promise) appear in real execution order.

class Counter {
static count = 0;

static increment() {
  this.count++;
  return this.count;
}
}

class SpecialCounter extends Counter {
static count = 100;
}

console.log(Counter.increment());        // ?
console.log(SpecialCounter.increment()); // ?
console.log(Counter.count);             // ?
console.log(SpecialCounter.count);      // ?

Console

Answer & why

Static methods are called on the class itself — this is the class (constructor function). Counter.increment() uses this = Counter, so Counter.count becomes 1. SpecialCounter.increment() — even though increment is inherited from Counter, this is SpecialCounter, so SpecialCounter.count becomes 101. Each subclass has its own count.

Q11 — prototype property vs own property

Run it yourself

Edit and run. Output is captured from console.log. Async logs (setTimeout/Promise) appear in real execution order.

function Foo() {
this.x = 1;
}
Foo.prototype.x = 2;
Foo.prototype.y = 3;

const f = new Foo();

console.log(f.x);  // ?
console.log(f.y);  // ?

delete f.x;
console.log(f.x);  // ?

Console

Answer & why

1
3
2

f.x — own property 1 shadows Foo.prototype.x = 2. f.y — not own, found on prototype: 3. After delete f.x removes the own property, the prototype’s x = 2 is revealed. delete only removes own properties.

Q12 — Object.create and prototype

Run it yourself

Edit and run. Output is captured from console.log. Async logs (setTimeout/Promise) appear in real execution order.

const proto = {
greet() { return 'Hello from ' + this.name; }
};

const obj = Object.create(proto);
obj.name = 'World';

console.log(obj.greet());                          // ?
console.log(Object.getPrototypeOf(obj) === proto); // ?
console.log(obj.hasOwnProperty('greet'));           // ?
console.log(obj.hasOwnProperty('name'));            // ?

Console

Answer & why

"Hello from World"
true
false
true

Object.create(proto) creates an object whose [[Prototype]] is proto. obj.greet() finds greet on the prototype; this is obj (implicit binding). greet is NOT an own property — it’s on the prototype. name IS an own property (set directly on obj).

The this resolution rules — ranked

1. new → fresh object. 2. bind/call/apply → explicit. 3. obj.method() → obj. 4. bare fn() → global/undefined. Arrow functions skip all rules — they inherit this lexically from where they were written, not called.

Output Questions: this & Prototype Chain

Q1 — implicit binding

Q2 — call, apply, bind

Q3 — arrow function: no own this

Q4 — this in nested functions

Q5 — new binding

Q6 — prototype chain lookup

Q7 — class inheritance and super

Q8 — this lost in callback

Q9 — bind priority over implicit

Q10 — class static this

Q11 — prototype property vs own property

Q12 — Object.create and prototype

References