Simple JavaScript Inheritance--一个极简JS面向对象-类库
面向对象
面向对象思想的几个重要特征(针对类的要求):
抽象-封装、信息隐藏(将内部实现的方法和数据隐藏, 定义开放的接口)
继承-子类可以使用父类的资源,并可以定制自己的资源, 资源包括方法和数据
多态-重载(同名函数)、覆盖(继承的基础上重写父类函数)
JS与面向对象
javascript使用prototype实现类的继承功能, 非经典面向对象语言的类的形式, 使用方法也不同, 导致使用较困难。
请参考大师的《深入理解javascript原型和闭包系列》 http://www.cnblogs.com/wangfupeng1988/p/4001284.html
于是各种库都提供了自己实现类库, 例如:
1、 jquery class create: https://github.com/protonet/jquery-class-create
使用Class.Create创建实用类, 即实例的构造函数, 其缺点是用来jquery库
// properties are directly passed to `create` method var Person = Class.create({ initialize: function(name) { this.name = name; }, say: function(message) { return this.name + ': ' + message; } }); // when subclassing, specify the class you want to inherit from var Pirate = Class.create(Person, { // redefine the speak method say: function($super, message) { return $super(message) + ', yarr!'; } }); var john = new Pirate('Long John'); john.say('ahoy matey'); // -> "Long John: ahoy matey, yarr!"
2、 prototypejs : http://prototypejs.org/learn/class-inheritance
作为prototypejs库的一个功能提供, 使用上跟jquery class create接口一致。
此库还提供, ajax和DOM优雅的接口, 消灭客户端开发的复杂性。
这两个库 要么依赖其他库, 要么自身库功能繁杂, 体积都大, 故单独使用的需求不满足。
本文介绍一个不依赖任何库、且实现上只包括类继承的库, 这位大神开发的独立库: John Resig http://ejohn.org/
Simple JavaScript Inheritance
Simple JavaScript Inheritance
此库的官网为
http://ejohn.org/blog/simple-javascript-inheritance/
作者的目标是 简单-容易被人理解, 可重用-不依赖其他库, 使用例子:
var Person = Class.extend({ init: function(isDancing){ this.dancing = isDancing; }, dance: function(){ return this.dancing; } }); var Ninja = Person.extend({ init: function(){ this._super( false ); }, dance: function(){ // Call the inherited version of dance() return this._super(); }, swingSword: function(){ return true; } }); var p = new Person(true); p.dance(); // => true var n = new Ninja(); n.dance(); // => false n.swingSword(); // => true // Should all be true p instanceof Person && p instanceof Class && n instanceof Ninja && n instanceof Person && n instanceof Class
实现说明:
1、 创建构造函数必须简单, 构造函数只提供 init初始化方法。
2、 创建新类,必须扩展一个存在的类, 调用extend。
3、 所有的继承与唯一的祖先 Class。 创建的新类必须是Class的子类。
4、 子类中访问父类的同名方法(即被覆盖)必须提供。 通过this.super子类同名方法中调用父类同名方法。
实现要点
实现代码:
/* Simple JavaScript Inheritance * By John Resig http://ejohn.org/ * MIT Licensed. */ // Inspired by base2 and Prototype (function(){ var initializing = false, fnTest = /xyz/.test(function(){xyz;}) ? /\b_super\b/ : /.*/; // The base Class implementation (does nothing) this.Class = function(){}; // Create a new Class that inherits from this class Class.extend = function(prop) { var _super = this.prototype; // Instantiate a base class (but only create the instance, // don't run the init constructor) initializing = true; var prototype = new this(); initializing = false; // Copy the properties over onto the new prototype for (var name in prop) { // Check if we're overwriting an existing function prototype[name] = typeof prop[name] == "function" && typeof _super[name] == "function" && fnTest.test(prop[name]) ? (function(name, fn){ return function() { var tmp = this._super; // Add a new ._super() method that is the same method // but on the super-class this._super = _super[name]; // The method only need to be bound temporarily, so we // remove it when we're done executing var ret = fn.apply(this, arguments); this._super = tmp; return ret; }; })(name, prop[name]) : prop[name]; } // The dummy class constructor function Class() { // All construction is actually done in the init method if ( !initializing && this.init ) this.init.apply(this, arguments); } // Populate our constructed prototype object Class.prototype = prototype; // Enforce the constructor to be what we expect Class.prototype.constructor = Class; // And make this class extendable Class.extend = arguments.callee; return Class; }; })();
要点:
1、初始化调用 xx.extend{init:function(){}} 中的 init执行初始化
// The dummy class constructor function Class() { // All construction is actually done in the init method if ( !initializing && this.init ) this.init.apply(this, arguments); }
2、 子类通过 this._super 访问父类的同名函数, 例如:
var Person = Class.extend({ init: function(isDancing){ this.dancing = isDancing; } }); var Ninja = Person.extend({ init: function(){ this._super( false ); } }); var p = new Person(true); p.dancing; // => true var n = new Ninja(); n.dancing; // => false
如下, 将儿子有此函数, 父亲也有此同名函数时候, 此函数中记录函数地址到this._super中。
// Check if we're overwriting an existing function prototype[name] = typeof prop[name] == "function" && typeof _super[name] == "function" && fnTest.test(prop[name]) ? (function(name, fn){ return function() { var tmp = this._super; // Add a new ._super() method that is the same method // but on the super-class this._super = _super[name]; // The method only need to be bound temporarily, so we // remove it when we're done executing var ret = fn.apply(this, arguments); this._super = tmp; return ret; }; })(name, prop[name]) : prop[name]; }
相关文章
- 教程 | face-api.js:在浏览器中进行人脸识别的JavaScript接口
- js/javascript代码注释规范与示例
- Handlebars的基本用法 Handlebars.js使用介绍 http://handlebarsjs.com/ Handlebars.js 模板引擎 javascript/jquery模板引擎——Handlebars初体验 handlebars.js 入门(1) 作为一名前端的你,必须掌握的模板引擎:Handlebars 前端数据模板handlebars与jquery整
- JavaScript-4.7-friendly_table---ShinePans
- 【JavaScript】JS中暂停几秒再往下执行!
- 【JS】JavaScript中创建数组的6种方式(代码示例合集)
- Google Earth Engine(GEE)——JavaScript基本功能介绍(变量和数据类型及几何类型的简介)
- JavaScript 34. 代码规范
- JavaScript - 纯 JS 实现让浏览器滚动条回到顶部(3种解决方案)
- [转]Print.js javascript库 实现页面打印
- ECMAScript、JavaScript、Node.js的区别与联系
- 【JavaScript】JS跨域设置和取Cookie
- 最新版教学Vue.js渐进式JavaScript框架
- 深入理解 JavaScript中的变量、值、传参
- 《JavaScript高效图形编程(修订版)》——6.2 位图、矢量图,或两者兼而有之?
- 《HTML5 开发实例大全》——1.18 通过JavaScript脚本获取并显示文本框的内容
- JS教程之 JavaScript 框架之战已经结束,而且只有一个赢家
- javascript js date ios手机浏览器出现 NAN的问题解决方法
- JS:javascript 函数后面有多个小括号是怎么回事?f( )( )( )...
- Javascript面向对象编程(三):非构造函数的继承(对象的深拷贝与浅拷贝)
- JS IOS/iPhone的Safari浏览器不兼容Javascript中的Date()问题的解决方法
- 尝试HTML + JavaScript 编写Windows App
- 转 创建 JavaScript XML 文档注释
- 华为OD机试 - 叠放书籍(JavaScript) | 机试题+算法思路+考点+代码解析 【2023】
- js 手机端触发事事件、javascript手机端/移动端触发事件
- JavaScript对象详解,深入理解js对象
- 原生js源码之JavaScript的trim方法
- 深入理解JavaScript系列(12):变量对象(Variable Object)