jQuery方法解析-extend方法

给jQuery添加静态方法

      function jQuery() {};
      // 给jQuery函数添加静态方法-开始
      jQuery.extend = function (obj) {
        // console.log(this);//这里面的this 就是构造函数jQuery对象
        for (const [key, value] of Object.entries(obj)) {
          this[key] = value;
        }
      }
      jQuery.extend({
        sum: function (a, b) {
          return a + b
        },
        reduce: function (a, b) {
          return a - b
        }
      })
      // 给jQuery函数添加静态方法-结束
      console.log(jQuery.sum(1, 1));//2
      console.log(jQuery.reduce(1, 1));//0

给jQuery添加实例方法

      function jQuery() {};
      // 给jQuery函数添加实例方法-开始
      jQuery.prototype.extend = function (obj) {
        console.log(this);//这里面的this就是new jQuery()出来的实例对象
        for (const [key, value] of Object.entries(obj)) {
          this[key] = value;
        }
      }
      let newJquery = new jQuery();
      newJquery.extend({
        sum: function (a, b) {
          return a + b
        },
        reduce: function (a, b) {
          return a - b
        },
        isDemo: function () {
          console.log('23');
        }
      })
      // 给jQuery函数添加实例方法-结束
      console.log(newJquery.sum(5, 6));//11
      console.log(newJquery.reduce(7, 8));//-1
      newJquery.isDemo();//23

综合

    function jQuery() {};
    jQuery.extend = jQuery.prototype.extend = function (obj) {
      /***
       * 通过这样写的this就需要看看到底是谁调用的
       * 如果是通过静态方法调用的，那么this指向的就是jQuery这个构造函数
       * 如果是通过实例方法（new jQuery()）方法调用的，那么this指向的就是这个new出来的实例对象
       * 好处：这样如果想添加静态方法只需要==>jQuery.extend({sum:function(){},reduce:function(){},...})
       * 如果想添加实例方法只需要
       * let newJquery = new jQuery();
       * newJquery.extend({sum:function(){},reduce:function(){},...})
       */
      for (const [key, value] of Object.entries(obj)) {
        this[key] = value;
      }
    }

    jQuery.extend({
      sum: function (a, b) {
        return a + b
      },
      reduce: function (a, b) {
        return a - b
      },
    })
    let newJquery = new jQuery();
    newJquery.extend({
      sum: function (a, b) {
        return a + b
      },
      reduce: function (a, b) {
        return a - b
      },
      isDemo: function () {
        return 'isdemo'
      }
    })
    console.log(jQuery.sum(1, 2));//3
    console.log(newJquery.sum(5, 5));//10
    console.log(newJquery.isDemo());//isdemo