javascript 'this' 链接代码

Question

我正在尝试开发一个像 jQuery 这样允许链接的库。我已经有了可以工作的函数，但我需要将它们链接在一起。请查看下面的代码并帮助我解决如何使用“this”访问正确的上下文并开发一个允许链接的类似 jQuery 的库。我希望“learnQuery()”像 jQuery() 一样运行。我在将 cssClass 方法链接在一起时遇到问题。

function learnQuery(elementSelector) {
  'use strict';
  var learnQueryContext = this;

  function cssPropProxy(property, value) {
    return cssProp(elementSelector, property, value);
  }

  function ajaxReqProxy(url, options) {
    return ajaxReq(url, options);
  }

  var cssClass = new CssClass();

  return {
    cssProp : cssPropProxy,
    ajaxReq : ajaxReqProxy,
    cssClass: {
      add: function(setClass) {
        cssClass.add(elementSelector, setClass);
        return learnQueryContext;
      },
      remove: function(deleteClass) {
        cssClass.remove(elementSelector, deleteClass);
        return learnQueryContext;
      },
      toggle: function(toggleClass) {
        cssClass.toggle(elementSelector, toggleClass);
        return learnQueryContext;
      },
      has: function(hasClass) {
        cssClass.has(elementSelector, hasClass);
        return learnQueryContext;
      }
    }

Answer 1

是的，在尝试学习同样的东西之前，我正在玩类似的东西。我还保存着这个，看看你是否能理解:

var $ = (function(){
    $ = function(selector){ return new MyQuery(selector); };

var MyQuery = function(selector){
    var nodes   = document.querySelectorAll(selector);
    this.each   = Array.prototype.forEach.bind(nodes);
    this.map    = Array.prototype.map.bind(nodes);
    var len = this.length = nodes.length;
    for(var i = 0; i < len; i++) this[i] = nodes[i];
};

$.fn = MyQuery.prototype = {
    addClass: function(classes){
        this.each(function(el){
            classes.forEach(function(className){
                el.classList.add(className);
            });
        });
        return this;
    },
    removeClass: function(classes){
        this.each(function(el){
            classes.forEach(function(className){
                el.classList.remove(className);
            });
        });
        return this;
    },
    addAttribute: function(newAttrib, value){
        this.each(function(el){
            el.setAttribute(newAttrib, value);
        });
        return this;
    },
    removeAttribute: function(attrib, value){
        this.each(function(el){
            el.removeAttribute(attrib);
        });
        return this;
    },
    remove: function(){
        this.each(function(el){
            el.remove();
        });
        return this;
    },
    on: function(type, callback){
        this.each(function(el){
            el.addEventListener(type, callback);
        });
        return this;
    },
    append: function(elem){
        this.each(function(el){
            el.appendChild(elem);
        });
        return this;
    },
    css: function(prop, value){
        this.each(function(el){
            el.style[prop] = value;
        });
        return this;
    }
}
return $;
})();