javascript - 创建对象原型可调用具有对象和功能

Question

我正在尝试学习如何在 js 中使用原型。

第一个问题：

我想做一个像$()jQuery 一样的函数。当我这样称呼它时Jo("header h1")，它可以工作，但当我打电话时却不行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;

};

我的错误在哪里，如何解决？

第二个问题：

返回的对象是Jo.init但我想要Jo的。

Answer 1

没有必要使用__proto__不标准的。用这个：

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....

在您的代码中，您创建的实例是 Jo.init 的实例，因为您显式地返回了一个新对象。所以这个实例无权访问 Jo 的原型。

Answer 2

您需要将prototype实际构造函数的 ,设置Jo.init为要使用的原型对象。此外，如果您想调用Jo.infos()函数Jo本身而不是实例，则必须将其放置在那里而不是原型上。

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

没有额外的init功能：

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 3

我终于找到了我的解决方案：

(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 4

__proto__是在查找链中用于解析方法的对象

prototype__proto__是使用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;

};