BRUCE_FE JS Interview Notes - Deep Dive into JavaScript this Keyword

// Example analysis of this binding order
// 1. Arrow function has highest priority
const arrowFn = () => { console.log(this) };
arrowFn.call({ name: 'test' }); // Global object, call cannot change arrow function's this

// 2. new binding takes precedence over explicit binding
function Person(name) {
  this.name = name;
  console.log(this);
}
const boundPerson = Person.bind({ type: 'bound object' });
const person = new boundPerson('Bruce'); // { name: 'Bruce' }, ignores bind object

// 3. Explicit binding takes precedence over implicit binding
const obj = {
  name: 'object',
  display() { console.log(this.name); }
};
obj.display.call({ name: 'call object' }); // "call object", call overrides method's this

// 4. Implicit binding takes precedence over default binding
obj.display(); // "object", this points to obj

// 5. Default binding has lowest priority
function standalone() { console.log(this); }
standalone(); // Global object or undefined (strict mode)

// call example: borrowing array methods for array-like objects
function formatArgs() {
  // arguments is an array-like object without join method
  return Array.prototype.join.call(arguments, ' - ');
}
console.log(formatArgs('a', 'b', 'c')); // "a - b - c"

// apply example: finding array maximum
const numbers = [5, 3, 8, 1, 9, 4];
const max = Math.max.apply(null, numbers); // equivalent to Math.max(5, 3, 8, 1, 9, 4)
console.log(max); // 9

// bind example: preserving this context in event handlers
class Gallery {
  constructor() {
    this.images = ['img1.jpg', 'img2.jpg', 'img3.jpg'];
    this.currentIndex = 0;
    
    // using bind to fix this
    document.getElementById('next').addEventListener(
      'click', 
      this.showNext.bind(this)
    );
  }
  
  showNext() {
    this.currentIndex = (this.currentIndex + 1) % this.images.length;
    console.log('Now showing: ' + this.images[this.currentIndex]);
  }
}

// Differences in this binding between arrow and regular functions
const obj = {
  name: 'object',
  regularMethod() {
    console.log('Regular:', this.name);
    setTimeout(function() {
      console.log('Regular in timeout:', this.name); // undefined
    }, 100);
  },
  arrowMethod() {
    console.log('Arrow:', this.name);
    setTimeout(() => {
      console.log('Arrow in timeout:', this.name); // 'object'
    }, 100);
  }
};

obj.regularMethod();
obj.arrowMethod();

// Cannot change arrow function's this
const arrowFn = () => console.log(this);
arrowFn.call({ name: 'test' }); // Still points to global object

// Regular function's this can be changed
function regularFn() { console.log(this.name); }
regularFn.call({ name: 'test' }); // 'test'

// Question 1: Basic binding
const obj = {
  name: 'object',
  method() {
    console.log(this.name);
  }
};
obj.method(); // 'object' (implicit binding)

// Question 2: Method assignment
const method = obj.method;
method(); // undefined (default binding)

// Question 3: Callback function
setTimeout(obj.method, 100); // undefined (default binding)

// Question 4: Arrow function
const arrowObj = {
  name: 'arrow',
  method() {
    setTimeout(() => {
      console.log(this.name);
    }, 100);
  }
};
arrowObj.method(); // 'arrow' (arrow function inherits outer this)

// Question 5: Constructor
function Person(name) {
  this.name = name;
  this.sayHi = function() {
    console.log('Hi, ' + this.name);
  };
}
const person = new Person('Bruce');
person.sayHi(); // 'Hi, Bruce' (new binding)

// Answers:
// 1. this in obj.method() points to obj, because it's called as an object method (implicit binding)
// 2. this in method() points to global object (non-strict mode) or undefined (strict mode), because it's called directly (default binding)
// 3. this in setTimeout points to global object, because the callback is called directly (default binding)
// 4. this in arrow function points to arrowObj, because arrow function inherits this from outer environment (lexical binding)
// 5. this in person.sayHi() points to person instance, because it's called as a method of an object created with new (new binding)