MathJaxをデバッグしてJavaScriptの理解を深める ページ3

VScodeで簡易WebServerの元でデバッグに戻る。

概要

　MathJaxをデバッグしてJavaScriptの理解を深める ページ2の続きです。

[1] [2] [3] [4]

__webpack_modules__[265].call(r.exports, r, r.exports, __webpack_require__)

265:
function(t, e, r) {
  var n, o = this && this.__extends || (n = function(t, e) {
    return n = Object.setPrototypeOf || {
      __proto__: []
    }
    instanceof Array && function(t, e) {
      t.__proto__ = e
    } || function(t, e) {
      for(var r in e) Object.prototype.hasOwnProperty.call(e, r) && (t[r] = e[r])
    }, n(t, e)
  }, 
  function(t, e) {
    if("function" != typeof e && null !== e) 
      throw new TypeError("Class extends value " + String(e) + " is not a constructor or null");

    function r() {
      this.constructor = t
    }
    n(t, e), t.prototype = null === e ? Object.create(e) : (r.prototype = e.prototype, new r)
  }),
  i = this && this.__values || function(t) {
    var e = "function" == typeof Symbol && Symbol.iterator,
      r = e && t[e],
      n = 0;
    if(r) return r.call(t);
    if(t && "number" == typeof t.length) return {
      next: function() {
        return t && n >= t.length && (t = void 0), {
          value: t && t[n++],
          done: !t
        }
      }
    };
    throw new TypeError(e ? "Object is not iterable." : "Symbol.iterator is not defined.")
  },
  s = this && this.__read || function(t, e) {
    var r = "function" == typeof Symbol && t[Symbol.iterator];
    if(!r) return t;
    var n, o, i = r.call(t),
      s = [];
    try {
      for(;
           (void 0 === e || e-- > 0) && !(n = i.next()).done;
         ) 
        s.push(n.value)
    } 
    catch(t) { o = { error: t } } 
    finally { 
      try { n && !n.done && (r = i.return) && r.call(i) } 
      finally { if(o) throw o.error }
    }
    return s
  },
  a = this && this.__spreadArray || function(t, e, r) {
    if(r || 2 === arguments.length)
      for(var n, o = 0, i = e.length; o < i; o++) 
        !n && o in e || (n || (n = Array.prototype.slice.call(e, 0, o)), n[o] = e[o]);
    return t.concat(n || Array.prototype.slice.call(e))
  };
  Object.defineProperty(e, "__esModule", {
    value: !0
  }), 
  e.Package = e.PackageError = void 0;
  var l = r(235),
    c = function(t) {
      function e(e, r) {
        var n = t.call(this, e) || this;
        return n.package = r, n
      }
      return o(e, t), e
    }(Error);
  e.PackageError = c;
  var u = function() {
    function t(e, r) {
      void 0 === r && (r = !1), 
      this.isLoaded = !1, 
      this.isLoading = !1, 
      this.hasFailed = !1, 
      this.dependents = [], 
      this.dependencies = [], 
      this.dependencyCount = 0, 
      this.provided = [], 
      this.name = e, 
      this.noLoad = r, 
      t.packages.set(e, this), 
      this.promise = this.makePromise(this.makeDependencies())
    }
    return Object.defineProperty(t.prototype, "canLoad", {
      get: function() {
        return 0 === this.dependencyCount && !this.noLoad && !this.isLoading && !this.hasFailed
      },
      enumerable: !1,
      configurable: !0
    }), 
    t.resolvePath = function(t, e) {
      void 0 === e && (e = !0);
      var r = {
        name: t,
        original: t,
        addExtension: e
      };
      return l.Loader.pathFilters.execute(r), r.name
    }, 
    t.loadAll = function() {
      var t, e;
      try {
        for(var r = i(this.packages.values()), n = r.next(); !n.done; n = r.next()) {
          var o = n.value;
          o.canLoad && o.load()
        }
      } 
      catch(e) { t = { error: e } } 
      finally {
        try { n && !n.done && (e = r.return) && e.call(r) } 
        finally { if(t) throw t.error }
      }
    }, 
    t.prototype.makeDependencies = function() {
      var e, r, n = [],
        o = t.packages,
        c = this.noLoad,
        u = this.name,
        p = [];
      l.CONFIG.dependencies.hasOwnProperty(u) ? 
        p.push.apply(p, a([], s(l.CONFIG.dependencies[u]), !1)) 
      : 
        "core" !== u && p.push("core");
      try {
        for(var h = i(p), f = h.next(); !f.done; f = h.next()) {
          var d = f.value,
            m = o.get(d) || new t(d, c);
          this.dependencies.indexOf(m) < 0 && 
          (
            m.addDependent(this, c), 
            this.dependencies.push(m), 
            m.isLoaded || (this.dependencyCount++, n.push(m.promise))
          )
        }
      } 
      catch(t) { e = { error: t } } 
      finally { 
        try { f && !f.done && (r = h.return) && r.call(h) } 
        finally { if(e) throw e.error }
      }
      return n
    }, 
    t.prototype.makePromise = function(t) {
      var e = this,
        r = new Promise((function(t, r) {
          e.resolve = t, e.reject = r
        })),
        n = l.CONFIG[this.name] || {};
      return n.ready && (r = r.then((function(t) {
        return n.ready(e.name)
      }))), t.length && (t.push(r), r = Promise.all(t).then((function(t) {
        return t.join(", ")
      }))), n.failed && r.catch((function(t) {
        return n.failed(new c(t, e.name))
      })), r
    }, 
    t.prototype.load = function() {
      if(!this.isLoaded && !this.isLoading && !this.noLoad) {
        this.isLoading = !0;
        var e = t.resolvePath(this.name);
        l.CONFIG.require ? this.loadCustom(e) : this.loadScript(e)
      }
    }, 
    t.prototype.loadCustom = function(t) {
      var e = this;
      try {
        var r = l.CONFIG.require(t);
        r instanceof Promise ? r.then((function() {
          return e.checkLoad()
        })).catch((function(r) {
          return e.failed("Can't load \"" + t + '"\n' + r.message.trim())
        })) : this.checkLoad()
      } catch(t) {
        this.failed(t.message)
      }
    }, 
    t.prototype.loadScript = function(t) {
      var e = this,
        r = document.createElement("script");
      r.src = t, r.charset = "UTF-8", r.onload = function(t) {
        return e.checkLoad()
      }, 
      r.onerror = function(r) {
        return e.failed("Can't load \"" + t + '"')
      }, 
      document.head.appendChild(r)
    }, 
    t.prototype.loaded = function() {
      var t, e, r, n;
      this.isLoaded = !0, this.isLoading = !1;
      try {
        for(var o = i(this.dependents), s = o.next(); !s.done; s = o.next()) {
          s.value.requirementSatisfied()
        }
      } 
      catch(e) { t = { error: e } } 
      finally {
        try { s && !s.done && (e = o.return) && e.call(o) } 
        finally { if(t) throw t.error }
      }
      try {
        for(var a = i(this.provided), l = a.next(); !l.done; l = a.next()) {
          l.value.loaded()
        }
      } 
      catch(t) { r = { error: t } } 
      finally {
        try { l && !l.done && (n = a.return) && n.call(a) } 
        finally { if(r) throw r.error }
      }
      this.resolve(this.name)
    }, 
    t.prototype.failed = function(t) {
      this.hasFailed = !0, this.isLoading = !1, this.reject(new c(t, this.name))
    }, 
    t.prototype.checkLoad = function() {
      var t = this;
      ((l.CONFIG[this.name] || {}).checkReady || function() {
        return Promise.resolve()
      })().
      then((function() {
        return t.loaded()
      })).
      catch((function(e) {
        return t.failed(e)
      }))
    }, 
    t.prototype.requirementSatisfied = function() {
      this.dependencyCount && (this.dependencyCount--, this.canLoad && this.load())
    }, 
    t.prototype.provides = function(e) {
      var r, n;
      void 0 === e && (e = []);
      try {
        for(var o = i(e), s = o.next(); !s.done; s = o.next()) {
          var a = s.value,
            c = t.packages.get(a);
          c || 
          (l.CONFIG.dependencies[a] || 
          (l.CONFIG.dependencies[a] = []), 
          l.CONFIG.dependencies[a].push(a), 
          (c = new t(a, !0)).isLoading = !0), 
          this.provided.push(c)
        }
      } 
      catch(t) { r = { error: t } } 
      finally {
        try { s && !s.done && (n = o.return) && n.call(o) } 
        finally { if(r) throw r.error }
      }
    }, 
    t.prototype.addDependent = function(t, e) {
      this.dependents.push(t), e || this.checkNoLoad()
    }, 
    t.prototype.checkNoLoad = function() {
      var t, e;
      if(this.noLoad) {
        this.noLoad = !1;
        try {
          for(var r = i(this.dependencies), n = r.next(); !n.done; n = r.next()) {
            n.value.checkNoLoad()
          }
        } 
        catch(e) { t = { error: e } } 
        finally {
          try { n && !n.done && (e = r.return) && e.call(r) } 
          finally { if(t) throw t.error }
        }
      }
    }, 
    t.packages = new Map, t
  }();
  e.Package = u
},

　長い関数だけど、関数を呼び出した時に実行されるのは、ほとんどが関数の定義だけされる感じ。でもどんな処理をする関数かは眺めてみる。定義されるのは n → i → s → a → Object.defineProperty → e.Package → var l → var c → e.PackageError →　var u (膨大な tのメンバ関数 を定義する関数) → e.Package という順。それぞれどんな関数か見ていきます。 前の項目で確認した部分も出てきます。265 自体は前の235番号関数定義の中で呼ばれるので、その関数で使われる部分もありました。__webpack_modules__[235].call の中で __webpack_modules__[265].callが呼ばれています。__webpack_require__(265)がその後よばれたときには、export{ 265:{}} というような既に実行したという形跡を残す処理をします。

n

　for文のところが先に呼ばれる。t と e は以下のような値です。まず e から

e =
{
  name: 'Error'
  stackTraceLimit: 10
}

t=
{
  name: 'e'
  function(e, r) {var n = t.call(this, e) || this;return n.package = r, n}
}

　この n の関数は return として 3個のfunction(t，e) の関数をもっています。{__proto__: []} が 配列 なら 1つめの関数t.__proto__に eを格納して、2つめの関数で e の要素をひとつづつ取り出して、r に格納しながら hasOwnProperty.call(e, r) を実行します。そして呼び出された引数の t[r] に e[r] を格納します。そうやって再帰的に n の関数を実行します。3つめの関数で e の形式が function でもなく null でもないなら例外を発生させて、Error のときに実行される catch引数に if("function" != typeof e && null !== e) throw new TypeError("Class extends value " + String(e) + " is not a constructor or null"); を渡して実行します。3つ目の関数の最後に関数 r を t を返すようなthis.constructor を設定してます。また再帰的に n を処理しようとするカンマ構文があって、最後に e が null なら Object を新規に生成し、違えば rを返す関数のメンバ関数の r.prototype に e.prototype の内容を格納する。

　

i

　i は Itratorを作成する関数です。

　

s

　s に渡される t は ['input/tex-base'] → ['input/tex-base', '[tex]/ams'] → ['input/tex-base', '[tex]/newcommand'] → ['input/tex-base', '[tex]/noundefined'] → ['input/tex-base', '[tex]/require'] → ['input/tex-base', '[tex]/require', '[tex]/autoload'] → ['input/tex-base', '[tex]/newcommand', '[tex]/configmacros'] → ['input/tex-base', '[tex]/newcommand']のような配列です。e は undefined とかです。

　s に t の値をプッシュするような関数です。265関数内のt.prototype.makeDependenciesという部分で処理されます。

　

a

　a に渡される引数 t, e, r は t が []、 e は ['input/tex-base'] → ['input/tex-base', '[tex]/ams'] → ['input/tex-base', '[tex]/newcommand'] → ['input/tex-base', '[tex]/noundefined'] → ['input/tex-base', '[tex]/require'] → ['input/tex-base', '[tex]/require', '[tex]/autoload'] → ['input/tex-base', '[tex]/newcommand', '[tex]/configmacros'] → ['input/tex-base', '[tex]/newcommand']、r は flase のような値です。e の値を t にコピーして結合していくような関数です。

　

　

　

　

　

　

　

ページ

• MathJaxをデバッグしてJavaScriptの理解を深める
• MathJaxをデバッグしてJavaScriptの理解を深める ページ2
• MathJaxをデバッグしてJavaScriptの理解を深める ページ4

　

関連情報

　MathJax

　

VScodeで簡易WebServerの元でデバッグに戻る。