大话JS面向对象之开篇万物皆对象------（ATM取款机引发的深思）

一，总体概要

OO(面向对象)概念的提出是软件开发工程发展的一次革命，多年来我们借助它使得很多大型应用程序得以顺利实现。如果您还没有掌握并使用OO进行程序设计和开发，那么您无疑还停留在软件开发的石器时代。大多数编程语言，尤其是近年问世的一些语言，都很好的支持了面向对象，您可能对此了如执掌，但是一些语言在OO方面却无法与其它高级语言相比，在这些语言上进行面向对象程序设计和开发会有些困难，例如本文要讨论的JavaScript。JavaScript是一门古老的语言，但是随着近期Web2.0 技术的热捧，这门语言又重新焕发出青春的光辉，借助于JavaScript客户端技术，我们的Web体验变得丰富而又精彩，为了设计和开发更加完善、复杂的客户端应用，我们必须掌握JavaScript上的OO方法，这正是本文要讨论的。

当今 JavaScript 大行其道，各种应用对其依赖日深。web 程序员已逐渐习惯使用各种优秀的 JavaScript 框架快速开发 Web 应用，从而忽略了对原生 JavaScript 的学习和深入理解。所以，经常出现的情况是，很多做了多年 JS 开发的程序员对闭包、函数式编程、原型总是说不清道不明，即使使用了框架，其代码组织也非常糟糕。这都是对原生 JavaScript 语言特性理解不够的表现。要掌握好 JavaScript，首先一点是必须摒弃一些其他高级语言如 Java、C# 等类式面向对象思维的干扰，全面地从函数式语言的角度理解 JavaScript 原型式面向对象的特点。把握好这一点之后，才有可能进一步使用好这门语言。本文适合群体：使用过 JS 框架但对 JS 语言本质缺乏理解的程序员，具有 Java、C++ 等语言开发经验，准备学习并使用 JavaScript 的程序员，以及一直对 JavaScript 是否面向对象模棱两可，但希望知道真相的 JS 爱好者。

言归正传，我们切入主题------Javascript的面向对象编程。要谈Javascript的面向对象编程，我们第一步要做的事情就是忘记我们所学的面向对象编程。传统C++或Java的面向对象思维来学习Javascript的面向对象会给你带来不少困惑，让我们先忘记我们所学的，从新开始学习这门特殊的面向对象编程。既然是OO编程，要如何来理解OO编程呢，记得以前学Java，学了很久都不入门，后来有幸读了《Java编程思想》这本大作，顿时豁然开朗，因此本文也将以对象模型的方式来探讨的Javascript的OO编程。因为Javascript 对象模型的特殊性，所以使得Javascript的继承和传统的继承非常不一样，同时也因为Javascript里面没有类，这意味着Javascript里面没有extends,implements。那么Javascript到底是如何来实现OO编程的呢?好吧，让我们开始吧，一起在Javascript的OO世界里来一次漫游。

二，案例引入

(1)场景人物简介

主人公甲------大耳文老师（软件行业领域的骨灰级程序猿）

主人公乙------大熊君（初出茅庐的菜鸟程序员）

关系------ 工作上的上下级，私底下的师徒

(2)话题开展

有一天这师徒二人午饭后闲聊起来，突然聊起ATM取款机，大耳文老师说取款机对人们的日常生活帮助真是很大，同时也提高了银行的生产力，这项发明和我们的软件行业也是分不开的，大熊君说是啊老师，一些实用的操作提供了便捷的功能，这时大耳文老师微微一笑说道，那么你知道这些功能是如何实现的吗，满满自信的大熊君回答说：简单啊就是一些像存钱，取钱，转账的简单功能，老师我现在就写给你看。。。。未完待续

(3)实例讲解，循序渐进

十分钟过后大熊君把一份转账操作部分的代码给老师看，老师笑了（呵呵）

 1 function TransferTransaction(fromAccount,toAccount,balance){
 2     this.fromAccount = fromAccount ;
 3     this.toAccount = toAccount ;
 4     this.balance = balance ;
 5 } ;
 6 TransferTransaction.prototype = {
 7     transfer : function(){
 8         this.toAccount = this.fromAccount - balance ;
 9     } ,
10     getFromAccount : function(){
11         return this.fromAccount ;
12     } ,
13     getToAccount : function(){
14         return this.toAccount ;
15     } ,
16     getBalance : function(){
17         return this.balance ;
18     }
19 } ;
20 
21 var tt = new TransferTransaction(1000,3000,100) ;
22 tt.transfer() ;
23 tt.getToAccount() ;

View Code

老师说道大熊你这代码是有问题的，大熊没有想太多直接回答说，没有啊老师我这是面向对象写的啊，老师很有耐心的说道：先别着急听我给你讲。

首先先不说面向对象就功能而言也是有问题的，假设我的转出账户就是fromAccount要是余额为0那，不就会出现问题了吗，大熊，大熊看了一下很难为情地说奥是啊您稍等一下大熊回去又作修改。。。。未完待续

改完了这下没问题了吧

 1 function TransferTransaction(fromAccount,toAccount,balance){
 2     this.fromAccount = fromAccount ;
 3     this.toAccount = toAccount ;
 4     this.balance = balance ;
 5 } ;
 6 TransferTransaction.prototype = {
 7     transfer : function(){
 8         if(this.fromAccount < balance){
 9             throw new Error("余额不足!") ;
10         }
11         this.toAccount = this.fromAccount - balance ;
12     } ,
13     getFromAccount : function(){
14         return this.fromAccount ;
15     } ,
16     getToAccount : function(){
17         return this.toAccount ;
18     } ,
19     getBalance : function(){
20         return this.balance ;
21     }
22 } ;
23 
24 var tt = new TransferTransaction(1000,3000,100) ;
25 tt.transfer() ;
26 tt.getToAccount() ;

View Code

老师看了看说道基本功能是做到，但这样设计是很低效的，并且很多设计原则也违反了。

大熊疑惑的问到为什么那，老师说如果现在新的需求来了比如根据账户的等级划分会有不同级别的转账金额你如何处理那？比如vip级别最多可以转账5000，Normal级别至多为1000你试试看，好的老师，您稍等。。。。未完待续

 1 function TransferTransaction(fromAccount,toAccount,balance,rank){
 2     this.fromAccount = fromAccount ;
 3     this.toAccount = toAccount ;
 4     this.balance = balance ;
 5     this.rank = rank ;
 6 } ;
 7 TransferTransaction.prototype = {
 8     transfer : function(){
 9         var transBalance = 1000 ;
10         if("vpi" == this.rank){
11             transBalance = 5000 ;
12         }
13         if(this.balance > transBalance){
14             throw new Error("您的转账金额超出了规定范围!") ;
15         }
16         if(this.fromAccount < this.balance){
17             throw new Error("余额不足!") ;
18         }
19         this.fromAccount = this.fromAccount - this.balance ;
20         this.toAccount = this.toAccount + this.balance ;
21     } ,
22     getFromAccount : function(){
23         return this.fromAccount ;
24     } ,
25     getToAccount : function(){
26         return this.toAccount ;
27     } ,
28     getBalance : function(){
29         return this.balance ;
30     }
31 } ;
32 
33 var tt = new TransferTransaction(1000,3000,20000,"vip") ;
34 tt.transfer() ;
35 tt.getToAccount() ;

View Code

哈哈哈老师我完成了，很快就写出来了(*^__^*) 嘻嘻……

大耳文老师看了下代码说道，恩改的不错，但依然还是有问题存在的，咱们回头说面向对象，你的代码书写方式确实符合了面向对象的特点，但是思想还停留在过程化的设计思想上。

这时大熊君过来很谦虚的说道请老师指点。。。未完待续

几分钟过后老师总结出一些例子中的问题

1.职责多需要分解

2.抽象实体模型

3.依赖性强可扩展低

咱们来一步步分析和重构

首先你的对象完成了很多职责比如级别过滤金额比对异常处理这些都不属于转账的核心功能应该划分出来

还有就是在转账操作时 Account应该是一个实体数据模型应该独立出来不应该在具体业务方法中出现这也违背了（迪米特法则）一种软件设计法则，稍后会提供扩展阅读链接(*^__^*)

重构分为几个步骤去设计：

1，建立Account类

 1 function Account(balance,rank){
 2     this.balance = balance ;
 3     this.rank = rank ;
 4 } ;
 5 Account.prototype = {
 6     getBalance : function(){
 7         return this.balance ;
 8     } 
 9     getRank : function(){
10         return this.balance ;
11     }
12 } ;

View Code

2，重新设计TransferTransaction类

 1 function TransferTransaction(fromAccount,toAccoun){
 2     this.fromAccount = fromAccount ;
 3     this.toAccount = toAccount ;
 4 } ;
 5 TransferTransaction.prototype = {
 6     transfer : function(balance){
 7         var transBalance = 1000 ;
 8         if("vpi" == this.this.fromAccount.getRank()){
 9             transBalance = 5000 ;
10         }
11         if(this.fromAccount.getBalance() > transBalance){
12             throw new Error("您的转账金额超出了规定范围!") ;
13         }
14         if(this.fromAccount.getBalance() < balance){
15             throw new Error("余额不足!") ;
16         }
17         this.fromAccount.setBalance(this.fromAccount.getBalance() - this.balance) ;
18         this.toAccount.setBalance(this.toAccount.getBalance() + this.balance) ;
19     } ,
20     getFromAccount : function(){
21         return this.fromAccount ;
22     } ,
23     getToAccount : function(){
24         return this.toAccount ;
25     }
26 } ;

View Code

3，增加新的转账管理类TransTManager类(主要负责周边功能任务)

 1 function TransTManager(fromAccount,toAccoun){
 2     this.fromAccount = fromAccount ;
 3     this.toAccount = toAccount ;
 4     this.transferTransaction = null ;
 5 } ;
 6 TransTManager.prototype = {
 7     transfer : function(balance){
 8         var transBalance = 1000 ;
 9         if("vpi" == this.this.fromAccount.getRank()){
10             transBalance = 5000 ;
11         }
12         if(this.fromAccount.getBalance() > transBalance){
13             throw new Error("您的转账金额超出了规定范围!") ;
14         }
15         if(this.fromAccount.getBalance() < balance){
16             throw new Error("余额不足!") ;
17         }
18         this.transferTransaction = new TransferTransaction(this.fromAccount,this.toAccount) ;
19         this.transferTransaction.transfer(balance) ;
20     }
21 } ;

View Code

4，接下来设计会员的级别类每个等级作为一个类出现（引用策略模式）

 1 function NormalDiscount(){
 2 
 3 } ;
 4 NormalDiscount.prototype = {
 5     getDiscount : function(){
 6         return 3000 ;
 7     }
 8 } ;
 9 function VIPDiscount(){
10 
11 } ;
12 VIPDiscount.prototype = {
13     getDiscount : function(){
14         return 5000 ;
15     }
16 } ;

View Code

5，经过重构后思维会清晰很多而且更加面向对象了，其实思维往往比语言本身重要得多

以下是完整的案例代码

 1 function Account(balance,rank){
 2     this.balance = balance ;
 3     this.rank = rank ;
 4 } ;
 5 Account.prototype = {
 6     getBalance : function(){
 7         return this.balance ;
 8     } 
 9     getRank : function(){
10         return this.balance ;
11     }
12 } ;
13 
14 function TransferTransaction(fromAccount,toAccoun){
15     this.fromAccount = fromAccount ;
16     this.toAccount = toAccount ;
17 } ;
18 TransferTransaction.prototype = {
19     transfer : function(balance){    
20         this.fromAccount.setBalance(this.fromAccount.getBalance() - balance) ;
21         this.toAccount.setBalance(this.toAccount.getBalance() + balance) ;
22     } ,
23     getFromAccount : function(){
24         return this.fromAccount ;
25     } ,
26     getToAccount : function(){
27         return this.toAccount ;
28     }
29 } ;
30 
31 function TransTManager(fromAccount,toAccoun){
32     this.fromAccount = fromAccount ;
33     this.toAccount = toAccount ;
34     this.transferTransaction = null ;
35     this.rankVendor = {
36         "normal" : {
37             get : function(){
38                 return 1000 ;
39             }
40         } ,
41         "vip" : {
42             get : function(){
43                 return 5000 ;
44             }
45         }
46     } ;
47 } ;
48 TransTManager.prototype = {
49     transfer : function(balance){
50         var transBalance = this.rankVendor[this.fromAccount.getRank()]["get"]() ;
51         if(this.fromAccount.getBalance() > transBalance){
52             throw new Error("您的转账金额超出了规定范围!") ;
53         }
54         if(this.fromAccount.getBalance() < balance){
55             throw new Error("余额不足!") ;
56         }
57         this.transferTransaction = new TransferTransaction(this.fromAccount,this.toAccount) ;
58         this.transferTransaction.transfer(balance) ;
59     }
60 } ;
61 
62 var tt = new TransTManager(new Account(5000,"vip"),new Account(3000,"Normal")) ;
63 tt.transfer(3000) ;

三，名词解释

（1）迪米特法则：迪米特法则（Law of Demeter）又叫作最少知识原则（Least Knowledge Principle 简写LKP），就是说一个对象应当对其他对象有尽可能少的了解,不和陌生人说话。英文简写为: LoD.

（2）实体模型：实体类一般对应物理意义上的实体，业务类则是对一些业务规则(算法)的封装，比如User，是一个实体类，它有属性，Login这里就算一个业务

四，总结一下

1.类的职责不能多，职责多需要分解

2.抽象实体模型

3.理解oo的特质封装，继承，多态

这时传来了大耳文老师的声音：好了中午休息结束了我们要工作了。。。。。。(此篇章已结束，未完待续(*^__^*) 嘻嘻……)

posted @ 2014-12-17 11:27 大熊君Bigbear 阅读(3397) 评论(28) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

好脑瓜儿，不如烂博客 (^__^)

大话JS面向对象之开篇万物皆对象------（ATM取款机引发的深思）

公告

好脑瓜儿，不如烂博客 (*^__^*)

大话JS面向对象之开篇万物皆对象------（ATM取款机引发的深思）

公告

好脑瓜儿，不如烂博客 (^__^)