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 ...
随机推荐
- SignalR入门之小试身手
建立好持久性连接类TestConnection之后,现在为我们的SignalR程序配置持久性连接类以及访问路径. 进入刚刚建立的Startup类,进入Configuration这个方法里来配置: us ...
- Learn Spring Framework(continue update...)
Part I. Overview of Spring Framework The Spring Framework is a lightweight(轻量级的) solution and a pote ...
- MySQL建表规范与常见问题
一. 表设计 库名.表名.字段名必须使用小写字母,“_”分割. 库名.表名.字段名必须不超过12个字符. 库名.表名.字段名见名知意,建议使用名词而不是动词. 建议使用InnoDB存储引擎. 存储精确 ...
- 阿里社招B2B
岗位描述:1. 按USE CASE进行业务需求分析和软件概要设计2. 进行软件详细设计和编码实现,确保性能.质量和安全3. 维护和升级现有软件产品,快速定位并修复现有软件缺陷岗位要求:1. 精通Web ...
- HDU 3328 Flipper 栈 模拟
首先想说,英语太烂这题读了很长时间才读懂......题意是说输入有几张牌,然后输入这些牌的初始状态(是面朝上还是面朝下),然后输入操作方式,R表示翻一下右边的牌堆,L表示翻一下左边的牌堆,直到最后摞成 ...
- 纯CSS3写的10个不同的酷炫图片遮罩层效果
这个是纯CSS3实现的的10个不同的酷炫图片遮罩层效果,可以欣赏一下 在线预览 下载地址 实例代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1 ...
- 6to5 – 让你即刻体验 ECMAScript 6 编程
ECMAScript 6 是下一代的 ECMAScript 标准.ECMAScript 6 的目标是让 JavaScript 可以用来编写复杂的应用程序.函数库和代码的自动生成器. ES6 是这门语言 ...
- 深入理解:JavaScript原型与继承
深入理解:JavaScript原型与继承 看过不少书籍,不少文章,对于原型与继承的说明基本上让人不明觉厉,特别是对于习惯了面向对象编程的人来说更难理解,这里我就给大家说说我的理解. 首先JavaScr ...
- AloneJs —— 简洁高效的JavaScript UI库
以前做项目时用了一些第三方的JS UI库,项目比较low的时候用还行,一旦项目要求比较高,特别是交互比较复杂时,某些第三方UI库就显得无能为力,用起来也不顺手,改也不好改,所以我就自己基于jQuery ...
- sap去除后缀0方法
原贴地址:http://fuhesap.com/SAP/179.html SHIFT str LEFT DELETING LEADING '0'.如果要在layout显示不出前面的0 格式: & ...