How to implement chained method calls like jQuery?

Question

So I am (still) completely in love with the almighty jQuery, and I have my own growing library of utilities that I want to codify in a java-script object. And I would like t

Answer 1

I did something like this a while ago and it was a ton of fun to create!

If i remember correctly, To be able to use dot-operators, I had to return the object as part of the original function call. This way I could chain lots of stuff together like $(id).value('asdf').color('#ff0000')

function $(id){
    this.e = document.getelementbyid(id)
    me = this
    this.val = function (newval) {
        this.e.value = newval;
        return me;  // <- Important
    };
    return this;  //  <- Important
}

$("textbox1").val("New Value")    // changes textbox1's value to "New Value"

If it helps for reference: http://www.mikedoesweb.com/vis/

Answer 2

You are almost there:

new foo('hello').alertTest('world');

or if you don't like the new:

var bar = function bar(str) {
    this.str = str;    
};

bar.prototype = {
    alertTest :  function(additional){
        alert(this.str + ' ' + additional);
        return this;
    }
};

function foo(str) {
    return new bar(str);
}

foo('hello').alertTest('world');

Live Demo.

Answer 3

It is quite late to answer this question and also jquery is quite deprecated. But still people get asked this question quite frequently.

I would implement like below without using prototype -

const wrapper = (person) => ({
    sayGoodMorning:() => {
        console.log("Good Morning, "+person.name)
        return wrapper(person);
    },
    showAlert:() => {
       alert("Hey I am alert");
       return wrapper(person);
    },
    sayGoodEvening:() => {
        console.log("Good Evening, " + person.name)
        return wrapper(person);
    },
    sayGoodNight:() => {
        console.log("Good Night, " + person.name)
        return wrapper(person);
    },
  });
  const person = {name:"StackOverflow"};
  const $ = (obj) => wrapper(obj);
  const $example = $(person);
  
  $example
    .showAlert()
    .sayGoodMorning()
    .sayGoodEvening()
    .sayGoodNight();

Answer 4

Something I did really quick but you can relate to the essence of what we are trying to achieve here -

function ChainingObj() {
  if (!(this instanceof ChainingObj)) {
    return new ChainingObj();
  }
}

ChainingObj.prototype.first = function() {
  console.log("foo");
  return this; //important to return this.
}


ChainingObj.prototype.second = function() {
  console.log("bar");
  return this;
}

var a = ChainingObj().first().second();