메서드 체인(Method Chaining)

javascript 2017. 8. 31. 14:19

728x90
반응형

메서드 체이닝


메서드가 객체를 반환하게 되면, 메서드의 반환 값인 객체를 통해 또 다른 함수를 호출할 수 있습니다. 이러한 프로그래밍 패턴을 메서드 체이닝(Method Chaining) 이라 부릅니다.



마치 쇠사슬 처럼 객체를 연결고리로 함수를 지속적으로 호출한다고 하여 Method Chaining입니다. - Photo By Philippe P -




객체 선언 및 생성


다음과 같이 자바스크립트 코드 객체를 작성합니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>함수 테스트</title>
    <script>
        //객체 생성
        var MySquare = function () {
            this._width = 0;
            this._height = 0;
            this._x = 0;
            this._y = 0;
            this._color = "";
        };
        MySquare.prototype.setWidth = function (_w) {
            this._width = _w;
        };
        MySquare.prototype.setHeight = function (_h) {
            this._height = _h;
        };
        MySquare.prototype.setX = function (_x) {
            this._x = _x;
        };
        MySquare.prototype.setY = function (_y) {
            this._y = _y;
        };
        MySquare.prototype.setColor = function (_c) {
            this._color = _c;
        };
        MySquare.prototype.getInfo = function () {
            console.log(this._width);
            console.log(this._height);
            console.log(this._x);
            console.log(this._y);
            console.log(this._color);
        };
        //객체 값 지정 및 호출
        var _square = new MySquare();
        _square.setWidth(100);
        _square.setHeight(100);
        _square.setX(100);
        _square.setY(100);
        _square.setColor("BLUE");
        _square.getInfo();
    </script>
</head>
<body>
</body>
</html>
cs


자바스크립트 코드는 MySquare 객체의 속성 및 함수를 선언하고, 값을 지정하여 메서드를 호출하는 형태로 되어 있습니다. 결과값은 아래와 같이 입력한 값들이 잘 나타납니다. 무난하고 단순한 코딩입니다.






메서드 체이닝


메서드 체이닝은 객체에 값을 선언하고 호출하는 부분에서 이루어집니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>메서드 체인</title>
 
    <script>
        // 객체 생성
        var MySquare = function(){
            this._width = 0;
            this._height = 0;
            this.x = 0;
            this.color = "";
        };
 
        /*
        MySquare.prototype.setWidth = function(_w){
            this._width = _w;
        }
        MySquare.prototype.setHeight = function(_h){
            this._height = _h;
        }
        MySquare.prototype.setX = function(_x){
            this._x = _x;
        }
        MySquare.prototype.setY = function(_y){
            this._y = _y;
        }
        MySquare.prototype.setColor = function(_c){
            this._color = _c;
        }
        */
 
        MySquare.prototype.setWidth = function(_w){
            this._width = _w;
            return this;
        }
 
        MySquare.prototype.setHeight = function(_h){
            this._height = _h;
            return this;
        }
 
        MySquare.prototype.setX = function(_x){
            this._x = _x;
            return this;
        }
 
        MySquare.prototype.setY = function(_y){
            this._y = _y;
            return this;
        }
 
        MySquare.prototype.setColor = function(_c){
            this._color = _c;
            return this;
        }
 
        MySquare.prototype.getInfo = function(){
            console.log(this._width);
            console.log(this._height);
            console.log(this._x);
            console.log(this._y);
            console.log(this._color);
        }
        
 
        // 객체 값 지정 및 호출
        var _square = new MySquare();
        /*
        _square.setWidth(100);
        _square.setHeight(100);
        _square.setX(100);
        _square.setY(100);
        _square.setColor("BLUE");
        _square.getInfo();
        */
        _square.setWidth(100).setHeight(100).setX(100).setY(100).setColor("BLUE").getInfo();
 
        
    </script>
</head>
<body>
    
</body>
</html>
cs


결과값은 위에서 입력한 값과 동일합니다.



동일한 결과가 나오게 되는 이유는 바로 객체의 반환값을 자기 자신(this)로 지정했기 때문입니다. _square의 setWidth(100) 함수는 넓이를 100으로 지정하고 _square 객체 자신을 반환합니다. 반환값인 _square 객체는 당연히 setHeight(100) 함수를 실행할 수 있습니다. setX(100)과 setY(100), setColor("BLUE") 함수도 마찬가지 방식입니다.


이런 식으로 자기 자신을 반환하면서 다른 함수를 지속적으로 호출하는 릴레이 방식의 프로그래밍 패턴이 메서드 체이닝 입니다. jQuery 라이브러리에서 매우 흔하게 볼 수 있는 디자인 패턴입니다.





원본 링크 : https://goo.gl/Fqa8Zh

반응형
저작자표시 비영리 변경금지

'javascript' 카테고리의 다른 글

[용어] 클래스, 인스턴스, 객체, 프로퍼티, 메서드  (0) 2017.09.24
콜백 함수(Callback function)  (6) 2017.09.03
프로토타입(Prototype)  (0) 2017.08.28
[함수] 매개변수를 선언하지 않고 매개변수의 값에 접근하는 방법  (0) 2017.07.16
전역변수 차이  (2) 2017.06.15

티스토리툴바