当调用对象已经使用“ this”时，如何从静态方法中引用包含类？

Question

Using ES6/ES2015 and webpack, I am trying to wrap my head around the little monster that is the keyword this .

I have a class Edit containing a static method change(event) and within that method I am trying to make a recursive call to the method itself (depending on a given variable).

In most cases I could just call this.change(event) but here the keyword this is already occupied by the jquery object that was calling the function instead of the containing class.

The easiest solution would be to just call Edit.change(event) instead, but there must be a cleaner solution. Every programming language I have encountered so far has had some reference to its containing class built in.

I promise I have checked the docs and other threads on stackoverflow, but no one I found seems to address this particular problem.

// main.js
'use strict';

const $ = require('jquery');
const Edit = require('./Edit');

$(document).ready(() => {
    let thingsToAddToData = {
        whatToDo: // defined here depending on context
        someVariable: //defined here depending on context
        };
    $('table :input').change(thingsToAddToData, Edit.change);
}

and here the Edit class is defined

// Edit.js
class Edit {

    static change(event) {
        if(event.data.whatToDo === 'do_nothing'){
            return false;
        }
        if(event.data.whatToDo === 'do_this_important_thing'){
            // here some important stuff is done
            return true;
        }

        if(event.data.someVariable === 'special_case'){
            event.data.whatToDo = 'do_this_important_thing'

            // THIS IS THE LINE THAT GIVES ME HEADACHES
            return this.change(event);
        }
        // here some default stuff is done
    }
}

module.exports = Edit;

Answer 1

The easiest solution would be to just call Edit.change(event) instead, but there must be a cleaner solution

No, this is indeed what you need to use to always refer to the Edit class. There's nothing messy with it, just use it.

You could also use this.change(event) if you weren't using the method as an event handler. Make sure to call it as a method:

$('table :input').change(thingsToAddToData, Edit.change.bind(Edit));
// or
$('table :input').change(thingsToAddToData, e => Edit.change(e));

Answer 2

Either of the answers by @Bergi, should work (using Function.prototype.bind or () => {} ). However I think your problem is more structural. Since Edit.change is an event handler it doesn't make sense to call it directly, since it is supposed to be fired through events.

I would suggest firing the event again with some parameter changes ( http://api.jquery.com/trigger/ ):

replace Edit.change(event); with this.trigger(event);

That way there is no need for calling the handler directly, and you don't need to change the this context, thus keeping the code more transparent.

Answer 3

Static methods operate on the class instead of instances of the class, they are called on the class. There are two ways to call static methods:

<ClassName>.methodName() 

or

<class-instance>.constructor.methodName() 

In static methods, the this keyword references the class. You can call a static method from another static method within the same class with this.