Question

我试图让我的代码更具可读性，并且与我附加到原型的构建和事件对象一起变得奇怪。有没有办法做到这一点？

function Something(){
    this.$container = $('<div>');

    return this;
}

Something.prototype.build = {
    list: function(){
        this.$container.append(...);
    }
}

目前发生的情况是build.list调用this，this引用build对象，而不是Something对象。

我无法通过这种方式找到另一种方式来使用它，而无需将所有内容重命名为buildList，buildComponentArray等等。语义可能。

Answer 1

这是一种可能的解决方案

function Something(){
    this.$container = "<div></div>";

    //this creates a new object in the prototype chain for every instance
    this.build = Object.create(this.build);
    for (var prop in this.build) {
        if (this.build.hasOwnProperty(prop) && typeof this.build[prop] === "function") {
            this.build[prop] = this.build[prop].bind(this);
        }
    }
    return this;
}

Something.prototype.build = {
    list: function(){
        console.log(this.$container);
    }
}

基本上，您将this.build对象中的每个函数绑定到绑定到this的函数。您可以在实用程序函数中提取它，然后将所需的所有嵌套对象绑定到此。我想通过操纵/构建原型链也一定是可能的，但我还没有找到它。

我知道你们大多数人都建议重构，但我想把它放在那里只是为了让你有一套完整的解决方案。

修改

正如所指出的，您需要将build接口移动到构造函数，以便正确绑定this。此解决方案只是一种方法，无需移动代码即可完成此操作。

解决方案，不使用Object.create

这个更干净，更明确地陈述它的作用而不会弄乱原型。

function Something(){ this.$container = "<div></div>"; var build = this.build; this.build = {}; for (var prop in build) { if (build.hasOwnProperty(prop) && typeof build[prop] === "function") { this.build[prop] = build[prop].bind(this); } } return this; } Something.prototype.build = { list: function(){ console.log(this.$container); } }

原型子对象，它不引用基础对象

1 个答案: