[js 고수 의 길] 대상 + 디자인 모델 + 계승 한 걸음 한 걸음 간단 한 사 칙 연산

지금까지 저 는 대상 을 대상 으로 하 는 완전한 일련의 지식 을 다 썼 습 니 다. 앞 에는 기본적으로 이론, 원리 에 대한 이해 에 속 합 니 다. 그 다음 에 우 리 는 배 운 지식 으로 실전 을 해 보 겠 습 니 다.
원리 와 이론 을 이해 하 는 것 이 중요 한 지 봅 시다.예 는 간단 함 에서 복잡 함 까지
1. 단일 패키지 가감 곱 하기

 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

2. 구조 함수 방식

 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

 
3. 구조 함수 + 원형 대상 (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

 
4. 기생 조합 계승 + 단순 공장 모델

 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

이런 방식 은 코드 의 양 을 증가 시 켰 지만 만약 에 이 문제 가 실제 운용 이 라면 예 를 들 어 뒤에 여러 가지 연산, 두 개의 수의 곱셈, 입방, 제곱 등 이 있다.
또 다른 특수 처리 등 이 있다 면 이런 확장 성 은 매우 강하 다.