{ "title": "Context Testing Utility" }

class ContextTester {
    constructor(name) {
        this.name = name;
        this.context = 'ContextTester instance';
    }
    
    // Regular function - dynamic binding
    regularMethod() {
        return {
            name: this.name,
            context: this.context,
            thisType: typeof this,
            thisConstructor: this.constructor?.name || 'Unknown'
        };
    }
    
    // Arrow function - lexical binding
    arrowMethod = () => {
        return {
            name: this.name,
            context: this.context,
            thisType: typeof this,
            thisConstructor: this.constructor?.name || 'Unknown'
        };
    }
    
    // Utility to test both methods in different contexts
    testBothMethods() {
        console.log('=== Direct Method Calls ===');
        console.log('Regular method:', this.regularMethod());
        console.log('Arrow method:', this.arrowMethod());
        
        console.log('\n=== Assigned to Variables (Context Loss Test) ===');
        const regularRef = this.regularMethod;
        const arrowRef = this.arrowMethod;
        
        try {
            console.log('Regular function (assigned):', regularRef());
        } catch (error) {
            console.log('Regular function error:', error.message);
        }
        
        console.log('Arrow function (assigned):', arrowRef());
        
        console.log('\n=== Called with Different Context ===');
        const otherContext = { name: 'Other Object', context: 'Different context' };
        
        console.log('Regular method with call():', this.regularMethod.call(otherContext));
        console.log('Arrow method with call():', this.arrowMethod.call(otherContext));
    }
}

const tester = new ContextTester('TestObject');
tester.testBothMethods();

{ "title": "Function Type Detector" }

function detectFunctionType(fn) {
    // Convert function to string to analyze
    const fnString = fn.toString();
    
    // Check for arrow function syntax
    const isArrowFunction = fnString.includes('=>') && !fnString.startsWith('function');
    
    // Check if it's a bound function
    const isBoundFunction = fnString.includes('[native code]') && fn.name.startsWith('bound ');
    
    // Test if it can be used as constructor
    let canBeConstructor = false;
    try {
        new fn();
        canBeConstructor = true;
    } catch (e) {
        canBeConstructor = false;
    }
    
    return {
        type: isArrowFunction ? 'arrow' : 'regular',
        isArrowFunction,
        isBoundFunction,
        canBeConstructor,
        hasPrototype: fn.prototype !== undefined,
        name: fn.name || 'anonymous',
        length: fn.length // number of parameters
    };
}

// Test different function types
const regularFn = function test(a, b) { return a + b; };
const arrowFn = (a, b) => a + b;
const boundFn = regularFn.bind(null);
const classMethod = class { method() {} }.prototype.method;

console.log('Regular function:', detectFunctionType(regularFn));
console.log('Arrow function:', detectFunctionType(arrowFn));
console.log('Bound function:', detectFunctionType(boundFn));
console.log('Class method:', detectFunctionType(classMethod));

{ "title": "Context Preservation Utility" }

class ContextPreserver {
    static preserveContext(obj, methodName) {
        const originalMethod = obj[methodName];
        
        if (typeof originalMethod !== 'function') {
            throw new Error(`${methodName} is not a function`);
        }
        
        // Return bound version
        return originalMethod.bind(obj);
    }
    
    static createArrowWrapper(obj, methodName) {
        const originalMethod = obj[methodName];
        
        if (typeof originalMethod !== 'function') {
            throw new Error(`${methodName} is not a function`);
        }
        
        // Return arrow function wrapper
        return (...args) => originalMethod.apply(obj, args);
    }
    
    static compareBindingMethods(obj, methodName) {
        const original = obj[methodName];
        const bound = this.preserveContext(obj, methodName);
        const arrowWrapped = this.createArrowWrapper(obj, methodName);
        
        console.log(`=== Testing ${methodName} binding methods ===`);
        
        // Test with different contexts
        const testContext = { different: 'context' };
        
        console.log('Original method called directly:');
        try {
            console.log(original.call(testContext));
        } catch (e) {
            console.log('Error:', e.message);
        }
        
        console.log('\nBound method called with different context:');
        try {
            console.log(bound.call(testContext));
        } catch (e) {
            console.log('Error:', e.message);
        }
        
        console.log('\nArrow-wrapped method called with different context:');
        try {
            console.log(arrowWrapped.call(testContext));
        } catch (e) {
            console.log('Error:', e.message);
        }
    }
}

// Example usage
class TestClass {
    constructor(name) {
        this.name = name;
    }
    
    getName() {
        return `Name: ${this.name}`;
    }
}

const instance = new TestClass('Example');
ContextPreserver.compareBindingMethods(instance, 'getName');

{ "title": "Event Handler Context Fixer" }

class EventHandlerFixer {
    static fixMethodContext(obj, methodNames) {
        const fixed = {};
        
        methodNames.forEach(methodName => {
            if (typeof obj[methodName] === 'function') {
                // Create arrow function wrapper to preserve context
                fixed[methodName] = (...args) => {
                    return obj[methodName](...args);
                };
            }
        });
        
        return fixed;
    }
    
    static createSafeEventHandler(obj, methodName, ...args) {
        return (event) => {
            // Preserve both the original context and pass the event
            return obj[methodName].call(obj, event, ...args);
        };
    }
    
    // Simulate addEventListener behavior for testing
    static simulateEventListener(handler, eventType = 'click') {
        console.log(`Simulating ${eventType} event...`);
        
        // Create mock event object
        const mockEvent = {
            type: eventType,
            target: { tagName: 'BUTTON', id: 'test-button' },
            preventDefault: () => console.log('Default prevented'),
            stopPropagation: () => console.log('Propagation stopped')
        };
        
        try {
            const result = handler(mockEvent);
            console.log('Event handled successfully');
            return result;
        } catch (error) {
            console.log('Event handler error:', error.message);
        }
    }
}

// Example usage
class ButtonController {
    constructor(buttonId) {
        this.buttonId = buttonId;
        this.clickCount = 0;
    }
    
    handleClick(event) {
        this.clickCount++;
        console.log(`Button ${this.buttonId} clicked ${this.clickCount} times`);
        console.log('Event target:', event.target.tagName);
        return this.clickCount;
    }
    
    handleMouseOver(event, customMessage) {
        console.log(`Mouse over ${this.buttonId}: ${customMessage}`);
        return `Hovered: ${customMessage}`;
    }
}

const controller = new ButtonController('main-button');

// Test different approaches
console.log('=== Testing Event Handler Context ===');

// Wrong way - context lost
const wrongHandler = controller.handleClick;
console.log('\n1. Direct assignment (wrong):');
EventHandlerFixer.simulateEventListener(wrongHandler);

// Right way - context preserved
const rightHandler = EventHandlerFixer.createSafeEventHandler(
    controller, 
    'handleClick'
);
console.log('\n2. Using context fixer:');
EventHandlerFixer.simulateEventListener(rightHandler);

// With additional arguments
const handlerWithArgs = EventHandlerFixer.createSafeEventHandler(
    controller, 
    'handleMouseOver', 
    'Custom hover message'
);
console.log('\n3. Handler with additional arguments:');
EventHandlerFixer.simulateEventListener(handlerWithArgs, 'mouseover');

{ "title": "this Binding Debug Helper" }

class ThisBindingDebugger {
    static analyzeThisBinding(fn, context, ...args) {
        console.log('=== this Binding Analysis ===');
        console.log('Function name:', fn.name || 'anonymous');
        console.log('Function type:', fn.toString().includes('=>') ? 'arrow' : 'regular');
        
        // Test different invocation methods
        const tests = [
            {
                name: 'Direct call',
                test: () => fn(...args)
            },
            {
                name: 'Call with context',
                test: () => fn.call(context, ...args)
            },
            {
                name: 'Apply with context',
                test: () => fn.apply(context, args)
            },
            {
                name: 'Bound to context',
                test: () => fn.bind(context)(...args)
            }
        ];
        
        tests.forEach(({ name, test }) => {
            console.log(`\n--- ${name} ---`);
            try {
                const result = test();
                console.log('Result:', result);
            } catch (error) {
                console.log('Error:', error.message);
            }
        });
    }
    
    static createThisInspector() {
        return {
            regular: function() {
                return {
                    thisValue: this,
                    thisType: typeof this,
                    isWindow: this === globalThis,
                    isUndefined: this === undefined,
                    hasOwnProperty: typeof this?.hasOwnProperty === 'function'
                };
            },
            
            arrow: () => {
                return {
                    thisValue: this,
                    thisType: typeof this,
                    isWindow: this === globalThis,
                    isUndefined: this === undefined,
                    hasOwnProperty: typeof this?.hasOwnProperty === 'function'
                };
            }
        };
    }
}

// Demo the debugging capabilities
const inspector = ThisBindingDebugger.createThisInspector();
const testContext = { name: 'Test Context', type: 'object' };

console.log('=== Regular Function Analysis ===');
ThisBindingDebugger.analyzeThisBinding(inspector.regular, testContext);

console.log('\n=== Arrow Function Analysis ===');
ThisBindingDebugger.analyzeThisBinding(inspector.arrow, testContext);