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>
<div id="div1">prototype test</div>
<script src="./sojourn.js"></script>
<script>
// 一秒鐘後使用構造的方法改變dom元素
setTimeout(function () {
var div1 = $('#div1');
// 鏈式調用
div1.html().html('use Sojourn.js');
// 擴展插件
$.fn.getNodeName = function () {
alert(this[0].nodeName);
}
div1.getNodeName();
}, 1000);
</script>
</body>
</html>參考資料:
MDN
《你不知道的JS》（上卷）