How to get the instance of the top/parent object in a javascript Function?

Question

I am implementing a method extension library of prototype, and if I do it simply everything works perfectly as you can see in the simple example below:

String.prototype.append = function(value) {
  // aqui o this é a instancia da String. Ok!
  return this.toString() + value;
};

document.getElementById('result').textContent = "Concatena com ".append("isto!");

<p id="result">
</p>

But to avoid overwriting methods of prototype, created an object within the prototype to register these methods, but with this the scope of the method is modified and the this is no longer a reference to the String, as can be seen in the following example:

String.prototype.extencion = {
  append: function(value) {
    // aqui o this não é mas uma instancia da String. Fail =(!
    // Como pegar a instancia do objecto pai?
    return this.toString() + value;
  }
};

document.getElementById('result').textContent = "Concatena com ".extencion.append("isto!");

<p id="result"></p>

Question

It is possible to recover the instance of the parent object in a function in the child object?

Answer 1

Unfortunately what you want is not possible. The object you created is a member of the prototype of String, then the most you could (although I believe even that is not possible) would be to get a reference to this prototype - but not to the string that originated the access to it. For once you’ve climbed the chain of prototypes into the field:

"Concatena com ".extencion

Reference to original string has been lost forever...

In the case of methods the reference still exists in the form of this, but not on access to fields, so I usually use closures when I need to do something like this (although I don’t know if it’s a good idea even to do it or not). Example:

String.prototype.extencion = function() {
  return {
    append: (function(value) {
      return this.toString() + value;
    }).bind(this) // aqui o this é amarrado com o objeto original
  };
};

document.getElementById('result').textContent = "Concatena com ".extencion().append("isto!");

<p id="result"></p>

A disadvantage of this method is that it creates a new object with each function invocation... You could save it for each instance, but then there is a waste of memory that can become significant (depending on how it is used). That’s why I said I don’t know if it’s a good idea. A middle ground - not so convenient, but without the problems mentioned above - is to do it in the "jQuery style":

var extensoesString = {
  append: function(_, value) {
    return this.toString() + value;
  }
};

String.prototype.extencion = function(funcao) {
  return extensoesString[funcao].apply(this, arguments);
};

document.getElementById('result').textContent = "Concatena com ".extencion("append", "isto!");

<p id="result"></p>

Answer 2

You can create a Type parallel (superString in the example below) and put your methods there. To do this you copy the String prototype and pass your strings through the new Type you created. The idea is like this:

var superString = (function () {
    // constructor
    function MyString(str) {
        this._str = str;
    }

    // criar uma cópia para não escrever métodos na String nativa
    MyString.prototype = Object.create(String.prototype);

    // funcionalidade "append"
    MyString.prototype.append = function (value) {
        return this.toString() + value;
    };

    // é preciso sobreescrever estes métodos... 
    MyString.prototype.toString = function () {
        return this._str;
    };

    MyString.prototype.valueOf = function () {
        return this._str;
    };

    Object.defineProperty(MyString.prototype, 'comprimento', {
        get: function () {
            return this._str.length;
        }
    });
    return MyString;
})();


var str = new superString('Concatena com ');

document.getElementById('result').textContent = str.append('isto!');
console.log(str.comprimento); // 14

jsFiddle: http://jsfiddle.net/f2gzm6dx/

Some notes:

• I had to rewrite the native methods .valueOf () and .toString () to work otherwise would give error.
• to re-create a type property .length is theoretically possible, but Chrome enters an infinite loop, so I created a property comprimento with a getter to give what is expected.

Another solution using the same idea, regardless of the String prototype, would already allow the property .length and it would be simpler:

var superString = (function () {
    // constructor
    function MyString(str) {
        this._str = str;
    }

    // funcionalidade "append"
    MyString.prototype.append = function (value) {
        return this._str.toString() + value;
    };

    Object.defineProperty(MyString.prototype, 'length', {
        get: function () {
            return this._str.length;
        }
    });
    return MyString;
})();


var str = new superString('Concatena com ');

document.getElementById('result').textContent = str.append('isto!');
console.log(str.length); // 14

jsFiddle: http://jsfiddle.net/93xc49Lm/