zoukankan      html  css  js  c++  java
  • [js高手之路]面向对象+设计模式+继承一步步改造简单的四则运算

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

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

    一、单体(字面量)封装加减乘除

     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

    这种方式,虽然增加了代码量, 如果这道题是实际运用,比如说后面还有很多种运算,两个数的乘方,立方,平方等等,

    还有其他特殊处理等等,那么这种扩展性就非常强

  • 相关阅读:
    yzoj P2344 斯卡布罗集市 题解
    yzoj P2350 逃离洞穴 题解
    yzoj P2349 取数 题解
    JXOI 2017 颜色 题解
    NOIP 2009 最优贸易 题解
    CH 4302 Interval GCD 题解
    CH4301 Can you answer on these queries III 题解
    Luogu2533[AHOI2012]信号塔
    Luogu3320[SDOI2015]寻宝游戏
    Luogu3187[HNOI2007]最小矩形覆盖
  • 原文地址:https://www.cnblogs.com/ghostwu/p/7441773.html
Copyright © 2011-2022 走看看