ホームページ > 記事 > ウェブフロントエンド > JS のプロトタイプ メカニズム: コンストラクターとそのインスタンスの継承と拡張の実装
プロトタイプ メカニズム(prototype)
在JavaScript中占有重要的地位,是很重要的一种机制,通过[[prototype]]
を使用すると、コンストラクターとそのインスタンスの継承と拡張を簡単に実装できます。
プロトタイプの概念は大まかに以下の図に示されています。詳細については、この記事では主にプロトタイプの実際の適用について説明します。
jQueryとzeptoのプロトタイプの仕組みを参照 プロトタイプの応用は大きく以下の部分に分かれます:
コンストラクターの定義
生成されるインスタンスインターフェースの定義
初期化関数の定義
拡張インターフェース(プラグイン機構)を提供する
外部インターフェースを提供する
プロトタイプをバインドする
(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 || ''; } // 定义生成实例接口 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('no change'); } // 返回dom对象以实现链式调用 return this; } } // 绑定原型 Sojourn.S.prototype = S.prototype = $.fn; // 绑定到全局对象 window.$ = $; })(window)
<!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 = $('#p1'); // 链式调用 p1.html().html('use Sojourn.js'); // 扩展插件 $.fn.getNodeName = function () { alert(this[0].nodeName); } p1.getNodeName(); }, 1000); </script></body></html>
関連記事:
js クラス継承とプロトタイプ継承の詳しい説明_javascript スキル
関連動画:
ビデオ - JavaScript の方向性 - PHP 中国語 Web サイトのチュートリアル
以上がJS のプロトタイプ メカニズム: コンストラクターとそのインスタンスの継承と拡張の実装の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。