create object prototype callable has object and function

Question

I'm trying to learn how to use protoyping in js.

First problem:

I want to do an function like $() in jQuery. When I call it like this Jo("header h1"), it work, but not when i call Jo.infos().

var Jo = function( selector ){

    return new Jo.init(selector);

};

Jo.prototype = {
    infos: function(){
        return "Hello! I'm Jo, I'm here to make your life easier";
    }
};

Jo.init = function( selector ){

    this.selector = selector;

};

Where is my error, how to fix it ?

Second problem:

The returned object is Jo.init but I want Jo.

Answer 1

I finaly find my solution:

(function( window, undefined ){

    var Jo = function( selector, context ){
        return new Jo.fn.init(selector, context);
    };

    Jo.fn = Jo.prototype = {
        Jo: "0.1",
        constructor: Jo,
        init: function( selector, context ){

            console.log( "$() request work" );

        }
    };

    Jo.infos = function(){

        console.log("info work");

    };

    Jo.fn.init.prototype = Jo.fn;

    if( typeof window === "object" && typeof window.document === "object" ) window.Jo = window.$ = Jo;

})( window );

Answer 2

There's no need to use __proto__ which is not standard. Use this:

var Jo = function( selector ){
    this.init(selector);
};

Jo.prototype = {
    infos: function(){
        return "Hello! I'm Jo, I'm here to make your life easier";
    },
    init : function( selector ){
           this.selector = selector;
    },
    constructor : Jo //reset constructor, because we are using object literal which override the original prototype object
};
var jo = new Jo('jojo');
console.log(jo instanceof Jo); //return true
console.log(jo.infos());    //display the Hello....

In your code, the instance you created is an instance of Jo.init because you return an new object explicitly. So this instance doesn't have access to Jo's prototype.

Answer 3

You need to set the prototype of your actual constructor, Jo.init, to the prototype object that you are going to use. Also, if you want to call Jo.infos() on the Jo function itself instead of on instances, you will have to place it there and not on the prototype.

function Jo(selector) {
    return new Jo.init(selector);
}
Jo.init = function(selector) {
    this.selector = selector;
};
Jo.init.prototype = Jo.prototype = {
    // instance methods here
    …
}

Jo.infos = function(){
    return "Hello! I'm Jo, I'm here to make your life easier";
};

Without an extra init function:

function Jo(selector) {
    if (! (this instanceof Jo)) return new Jo(selector);

    this.selector = selector;
}
Jo.prototype = {
    // instance methods here
    …
}

Jo.infos = function(){
    return "Hello! I'm Jo, I'm here to make your life easier";
};

Answer 4

__proto__ is the object that is used in the lookup chain to resolve methods

prototype is the object that is used to build __proto__ when you create an object with new

var Jo = function( selector ){
  return new Jo.init(selector);
};

Jo.__proto__= {                 //<---------------------  __proto__
  infos: function(){
      return "Hello! I'm Jo, I'm here to make your life easier";
  }
};

Jo.init = function( selector ){

  this.selector = selector;

};