Question

在许多其他问题中，解释了为什么下面的“说”方法中的this并不总是引用Foo的对象。

class Foo {
    constructor(){
        this.bar = "baz";
    }

    Say(){
        alert(this.bar);
    }
}

我想确保Say()会导致相同的警报，无论其调用方式如何。我只控制上面的代码，而不控制下面的示例。

var f = new Foo();
f.Say();                                    //"baz"
element.addEventListener("click", f.Say);   //undefined
f.Say.call({bar: "no"});                    //"no"

我大致了解如何使用函数构建实现。

function Foo(){
    var bar = "baz";
    return {
        Say(){
            alert(bar);
        }
    }
}

可以使用类语法确保吗？

Answer 1

尝试一下：

class Foo {
    constructor(){
        this.bar = "baz";
        this.Say = this.Say.bind(this);
    }

    Say(){
        alert(this.bar);
    }
}

使用此方法，您可以强制Say方法的上下文始终为this。

实际上，您正在为其原型中的每个Foo实例添加一个名称与属性Say相同的新属性，因此该新属性将优先于原型，并将其设置为原型相同的功能，但上下文强制使用bind。

编辑：您可以使用以下方法将其自动化：

class Foo {
    constructor(){
        this.bar = "baz";
        Object.getOwnPropertyNames(this.constructor.prototype).forEach((i) => {
            if (typeof this.constructor.prototype[i] == "function" && this.constructor.prototype[i] != this.constructor) {
                this[i] = this.constructor.prototype[i].bind(this);
            }
        });
    }

    Say(){
        alert(this.bar);
    }
}
var f = new Foo();
f.Say();
f.Say.call({bar: "no"});

访问类方法中的对象属性

1 个答案: