[js高手之路]面向对象+设计模式+继承一步步改造…

2018-06-24 00:03:20来源：未知阅读 ()

到目前为止，我已经写完了面向对象完整的一个系列知识，前面基本属于理论，原理的理解，接下来，我们就用学到的知识来实战下吧.

看看理解原理和理论是否重要？例子从简单到复杂

一、单体（字面量）封装加减乘除

 1             var Oper = {
 2             add : function( n1, n2 ){
 3                 return n1 + n2;
 4             },
 5             sbb : function( n1, n2 ){
 6                 return n1 - n2;
 7             },
 8             mul : function( n1, n2 ){
 9                 return n1 * n2;
10             },
11             div : function( n1, n2 ){
12                 return n1 / n2;
13             },
14         };
15         console.log( Oper.add( 10, 20 ) ); //30
16         console.log( Oper.sbb( 10, 20 ) ); //-10
17         console.log( Oper.mul( 10, 20 ) ); //200
18         console.log( Oper.div( 10, 20 ) ); //0.5

二、构造函数方式

 1         function Oper( n1, n2 ){
 2             this.num1 = n1 || 0;
 3             this.num2 = n2 || 0;
 4             this.setData = function( n1, n2 ){
 5                 this.num1 = n1;
 6                 this.num2 = n2;
 7             };
 8             this.add = function(){
 9                 this.setData( arguments[0] || this.num1 || 0, arguments[1] || this.num2 || 0 );
10                 return this.num1 + this.num2;
11             };
12             this.sbb = function(){
13                 this.setData( arguments[0] || this.num1 || 0, arguments[1] || this.num2 || 0 );
14                 return this.num1 - this.num2;
15             };
16             this.mul = function(){
17                 this.setData( arguments[0] || this.num1 || 0, arguments[1] || this.num2 || 0 );
18                 return this.num1 * this.num2;
19             };
20             this.div = function(){
21                 this.setData( arguments[0] || this.num1 || 0, arguments[1] || this.num2 || 0 );
22                 return this.num1 / this.num2;
23             };
24         };
25 
26         console.log( new Oper( 10, 20 ).add() ); //30
27         console.log( new Oper(100, 200).sbb( 10, 20 ) ); //-10
28         console.log( new Oper().mul( 10, 20 ) ); //200
29         console.log( new Oper().div( 10, 20 ) ); //0.5

三、构造函数+原型对象（prototype）

 1         function Oper(n1, n2) {
 2             this.num1 = n1 || 0;
 3             this.num2 = n2 || 0;
 4         };
 5         Oper.prototype = {
 6             constructor : Oper,
 7             setData : function (n1, n2) {
 8                 this.num1 = n1;
 9                 this.num2 = n2;
10             },
11             add : function () {
12                 this.setData(arguments[0] || this.num1 || 0, arguments[1] || this.num2 || 0);
13                 return this.num1 + this.num2;
14             },
15             sbb : function () {
16                 this.setData(arguments[0] || this.num1 || 0, arguments[1] || this.num2 || 0);
17                 return this.num1 - this.num2;
18             },
19             mul : function () {
20                 this.setData(arguments[0] || this.num1 || 0, arguments[1] || this.num2 || 0);
21                 return this.num1 * this.num2;
22             },
23             div : function () {
24                 this.setData(arguments[0] || this.num1 || 0, arguments[1] || this.num2 || 0);
25                 return this.num1 / this.num2;
26             }
27         };
28         console.log(new Oper().add(10, 20)); //30
29         console.log(new Oper( 100, 200 ).sbb()); //-100
30         console.log(new Oper().mul(10, 20)); //200
31         console.log(new Oper().div(10, 20)); //0.5

四、寄生组合继承+简单工厂模式

 1         function Oper( n1, n2 ){
 2             this.num1 = n1;
 3             this.num2 = n2;
 4         };
 5         Oper.prototype.run = function(){}
 6         function object( o ){
 7             var G = function(){};
 8             G.prototype = o;
 9             return new G();
10         };
11         function inheritPrototype( subObj, superObj ){
12             var proObj = object( superObj.prototype );
13             proObj.constructor = subObj;
14             subObj.prototype = proObj;
15         }
16 
17         function OperAdd( n1, n2 ){
18             Oper.call( this, n1, n2 );
19         }
20         inheritPrototype( OperAdd, Oper );
21         OperAdd.prototype.run = function(){
22             return this.num1 + this.num2;
23         }
24 
25         function OperSbb( n1, n2 ){
26             Oper.call( this, n1, n2 );
27         }
28         inheritPrototype( OperSbb, Oper );
29         OperSbb.prototype.run = function(){
30             return this.num1 - this.num2;
31         }
32 
33         function OperMul( n1, n2 ){
34             Oper.call( this, n1, n2 );
35         }
36         inheritPrototype( OperMul, Oper );
37         OperMul.prototype.run = function(){
38             return this.num1 * this.num2;
39         }
40 
41         function OperDiv( n1, n2 ){
42             Oper.call( this, n1, n2 );
43         }
44         inheritPrototype( OperDiv, Oper );
45         OperDiv.prototype.run = function(){
46             return this.num1 / this.num2;
47         }
48 
49         function OperFactory( oper, n1, n2 ){
50             switch( oper ) {
51                 case '+':
52                     return new OperAdd( n1, n2 ).run();
53                 break;
54                 case '-':
55                     return new OperSbb( n1, n2 ).run();
56                 break;
57                 case '*':
58                     return new OperMul( n1, n2 ).run();
59                 break;
60                 case '/':
61                     return new OperDiv( n1, n2 ).run();
62                 break;
63             }
64         }
65 
66         console.log( OperFactory( '+', 10, 20 ) ); //30
67         console.log( OperFactory( '-', 10, 20 ) ); //-10
68         console.log( OperFactory( '*', 10, 20 ) ); //200
69         console.log( OperFactory( '/', 10, 20 ) ); //0.5