[js高手之路]面向對象+設計模式+繼承一步步改造簡單的四則運算
阿新 • • 發佈:2017-09-04
繼承 設計模式
到目前為止,我已經寫完了面向對象完整的一個系列知識,前面基本屬於理論,原理的理解,接下來,我們就用學到的知識來實戰下吧.
看看理解原理和理論是否重要?例子從簡單到復雜
一、單體(字面量)封裝加減乘除
var Oper = { add : function( n1, n2 ){ return n1 + n2; }, sbb : function( n1, n2 ){ return n1 - n2; }, mul : function( n1, n2 ){ return n1 * n2; }, div : function( n1, n2 ){ return n1 / n2; }, }; console.log( Oper.add( 10, 20 ) ); //30 console.log( Oper.sbb( 10, 20 ) ); //-10 console.log( Oper.mul( 10, 20 ) ); //200 console.log( Oper.div( 10, 20 ) ); //0.5
二、構造函數方式
function Oper( n1, n2 ){ this.num1 = n1 || 0; this.num2 = n2 || 0; this.setData = function( n1, n2 ){ this.num1 = n1; this.num2 = n2; }; this.add = function(){ this.setData( arguments[0] || this.num1 || 0, arguments[1] || this.num2 || 0 ); return this.num1 + this.num2; }; this.sbb = function(){ this.setData( arguments[0] || this.num1 || 0, arguments[1] || this.num2 || 0 ); return this.num1 - this.num2; }; this.mul = function(){ this.setData( arguments[0] || this.num1 || 0, arguments[1] || this.num2 || 0 ); return this.num1 * this.num2; }; this.div = function(){ this.setData( arguments[0] || this.num1 || 0, arguments[1] || this.num2 || 0 ); return this.num1 / this.num2; }; }; console.log( new Oper( 10, 20 ).add() ); //30 console.log( new Oper(100, 200).sbb( 10, 20 ) ); //-10 console.log( new Oper().mul( 10, 20 ) ); //200 console.log( new Oper().div( 10, 20 ) ); //0.5
三、構造函數+原型對象(prototype)
function Oper(n1, n2) { this.num1 = n1 || 0; this.num2 = n2 || 0; }; Oper.prototype = { constructor : Oper, setData : function (n1, n2) { this.num1 = n1; this.num2 = n2; }, add : function () { this.setData(arguments[0] || this.num1 || 0, arguments[1] || this.num2 || 0); return this.num1 + this.num2; }, sbb : function () { this.setData(arguments[0] || this.num1 || 0, arguments[1] || this.num2 || 0); return this.num1 - this.num2; }, mul : function () { this.setData(arguments[0] || this.num1 || 0, arguments[1] || this.num2 || 0); return this.num1 * this.num2; }, div : function () { this.setData(arguments[0] || this.num1 || 0, arguments[1] || this.num2 || 0); return this.num1 / this.num2; } }; console.log(new Oper().add(10, 20)); //30 console.log(new Oper( 100, 200 ).sbb()); //-100 console.log(new Oper().mul(10, 20)); //200 console.log(new Oper().div(10, 20)); //0.5
四、寄生組合繼承+簡單工廠模式
function Oper( n1, n2 ){ this.num1 = n1; this.num2 = n2; }; Oper.prototype.run = function(){} function object( o ){ var G = function(){}; G.prototype = o; return new G(); }; function inheritPrototype( subObj, superObj ){ var proObj = object( superObj.prototype ); proObj.constructor = subObj; subObj.prototype = proObj; } function OperAdd( n1, n2 ){ Oper.call( this, n1, n2 ); } inheritPrototype( OperAdd, Oper ); OperAdd.prototype.run = function(){ return this.num1 + this.num2; } function OperSbb( n1, n2 ){ Oper.call( this, n1, n2 ); } inheritPrototype( OperSbb, Oper ); OperSbb.prototype.run = function(){ return this.num1 - this.num2; } function OperMul( n1, n2 ){ Oper.call( this, n1, n2 ); } inheritPrototype( OperMul, Oper ); OperMul.prototype.run = function(){ return this.num1 * this.num2; } function OperDiv( n1, n2 ){ Oper.call( this, n1, n2 ); } inheritPrototype( OperDiv, Oper ); OperDiv.prototype.run = function(){ return this.num1 / this.num2; } function OperFactory( oper, n1, n2 ){ switch( oper ) { case ‘+‘: return new OperAdd( n1, n2 ).run(); break; case ‘-‘: return new OperSbb( n1, n2 ).run(); break; case ‘*‘: return new OperMul( n1, n2 ).run(); break; case ‘/‘: return new OperDiv( n1, n2 ).run(); break; } } console.log( OperFactory( ‘+‘, 10, 20 ) ); //30 console.log( OperFactory( ‘-‘, 10, 20 ) ); //-10 console.log( OperFactory( ‘*‘, 10, 20 ) ); //200 console.log( OperFactory( ‘/‘, 10, 20 ) ); //0.5
這種方式,雖然增加了代碼量, 如果這道題是實際運用,比如說後面還有很多種運算,兩個數的乘方,立方,平方等等,
還有其他特殊處理等等,那麽這種擴展性就非常強
本文出自 “ghostwu” 博客,請務必保留此出處http://ghostwu.blog.51cto.com/11192807/1962431
[js高手之路]面向對象+設計模式+繼承一步步改造簡單的四則運算