/*
 * JavaScript's 'this' keyword: A dynamic contextual reference.
 * Its value is determined by how the function is called, not where it's defined.
 * This dynamism frequently leads to unexpected behavior, especially in callbacks.
 */

const user = {
  name: "Alex",
  greet: function() {
    console.log(`Hello, my name is ${this.name}.`);
  },
  sayGoodbyeLater: function() {
    // Problematic: 'this' inside setTimeout callback refers to the global object (window/undefined in strict mode)
    setTimeout(function() {
      console.log(`Goodbye from ${this.name || 'an unknown entity'}.`);
    }, 100);
  },
  // A common pattern to preserve 'this' before arrow functions
  sayHelloLaterLegacy: function() {
    const self = this;
    setTimeout(function() {
      console.log(`Hello again from ${self.name}.`);
    }, 200);
  }
};

console.log("--- 'this' Dynamic Context Demonstration ---");
user.greet(); // 'this' refers to 'user'
user.sayGoodbyeLater(); // 'this' inside setTimeout is lost
user.sayHelloLaterLegacy(); // 'this' preserved via 'self = this'

// Demonstrating direct function call vs method call
const standaloneGreet = user.greet;
standaloneGreet(); // 'this' refers to global object (window) or undefined in strict mode

/*
 * Function.prototype.bind() creates a new function with a permanently bound 'this' context.
 * It also allows for partial application of arguments.
 * While effective, it introduces overhead due to the creation of a new function instance.
 */

const car = {
  brand: "Tesla",
  start: function(owner) {
    console.log(`${this.brand} starting for ${owner}.`);
  }
};

console.log("\n--- .bind() Demonstration ---");
const boundStart = car.start.bind(car, "Elon");
boundStart(); // 'this' is permanently bound to 'car', 'owner' is pre-filled

// Performance comparison setup: .bind() vs direct call vs arrow function
console.log("\n--- Performance Test: .bind() vs Arrow Function ---");

const iterations = 1_000_000;

// Test .bind() inside a loop (simulates common anti-pattern in React render methods)
console.time(".bind() creation and call");
for (let i = 0; i < iterations; i++) {
  const boundFunc = function() {
    return i;
  }.bind({ value: i }); // Simulates creating a new bound function each time
  boundFunc();
}
console.timeEnd(".bind() creation and call");

// Test .bind() once and reuse
const boundOnceFunc = function() {
  return this.value;
}.bind({ value: 0 });
console.time(".bind() once, then call");
for (let i = 0; i < iterations; i++) {
  boundOnceFunc(); // Reusing the same bound function
}
console.timeEnd(".bind() once, then call");

// Test arrow function (defined once)
const arrowFunc = (value) => value;
console.time("Arrow function call");
for (let i = 0; i < iterations; i++) {
  arrowFunc(i);
}
console.timeEnd("Arrow function call");

// Test regular function (defined once)
const regularFunc = function(value) {
  return value;
};
console.time("Regular function call");
for (let i = 0; i < iterations; i++) {
  regularFunc(i);
}
console.timeEnd("Regular function call");

/* Expected Output (values will vary based on hardware and JS engine):
 * .bind() creation and call: ~150-300ms (significant overhead due to new function creation)
 * .bind() once, then call: ~10-20ms (overhead mostly from function call itself)
 * Arrow function call: ~5-15ms
 * Regular function call: ~5-15ms
 *
 * Conclusion: Repeatedly calling .bind() in a hot path (like a render loop) is expensive.
 * Binding once and reusing is comparable to regular function calls, but still involves initial binding cost.
 */

/*
 * Arrow functions solve 'this' binding issues by adopting a 'lexical this'.
 * This means 'this' is resolved from the surrounding (enclosing) scope at definition time,
 * not execution time. They do not have their own 'this', 'arguments', 'super', or 'new.target'.
 */

class ButtonManager {
  constructor(name) {
    this.name = name;
    this.clicks = 0;
  }

  // Method using regular function, requires binding if passed as callback
  logClickRegular() {
    this.clicks++;
    console.log(`Regular: ${this.name} button clicked. Total: ${this.clicks}`);
  }

  // Method using arrow function, 'this' is lexically bound to ButtonManager instance
  logClickArrow = () => {
    this.clicks++;
    console.log(`Arrow: ${this.name} button clicked. Total: ${this.clicks}`);
  }
}

const myButton = new ButtonManager("Submit");

console.log("\n--- Arrow Function vs .bind() Context Handling ---");

// Simulate an event listener using a regular function (requires .bind())
const clickHandlerBind = myButton.logClickRegular.bind(myButton);
clickHandlerBind(); // Works correctly due to binding

// Simulate an event listener using an arrow function (naturally bound)
myButton.logClickArrow(); // Works correctly due to lexical 'this'

// --- Performance implications: instantiation vs. repeated binding ---
console.log("\n--- Performance Test: Arrow Function (Class Field) ---");

const iterations = 1_000_000;

class PerformanceTestClass {
  constructor() {
    this.value = 0;
  }
  // Arrow function as a class field: created once per instance
  arrowMethod = () => {
    this.value++;
  };

  // Regular method (need to bind externally or use .bind() if passed as callback)
  regularMethod() {
    this.value++;
  }
}

// Test arrow function (class field) - instantiated once, reused
const instanceArrow = new PerformanceTestClass();
console.time("Arrow function (class field) call");
for (let i = 0; i < iterations; i++) {
  instanceArrow.arrowMethod();
}
console.timeEnd("Arrow function (class field) call");

// Test .bind() on regular method - instantiated once, reused
const instanceBind = new PerformanceTestClass();
const boundMethod = instanceBind.regularMethod.bind(instanceBind);
console.time(".bind() on regular method (once bound) call");
for (let i = 0; i < iterations; i++) {
  boundMethod();
}
console.timeEnd(".bind() on regular method (once bound) call");

/* Expected Output:
 * Arrow function (class field) call: ~5-15ms
 * .bind() on regular method (once bound) call: ~5-15ms
 *
 * Conclusion: When instantiated once and reused, both are performant for calls.
 * The key difference is avoiding repeated .bind() calls in hot paths.
 */

/*
 * Strategic application dictates when to deploy arrow functions versus .bind().
 * Prioritize arrow functions for callbacks and class methods that need a fixed 'this'.
 * Reserve .bind() for specific scenarios or legacy compatibility.
 * Always measure performance rather than guessing.
 */

// Best Practice: Arrow function for event handlers in React-like components
class Counter {
  constructor() {
    this.count = 0;
  }

  // Arrow function as class field: 'this' is lexically bound to the instance.
  // No need to bind in the constructor or render method.
  increment = () => {
    this.count++;
    console.log(`Count: ${this.count}`);
  };

  render() {
    // In a UI framework, this would be passed directly to a button's onClick.
    return `<button onclick="this.increment()">Increment</button>`; // Simplified pseudo-HTML
  }
}

const myCounter = new Counter();
myCounter.increment(); // Simulates click
myCounter.increment();

// Specific Use Case for .bind(): When you need dynamic binding logic or legacy compatibility.
function processData(callback) {
  const data = { id: 101, status: 'processed' };
  // Simulate a scenario where 'this' needs to be explicitly set dynamically
  // This could be from a third-party library or specific context requirement
  callback.call(data, 'Successfully');
}

const reporter = {
  name: 'System Reporter',
  reportStatus: function(message) {
    console.log(`[${this.id || 'N/A'}] ${this.status || 'N/A'}: ${message} by ${reporter.name}`);
  }
};

// .bind() for a specific, one-time contextual modification of an existing function
const boundReport = reporter.reportStatus.bind({ id: 202, status: 'completed' });
boundReport('Data transfer'); // 'this' refers to {id: 202, status: 'completed'}

// Another .bind() scenario: Partial application (though arrow functions can do this too)
const greetUser = function(greeting, name) {
  console.log(`${greeting}, ${name}! This is ${this.context}.`);
};
const personalizedGreet = greetUser.bind({ context: 'system' }, 'Welcome');
personalizedGreet('Alice'); // 'Welcome, Alice! This is system.'

// Key Takeaway: Measure, don't guess. Use browser dev tools for profiling.
console.log("\n--- Profiling Reminder ---");
console.log("Utilize browser developer tools (Performance tab) or Node.js profiling to validate real-world impact.");
console.log("e.g., console.time('MyOperation'); /* code */; console.timeEnd('MyOperation');");