分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 运营维护

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

发布时间:2023-09-06 01:08责任编辑:沈小雨关键词:js面向对象

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

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

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

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高手之路]面向对象+设计模式+继承一步步改造简单的四则运算

原文地址:http://ghostwu.blog.51cto.com/11192807/1962431

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved