JS中的原型機制：實作建構函式與其實例的繼承與擴展
- php是最好的语言原創
- 2018-08-06 17:44:371260瀏覽
JS中的原型
原型機制(prototype)在JavaScript中佔有重要的地位，是很重要的一種機制，透過[[prototype]]，我們可以輕易地實作建構子與其實例的繼承與擴充。
原型的概念大致如下圖展示，詳情可以參考MDN，本文主要講原型在實際中的應用。 
參考jQuery與zepto中的原型機制，原型的應用大致分為以下幾個部分：
-
定義建構子
定義產生實例介面
定義初始化函數
-
#提供擴充介面（外掛機制）
提供對外介面
已綁定原型
建立一個屬於自己的函式庫檔案（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 || '';
} // 定义生成实例接口
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)在HTML中使用Sojourn.js
<!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中的原型機制：實作建構函式與其實例的繼承與擴展的詳細內容。更多資訊請關注PHP中文網其他相關文章！
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn