两个类一个引用函数到另一个不同的 this 值

Question

I have problem and I don't know how to solve it:

        this.bWords.push(word);
                    ^

TypeError: Cannot read property 'push' of undefined

here is my code:

function multiWords(words) {
    class AWords {
        constructor(words = []) {
            this.words = words;
            this.addWordFn = () => {};
        }

        setAddWordFn(fn) {
            this.addWordFn = fn;
        }

        passWords() {
            this.words.forEach(word => this.addWordFn(word));
        }
    }

    class BWords {
        constructor() {
            this.bWords = [];
        }

        addWord(word) {
            this.bWords.push(word);
        }
    }

    let x = new AWords(words);
    let y = new BWords();

    x.setAddWordFn(y.addWord);
    x.passWords();

    return y.bWords;
}


console.log(multiWords(["one", "two", "three"]));

Do you have any ideas why there is different this value? Many thanks Pati

Answer 1

It appears that the problem occurs here:

this.words.forEach(word => this.addWordFn(word));

because the function you've set for addWordFn here:

x.setAddWordFn(y.addWord);

Needs a different value of this than you are calling it with. You can fix it by binding the right value of this to your callback:

x.setAddWordFn(y.addWord.bind(y));

Remember that for regular functions, the value of this inside the function is determined by how the function is called. When you call a function with obj.method() , the this value inside of method() will be set to obj . So, you're calling addWord with the wrong this value because you've made it a method of some other object (that does not also have the data it needs) and are calling it off that object.