Skip to main content
Tweeted twitter.com/StackCodeReview/status/1403275835067486209
Became Hot Network Question
edited tags
Link
formatting
Source Link
dfhwze
  • 14.2k
  • 3
  • 40
  • 101

If I use node.addEventListener('click',Wyg.Editor.nodeClickedEvent); then when node is clicked, nodeClickedEvent has this===node. Since nodeClickedEvent is a static function in a class, I want this to === Wyg.Editor, so I wrote a helper function to simplify it.

Helper Function:

function fixThisFunc(object,functionName){
    const fixedFunc = function(){
        object[functionName].apply(object,arguments);
    };
    return fixedFunc;
}

How it's used:

let node = document.getElementById('myFavoriteNode');
node.addEventListener('click', fixThisFunc(Wyg.Editor,'nodeClickedEvent'));

How it looked before:

node.addEventListener('click',
    function(event){
        Wyg.Editor.nodeClickedEvent(event);
    }
);
node.addEventListener('click',
    function(event){
        Wyg.Editor.nodeClickedEvent(event);
    }
);

The Wyg.Editor class is like:

Wyg.Editor = class {

    static nodeClickedEvent(event){
        const clickedNode = event.target;
        console.log(this); //successfully outputs the Wyg.Editor object/class
        this.getEditableNode(clickedNode);
    }
//there are more functions, of course
};

I'm looking for a review of the Helper Function fixThisFunc

Are there any particular problems I should be worried about? is there a better way to achieve this functionality?

If I use node.addEventListener('click',Wyg.Editor.nodeClickedEvent); then when node is clicked, nodeClickedEvent has this===node. Since nodeClickedEvent is a static function in a class, I want this to === Wyg.Editor, so I wrote a helper function to simplify it.

Helper Function:

function fixThisFunc(object,functionName){
    const fixedFunc = function(){
        object[functionName].apply(object,arguments);
    };
    return fixedFunc;
}

How it's used:

let node = document.getElementById('myFavoriteNode');
node.addEventListener('click', fixThisFunc(Wyg.Editor,'nodeClickedEvent'));

How it looked before:

node.addEventListener('click',
    function(event){
        Wyg.Editor.nodeClickedEvent(event);
    }
);

The Wyg.Editor class is like:

Wyg.Editor = class {

    static nodeClickedEvent(event){
        const clickedNode = event.target;
        console.log(this); //successfully outputs the Wyg.Editor object/class
        this.getEditableNode(clickedNode);
    }
//there are more functions, of course
};

I'm looking for a review of the Helper Function fixThisFunc

Are there any particular problems I should be worried about? is there a better way to achieve this functionality?

If I use node.addEventListener('click',Wyg.Editor.nodeClickedEvent); then when node is clicked, nodeClickedEvent has this===node. Since nodeClickedEvent is a static function in a class, I want this to === Wyg.Editor, so I wrote a helper function to simplify it.

Helper Function:

function fixThisFunc(object,functionName){
    const fixedFunc = function(){
        object[functionName].apply(object,arguments);
    };
    return fixedFunc;
}

How it's used:

let node = document.getElementById('myFavoriteNode');
node.addEventListener('click', fixThisFunc(Wyg.Editor,'nodeClickedEvent'));

How it looked before:

node.addEventListener('click',
    function(event){
        Wyg.Editor.nodeClickedEvent(event);
    }
);

The Wyg.Editor class is like:

Wyg.Editor = class {

    static nodeClickedEvent(event){
        const clickedNode = event.target;
        console.log(this); //successfully outputs the Wyg.Editor object/class
        this.getEditableNode(clickedNode);
    }
//there are more functions, of course
};

I'm looking for a review of the Helper Function fixThisFunc

Are there any particular problems I should be worried about? is there a better way to achieve this functionality?

Source Link
Reed
  • 239
  • 2
  • 9

Wrap a js function with a fixed this arg

If I use node.addEventListener('click',Wyg.Editor.nodeClickedEvent); then when node is clicked, nodeClickedEvent has this===node. Since nodeClickedEvent is a static function in a class, I want this to === Wyg.Editor, so I wrote a helper function to simplify it.

Helper Function:

function fixThisFunc(object,functionName){
    const fixedFunc = function(){
        object[functionName].apply(object,arguments);
    };
    return fixedFunc;
}

How it's used:

let node = document.getElementById('myFavoriteNode');
node.addEventListener('click', fixThisFunc(Wyg.Editor,'nodeClickedEvent'));

How it looked before:

node.addEventListener('click',
    function(event){
        Wyg.Editor.nodeClickedEvent(event);
    }
);

The Wyg.Editor class is like:

Wyg.Editor = class {

    static nodeClickedEvent(event){
        const clickedNode = event.target;
        console.log(this); //successfully outputs the Wyg.Editor object/class
        this.getEditableNode(clickedNode);
    }
//there are more functions, of course
};

I'm looking for a review of the Helper Function fixThisFunc

Are there any particular problems I should be worried about? is there a better way to achieve this functionality?