PrototypeRoot-example.svg

<?xml version="1.0"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
     width="37em" height="45em" font-family="sans-serif">

  <style type="text/css">
    .object rect, .object line {
      stroke: #005a9c;
      shape-rendering: crispEdges;
    }
    .object rect {
      stroke-width: 2;
      fill: #f0f6ff;
    }
    .object line, .arrow line {
      stroke-width: 1;
    }
    .object circle {
      fill: #005a9c;
      shape-rendering: geometricPrecision;
    }

    .label {
      font-style: italic;
    }

    .arrow line {
      stroke: #005a9c;
      stroke-linecap: round;
      stroke-width: 2;
      shape-rendering: geometricPrecision;
    }
  </style>

  <text class="label" x="18em" y="2.6em" text-anchor="end">Object prototype object →</text>
  <g class="object">
    <rect x="19em" y="1.5em" width="16em" height="4.5em"/>
    <line x1="19em" y1="3em" x2="35em" y2="3em"/>
    <line x1="19em" y1="4.5em" x2="35em" y2="4.5em"/>
    <line x1="29em" y1="1.5em" x2="29em" y2="6em"/>
    <text x="19.5em" y="2.6em">[[Prototype]]</text>
    <text x="19.5em" y="4.1em">toString</text>
    <text x="32em" y="4.1em" text-anchor="middle"><tspan font-style="italic">function</tspan></text>
    <text x="32em" y="2.6em" text-anchor="middle"><tspan font-weight="bold">null</tspan></text>
    <text x="19.5em" y="5.6em">…</text>
    <text x="32em" y="5.6em" text-anchor="middle">…</text>
  </g>

  <text class="label" x="18em" y="10.1em" text-anchor="end">Node prototype object →</text>
  <g class="object">
    <rect x="19em" y="9em" width="16em" height="4.5em"/>
    <line x1="19em" y1="10.5em" x2="35em" y2="10.5em"/>
    <line x1="19em" y1="12em" x2="35em" y2="12em"/>
    <line x1="29em" y1="9em" x2="29em" y2="13.5em"/>
    <text x="19.5em" y="10.1em">[[Prototype]]</text>
    <text x="19.5em" y="11.6em">appendChild</text>
    <text x="32em" y="11.6em" text-anchor="middle"><tspan font-style="italic">function</tspan></text>
    <text x="19.5em" y="13.1em">…</text>
    <text x="32em" y="13.1em" text-anchor="middle">…</text>
    <circle cx="32em" cy="9.75em" r="0.25em"/>
  </g>

  <g class="arrow">
    <line x1="32em" y1="9.75em" x2="32em" y2="7.75em"/>
    <line x1="32em" y1="7.75em" x2="27em" y2="7.75em"/>
    <line x1="27em" y1="7.75em" x2="27em" y2="6.25em"/>

    <g class="head">
      <line x1="27em" y1="6.25em" x2="26.625em" y2="6.75em"/>
      <line x1="27em" y1="6.25em" x2="27.375em" y2="6.75em"/>
    </g>
  </g>

  <text class="label" x="18em" y="17.6em" text-anchor="end">Element prototype object →</text>
  <g class="object">
    <rect x="19em" y="16.5em" width="16em" height="4.5em"/>
    <line x1="19em" y1="18em" x2="35em" y2="18em"/>
    <line x1="19em" y1="19.5em" x2="35em" y2="19.5em"/>
    <line x1="29em" y1="16.5em" x2="29em" y2="21em"/>
    <text x="19.5em" y="17.6em">[[Prototype]]</text>
    <text x="19.5em" y="19.1em">getAttribute</text>
    <text x="32em" y="19.1em" text-anchor="middle"><tspan font-style="italic">function</tspan></text>
    <text x="19.5em" y="20.6em">…</text>
    <text x="32em" y="20.6em" text-anchor="middle">…</text>
    <circle cx="32em" cy="17.25em" r="0.25em"/>
  </g>

  <g class="arrow">
    <line x1="32em" y1="17.25em" x2="32em" y2="15.25em"/>
    <line x1="32em" y1="15.25em" x2="27em" y2="15.25em"/>
    <line x1="27em" y1="15.25em" x2="27em" y2="13.75em"/>

    <g class="head">
      <line x1="27em" y1="13.75em" x2="26.625em" y2="14.25em"/>
      <line x1="27em" y1="13.75em" x2="27.375em" y2="14.25em"/>
    </g>
  </g>

  <text class="label" x="18em" y="25.1em" text-anchor="end">HTMLElement prototype object →</text>
  <g class="object">
    <rect x="19em" y="24em" width="16em" height="4.5em"/>
    <line x1="19em" y1="25.5em" x2="35em" y2="25.5em"/>
    <line x1="19em" y1="27em" x2="35em" y2="27em"/>
    <line x1="29em" y1="24em" x2="29em" y2="28.5em"/>
    <text x="19.5em" y="25.1em">[[Prototype]]</text>
    <text x="19.5em" y="26.6em">focus</text>
    <text x="32em" y="26.6em" text-anchor="middle"><tspan font-style="italic">function</tspan></text>
    <text x="19.5em" y="28.1em">…</text>
    <text x="32em" y="28.1em" text-anchor="middle">…</text>
    <circle cx="32em" cy="24.75em" r="0.25em"/>
  </g>

  <g class="arrow">
    <line x1="32em" y1="24.75em" x2="32em" y2="22.75em"/>
    <line x1="32em" y1="22.75em" x2="27em" y2="22.75em"/>
    <line x1="27em" y1="22.75em" x2="27em" y2="21.25em"/>

    <g class="head">
      <line x1="27em" y1="21.25em" x2="26.625em" y2="21.75em"/>
      <line x1="27em" y1="21.25em" x2="27.375em" y2="21.75em"/>
    </g>
  </g>

  <text class="label" x="18em" y="32.6em" text-anchor="end">Mixin prototype object →</text>
  <g class="object">
    <rect x="19em" y="31.5em" width="16em" height="4.5em"/>
    <line x1="19em" y1="33em" x2="35em" y2="33em"/>
    <line x1="19em" y1="34.5em" x2="35em" y2="34.5em"/>
    <line x1="29em" y1="31.5em" x2="29em" y2="36em"/>
    <text x="19.5em" y="32.6em">[[Prototype]]</text>
    <text x="19.5em" y="34.1em">addEventListener</text>
    <text x="32em" y="34.1em" text-anchor="middle"><tspan font-style="italic">function</tspan></text>
    <text x="19.5em" y="35.6em">…</text>
    <text x="32em" y="35.6em" text-anchor="middle">…</text>
    <circle cx="32em" cy="32.25em" r="0.25em"/>
  </g>

  <g class="arrow">
    <line x1="32em" y1="32.25em" x2="32em" y2="30.25em"/>
    <line x1="32em" y1="30.25em" x2="27em" y2="30.25em"/>
    <line x1="27em" y1="30.25em" x2="27em" y2="28.75em"/>

    <g class="head">
      <line x1="27em" y1="28.75em" x2="26.625em" y2="29.25em"/>
      <line x1="27em" y1="28.75em" x2="27.375em" y2="29.25em"/>
    </g>
  </g>

  <text class="label" x="18em" y="40.1em" text-anchor="end">E →</text>
  <g class="object">
    <rect x="19em" y="39em" width="16em" height="4.5em"/>
    <line x1="19em" y1="40.5em" x2="35em" y2="40.5em"/>
    <line x1="19em" y1="42em" x2="35em" y2="42em"/>
    <line x1="29em" y1="39em" x2="29em" y2="43.5em"/>
    <text x="19.5em" y="40.1em">[[Prototype]]</text>
    <text x="19.5em" y="41.6em">nodeType</text>
    <text x="32em" y="41.6em" text-anchor="middle">1</text>
    <text x="19.5em" y="43.1em">…</text>
    <text x="32em" y="43.1em" text-anchor="middle">…</text>
    <circle cx="32em" cy="39.75em" r="0.25em"/>
  </g>

  <g class="arrow">
    <line x1="32em" y1="39.75em" x2="32em" y2="37.75em"/>
    <line x1="32em" y1="37.75em" x2="27em" y2="37.75em"/>
    <line x1="27em" y1="37.75em" x2="27em" y2="36.25em"/>

    <g class="head">
      <line x1="27em" y1="36.25em" x2="26.625em" y2="36.75em"/>
      <line x1="27em" y1="36.25em" x2="27.375em" y2="36.75em"/>
    </g>
  </g>

</svg>