suchen

Heim  >  Artikel  >  Web-Frontend  >  Prototypmechanismus in JS: Implementierung der Vererbung und Erweiterung von Konstruktoren und ihren Instanzen

Prototypmechanismus in JS: Implementierung der Vererbung und Erweiterung von Konstruktoren und ihren Instanzen

php是最好的语言
php是最好的语言Original
2018-08-06 17:44:371247Durchsuche

Prototyp in JS

Der Prototypmechanismus (prototype) nimmt eine wichtige Position in JavaScript ein und ist ein sehr wichtiger Mechanismus. Durch [[prototype]] können wir Einfache Implementierung der Vererbung und Erweiterung des Konstruktors und seiner Instanzen.

Das Konzept des Prototyps ist in der folgenden Abbildung grob dargestellt. Weitere Informationen finden Sie in MDN. In diesem Artikel geht es hauptsächlich um die Anwendung des Prototyps in der Praxis.
Prototypmechanismus in JS: Implementierung der Vererbung und Erweiterung von Konstruktoren und ihren Instanzen

In Bezug auf den Prototypmechanismus in jQuery und Zepto ist die Anwendung des Prototyps grob in die folgenden Teile unterteilt:

  • Definieren Sie den Konstruktor

  • Definieren Sie die generierte Instanzschnittstelle

  • Definieren Sie die Initialisierungsfunktion

  • Stellen Sie eine erweiterte Schnittstelle bereit (Plug-In) im Mechanismus)

  • Externe Schnittstelle bereitstellen

  • Prototyp binden

Erstellen Sie eine Bibliotheksdatei Ihrer own (Sojourn.js)

(function (window) {
  // 定义属于自己的对象
  var Sojourn = {}  // 定义构造函数
  function S(dom, selector) {
    var i, len = dom ? dom.length : 0;    for (i = 0; i < len; i++) {      this[i] = dom[i];
    }    this.length = len;    this.selector = selector || &#39;&#39;;
  }  // 定义生成实例接口
  Sojourn.S = function (dom, selector) {
    return new S(dom, selector);
  }  // 定义初始化函数
  Sojourn.init = function (selector) {
    var slice = Array.prototype.slice;    var dom = slice.call(document.querySelectorAll(selector));    return Sojourn.S(dom, selector);
  }  // 提供对外接口
  var $ = Sojourn.init;  // 提供扩展接口
  $.fn = {
    constructor: Sojourn.S,    // 添加方法

    // 定义一个修改元素html内容的方法
    html: function (content) {
      console.log(this);      if (content) {        this[0].innerHTML = content;
      } else {
        alert(&#39;no change&#39;);
      }      // 返回dom对象以实现链式调用
      return this;
    }
  }  // 绑定原型
  Sojourn.S.prototype = S.prototype = $.fn;  // 绑定到全局对象
  window.$ = $;
})(window)

Sojourn.js in HTML verwenden

<!DOCTYPE html><html lang="en"><head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>prototype-test</title></head><body>
  <p id="p1">prototype test</p>

  <script src="./sojourn.js"></script>
  <script>
    // 一秒钟后使用构造的方法改变dom元素
    setTimeout(function () {
      var p1 = $(&#39;#p1&#39;);      // 链式调用
      p1.html().html(&#39;use Sojourn.js&#39;);      // 扩展插件
      $.fn.getNodeName = function () {
        alert(this[0].nodeName);
      }

      p1.getNodeName();
    }, 1000);  </script></body></html>

Verwandte Artikel:

Vier Schritte zur JS-Prototypvererbung

Detaillierte Erklärung der JS-Klassenvererbung und der Prototypenvererbung_Javascript-Fähigkeiten

Verwandte Videos:

Video-JavaScript-Anleitung – PHP-Tutorial für chinesische Website

Das obige ist der detaillierte Inhalt vonPrototypmechanismus in JS: Implementierung der Vererbung und Erweiterung von Konstruktoren und ihren Instanzen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

php JavaScript jquery html 构造函数 继承 接口 JS prototype
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Wie implementiert man eine einfache Paging-Funktion mit js? (Codebeispiel)Nächster Artikel：Wie implementiert man eine einfache Paging-Funktion mit js? (Codebeispiel)

In Verbindung stehende Artikel

Mehr sehen