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

Question

I am new to javascript and don't know how to formulate this question. Please let me know if there are key terms or concepts that I should use. Here is an example of what I'm trying to do:

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

Now, obviously, if I return this.p, then it appendChild(myObj)works, and if I return this, then it works myObj.go(). But not both at the same time. Is there a way to do this, or am I going about it wrong?

I understand what I could return thisuse appendChild(myObj.p). But I think this makes me (or someone else) know what will be returned specifically instead of expecting a generic HTML object that can be added to the DOM.

, , 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';

. , .

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

Object.defineProperty(), constructor prototype MDN.

jsFiddle.

Answer 3

You can return an object, for example {object: this, element: this.p}. The caller will get access to the properties of the object:

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