JS中的原型机制：实现构造函数与其实例的继承与扩展

2020-11-27 来源：化拓教育网

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原型继承四步曲

js类式继承与原型式继承详解_javascript技巧

全部频道

JS中的原型机制：实现构造函数与其实例的继承与扩展

JS中的原型

创建一个属于自己的库文件（Sojourn.js）

在HTML中使用Sojourn.js