一个对象怎么能像返回自身和另一个对象一样工作

How can an object function as if it returns itself and another object?

本文关键字：一个对象 工作 一样 怎么能 返回      更新时间：2023-09-26

我是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(("将执行更多功能，而不仅仅是设置一个属性。

你的代码中有几个错误，所以要回答你的第一个问题：有更好的方法来实现你的最终目标。要设置对象，我们使用原型固有，您应该将对象的方法附加到原型上，如下所示：

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')接口。我们上面的代码仅将 MyObject 的内部 color 属性设置为传递的 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';

阅读此处了解有关原型遗传的更多信息。它可以极大地帮助您理解对象的工作原理。

我想你可以做这样的事情，尽管这仅适用于现代浏览器。

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
    }
});

Object.defineProperty()，constructor和prototype在MDN。

jsFiddle的现场演示。

你可以返回一个对象，如 { object： this， element： this.p }。调用方将访问对象的属性：

myObj = new MyObject();
document.body.appendChild(myObj.element);
myObj.object.go("red");
相关文章：