JavaScript Patterns 6.3 Klass
Commonalities
• There’s a convention on how to name a method, which is to be considered the constructor of the class.
• Classes inherit from other classes.
• There’s access to the parent class (superclass) from within the child class.
The function takes two parameters: a parent class to be inherited and implementation of the new class provided by an object literal.
1. A Child() constructor function is created. This is the function that will be returned at the end and will be used as a class. In this function the __construct method is called if it exists. Also before that the parent’s __construct is called (again, if it exists) using the static uber property. There might be cases when uber is not defined—when you inherit from Object for example, as the case was with the Man class definition.
2. The second part takes care of the inheritance bit. It’s simply using the classical inheritance’s Holy Grail pattern. There’s only one new thing: setting the Parent to Object if no Parent was passed to inherit from.
3. The final section is looping through all the implementation methods (such as __construct and getNam ein the examples), which are the actual definition of the class and adding them to the prototype of Child.
var klass = function (Parent, props) { var Child, F, i; // 1. new constructor Child = function () { if (Child.uber && Child.uber.hasOwnProperty("__construct")) { Child.uber.__construct.apply(this, arguments); } if (Child.prototype.hasOwnProperty("__construct")) { Child.prototype.__construct.apply(this, arguments); } }; // 2. inherit Parent = Parent || Object; F = function () {}; F.prototype = Parent.prototype; Child.prototype = new F(); Child.uber = Parent.prototype; Child.prototype.constructor = Child; // 3. add implementation methods for (i in props) { if (props.hasOwnProperty(i)) { Child.prototype[i] = props[i]; } } // return the "class" return Child; }; // The demo for the 6.2 Klass var Man = klass(null, { __construct: function (what) { showMsg("Man's constructor"); this.name = what; }, getName: function () { return this.name; } }); var SuperMan = klass(Man, { __construct: function (what) { showMsg("SuperMan's constructor"); }, getName: function () { var name; if (SuperMan.uber.hasOwnProperty("getName")) { name = SuperMan.uber.getName.call(this); } return "I am " + name; } }); function showMsg(msg) { $('#msg').append(msg).append('<br/>'); } $(function () { var clark = new SuperMan('Clark Kent'); showMsg(clark.getName()); // "I am Clark Kent" });
Advantage
This pattern allows you to forget about the prototypes completely, and the good thing is you can tweak the syntax and the conventions
to resemble another of your favorite languages.
Disadvantage
It brings the whole confusing notion of classes, which don’t technically exist in the language. It adds new syntax and new rules to learn and remember.
References:
JavaScript Patterns - by Stoyan Stefanov (O`Reilly)
JavaScript Patterns 6.3 Klass的更多相关文章
- JavaScript Patterns 7.1 Singleton
7.1 Singleton The idea of the singleton pattern is to have only one instance of a specific class. Th ...
- JavaScript Patterns 6.7 Borrowing Methods
Scenario You want to use just the methods you like, without inheriting all the other methods that yo ...
- JavaScript Patterns 6.6 Mix-ins
Loop through arguments and copy every property of every object passed to the function. And the resul ...
- JavaScript Patterns 6.5 Inheritance by Copying Properties
Shallow copy pattern function extend(parent, child) { var i; child = child || {}; for (i in parent) ...
- JavaScript Patterns 6.4 Prototypal Inheritance
No classes involved; Objects inherit from other objects. Use an empty temporary constructor function ...
- JavaScript Patterns 6.2 Expected Outcome When Using Classical Inheritance
// the parent constructor function Parent(name) { this.name = name || 'Adam'; } // adding functional ...
- JavaScript Patterns 6.1 Classical Versus Modern Inheritance Patterns
In Java you could do something like: Person adam = new Person(); In JavaScript you would do: var ada ...
- JavaScript Patterns 5.9 method() Method
Advantage Avoid re-created instance method to this inside of the constructor. method() implementatio ...
- JavaScript Patterns 5.8 Chaining Pattern
Chaining Pattern - Call methods on an object one after the other without assigning the return values ...
随机推荐
- Firemonkey ListView 点击事件
Firemonkey ListView 的点击事件一直让人摸不着头绪(各平台触发规则不太相同),因为它提供了点击相关的事件就有如下: OnChange:改变项目触发. OnClick:点击触发. On ...
- 由select * from table where 1=1中的1=1说开数据库
众多网站都有select * from table where 1=1此类语句的介绍,并且,针对该类语句,讲得实在是让人越看越迷茫(一个抄袭一个的,简直不像话),不知道是在说什么,导致很多新手不得要领 ...
- Java基础复习笔记系列 五 常用类
Java基础复习笔记系列之 常用类 1.String类介绍. 首先看类所属的包:java.lang.String类. 再看它的构造方法: 2. String s1 = “hello”: String ...
- Spring mvc web.xml中 urlpatten的配置问题
在使用spring mvc 是我们会配置spring 的DispatcherServlet作为请求的转发器. <servlet> <servlet-name>spring< ...
- .Net加密保护工具分析介绍
本文主要介绍一些dotNet加密保护工具的原理以及就其脱壳进行简单探讨. remotesoft protector.maxtocode..Net Reactor.Cliprotector.themid ...
- IO碰到的问题
1.流关了,并不代表流对象为空 可是java并没提供查看流是否关闭的方法 不过如果流已经关闭了以后,再对流进行操作的话,会抛出IOException:Stream closed异常 可以根据这个异常来 ...
- 使用 WordPress 主题制作的20个精美网页
WordPress 是一款个人博客系统,并逐步演化成一款内容管理系统软件,它是使用 PHP 语言和 MySQL 数据库开发的.用户可以在支持 PHP 和 MySQL 数据库的服务器上使用自己的博客.这 ...
- 分享50款 Android 移动应用程序图标【下篇】
在这个移动程序流行的时代,持续增长的应用程序经济充满了商业机遇.任何对应用程序设计感兴趣的人,将会喜欢上这里的50个独特的 Android 应用程序图标.这些例子中的图标能够让应用程序的设计更具吸引力 ...
- asp.net中控制反转的理解
对IOC的解释为:“Inversion of control is a common characteristic of frameworks, so saying that these lightw ...
- NodeJS API简介
简单介绍下NodeJS现有API. Assert(断言):该模块用于编写程序的单元测试用例. Buffer(缓冲块) :处理二进制数据. C/C++ Addons(拓展):Addons插件就是动态连接 ...