this Patterns and Pitfalls

// Class Method Patterns
class MethodPatterns {
  private value: number = 0

  // Problem: Losing this in callbacks
  problemMethod() {
    setTimeout(function () {
      this.value++ // this is undefined
    }, 100)
  }

  // Solution 1: Arrow function
  arrowSolution() {
    setTimeout(() => {
      this.value++ // this is preserved
    }, 100)
  }

  // Solution 2: Bind method
  bindSolution() {
    setTimeout(
      function () {
        this.value++
      }.bind(this),
      100,
    )
  }

  // Solution 3: Local reference
  referenceSolution() {
    const self = this
    setTimeout(function () {
      self.value++
    }, 100)
  }
}

// Event Handler Patterns
class EventHandlerPatterns {
  private element: HTMLElement
  private clicks: number = 0

  constructor(elementId: string) {
    this.element = document.getElementById(elementId)!
    this.setupHandlers()
  }

  // Problem: Event handler losing this
  private setupProblemHandler() {
    this.element.addEventListener('click', function () {
      this.clicks++ // this refers to element
    })
  }

  // Solution 1: Arrow function
  private setupArrowHandler() {
    this.element.addEventListener('click', () => {
      this.clicks++
    })
  }

  // Solution 2: Bound method
  private handleClick() {
    this.clicks++
  }

  private setupBindHandler() {
    this.element.addEventListener('click', this.handleClick.bind(this))
  }

  // Solution 3: Class field with arrow function
  private clickHandler = () => {
    this.clicks++
  }

  private setupClassFieldHandler() {
    this.element.addEventListener('click', this.clickHandler)
  }

  private setupHandlers() {
    this.setupArrowHandler()
  }
}

// Method Chaining with This
class ChainableAPI {
  private value: string = ''

  append(str: string): this {
    this.value += str
    return this
  }

  prepend(str: string): this {
    this.value = str + this.value
    return this
  }

  clear(): this {
    this.value = ''
    return this
  }

  getValue(): string {
    return this.value
  }
}

// Mixed Context Operations
class MixedContexts {
  private value: number = 0

  async operationWithMixedContexts() {
    // Outer context
    const outerThis = this

    return new Promise((resolve) => {
      // Inner context
      function innerOperation() {
        outerThis.value++ // Need to use captured reference
      }

      innerOperation()
      resolve(outerThis.value)
    })
  }

  // Better solution using arrow functions
  async betterOperation() {
    return new Promise((resolve) => {
      // this is preserved in arrow functions
      this.value++
      resolve(this.value)
    })
  }
}

// Dynamic Method Assignment
class DynamicMethods {
  private methods: Map<string, Function> = new Map()

  register(name: string, method: Function) {
    // Problem: Method loses context when called
    this.methods.set(name, method)
  }

  registerBound(name: string, method: Function) {
    // Solution: Bind method to this instance
    this.methods.set(name, method.bind(this))
  }

  execute(name: string) {
    const method = this.methods.get(name)
    if (method) {
      return method()
    }
    throw new Error(`Method ${name} not found`)
  }
}

// Nested Method Definitions
class NestedMethods {
  private value: number = 0

  // Problem: Nested method loses context
  outer() {
    function inner() {
      this.value++ // this is undefined
    }
    inner()
  }

  // Solution 1: Arrow function
  outerWithArrow() {
    const inner = () => {
      this.value++
    }
    inner()
  }

  // Solution 2: Bind
  outerWithBind() {
    function inner() {
      this.value++
    }
    inner.bind(this)()
  }
}

// Partial Application with Context
class PartialApplication {
  multiply(a: number, b: number): number {
    return a * b
  }

  // Problem: Partial application loses context
  partial(method: Function, ...args: any[]) {
    return function () {
      return method.apply(this, args)
    }
  }

  // Solution: Preserve context with arrow function
  betterPartial(method: Function, ...args: any[]) {
    return () => {
      return method.apply(this, args)
    }
  }
}

// Method Borrowing Pitfalls
class MethodBorrowingPitfalls {
  name: string = 'instance'

  greet() {
    return `Hello from ${this.name}`
  }

  // Problem: Borrowed method loses context
  static borrowProblem(method: Function) {
    return method() // this is undefined
  }

  // Solution: Pass context
  static borrowSolution(method: Function, context: any) {
    return method.call(context)
  }
}

// Constructor Function Patterns
function ConstructorPatterns(this: any, value: number) {
  // Problem: Forgetting new
  if (!(this instanceof ConstructorPatterns)) {
    return new ConstructorPatterns(value)
  }

  this.value = value

  // Problem: Methods losing context
  this.getValue = () => {
    return this.value // Arrow function preserves this
  }

  this.increment = function () {
    this.value++
  }.bind(this) // Explicit binding
}

// Example Usage
function example() {
  // Chainable API
  const api = new ChainableAPI()
  const result = api.append('Hello').append(' ').append('World').getValue()
  console.log(result) // "Hello World"

  // Mixed Contexts
  const mixed = new MixedContexts()
  mixed.betterOperation().then((value) => {
    console.log(value) // 1
  })

  // Dynamic Methods
  const dynamic = new DynamicMethods()
  dynamic.registerBound('test', function () {
    return this
  })
  console.log(dynamic.execute('test'))

  // Method Borrowing
  const instance = new MethodBorrowingPitfalls()
  const greeting = MethodBorrowingPitfalls.borrowSolution(
    instance.greet,
    instance,
  )
  console.log(greeting) // "Hello from instance"
}