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
prototype-test prototype test
相关文章:
相关视频:










