Question

我是javascript的新手，不知道如何说出这个问题。如果我应该使用关键术语或概念，请告诉我。以下是我正在尝试做的一个例子：

function MyObject() {
    this.p = document.createElement("p");
    this.p.setAttribute("class", "awesome-p");

    this.span = document.createElement("span");
    this.p.appendChild(this.span);

    // do many things...

    this.go = function (class) {
        this.p.setAttribute("class", class);
        this.p.innerHTML = '';
        // do many other things...
    }

    return this;
}

myObj = new MyObject();
document.body.appendChild(myObj);
myObj.go(200);

现在，很明显，如果我return this.p，那么appendChild(myObj)就可以了，如果我return this那么myObj.go()就可以了。但不是两个在同一时间。有没有办法做到这一点，或者我是以错误的方式解决这个问题？

我意识到我可以return this然后使用appendChild(myObj.p)。但我认为这迫使我（或其他人）知道将要返回的内容，而不是期望可能附加到DOM的通用HTML对象。

此外，理想情况我更愿意使用myObj.go = 200执行任务，而不是myObj.go(200)，如果它属于此问题的范围。

请注意，设置宽度只是一个示例，'go（）'将执行的功能不仅仅是设置一个属性。

Answer 1

您的代码中存在一些错误，因此首先回答您的问题：有更好的方法来实现您的最终目标。要设置一个对象，我们使用Prototypical Inheretance，您应该将对象的方法附加到原型，如下所示：

var MyObject = function() {
    this.color = "blue";
    this.p = document.createElement('p');
    this.p.setAttribute("color", this.color);
    // do many things...
}

MyObject.prototype.go = function (color) {
    this.color = color;
}

请注意，不推荐使用color属性，而应使用style属性。新代码如下：

var MyObject = function() {
    this.color = "blue";
    this.p = document.createElement('p');
    this.p.style.color = this.color;
    // do many things...
}

MyObject.prototype.go = function (color) {
    this.color = color;
}

因为您希望对对象执行操作（更新内部p元素的颜色属性），所以仅通过设置属性无法实现此目的。您必须使用一种方法，不幸的是强制obj.go('red')接口。我们上面的代码只将color的内部MyObject属性设置为传递的color参数。我们需要另一种更新p元素的方法：

var MyObject = function() {
    this.color = "blue";
    this.p = document.createElement('p');
    this.p.style.color = this.color;
    // do many things...
}

MyObject.prototype.go = function (color) {
    this.color = color;
    this.updateColor();
}

MyObject.prototype.updateColor = function () {
    this.p.style.color = this.color;
}

然而，您可以简单地实现您想要的界面：

var MyObject = function() {
    this.color = "blue";
    this.p = document.createElement('p');
}
var obj = new MyObject();
obj.p.style.color = 'red';

阅读here了解有关原型继承的更多信息。它可以帮助您更好地理解对象的工作方式。

Answer 2

我猜你可以做这样的事情，虽然这只适用于现代浏览器。

function PElement (text) {
    this.p = document.createElement('p');
    this.p.innerHTML = text;
    this.p.color = 'blue';
    this.p.style.color = this.p.color;
    return this.p;
};

Object.defineProperty(PElement().constructor.prototype, 'go', {
    get: function () {
        return this.color;
    },
    set: function (x) {
        this.color = x;
        this.style.color = x;
        // You can execute more tasks here,
        // but the color (x) is the only argument,
        // and the context will be the P element
    }
});

MDN的{p> Object.defineProperty()，constructor和prototype。

A live demo at jsFiddle

Answer 3

你可以返回像{object：this，element：this.p}这样的对象。调用者将访问该对象的属性：

myObj = new MyObject();
document.body.appendChild(myObj.element);
myObj.object.go("red");

对象如何运作，就像它返回自己和另一个对象一样？

3 个答案: