모던 웹을 위한 Javascript jQuery 책을 보면서 정리하는 내용이다.
생성자 함수로 객체를 생성할 때 new 키워드를 사용했다. 왜??
new키워드를 사용하지 않으면 어떻게 될까?
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>생성자 함수</title> <script> /* 생성자 함수 */ function Constructor (value) { this.value = value; } var constructor = new Constructor('moondol'); alert(constructor.value); // moondol 출력 </script> </head> <body> </body> </html> | cs |
위는 정상적인 코드다. 여기서 15라인에 new를 제외해도 같은 결과가 나온다. 물론 17라인도 수정해야 한다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>생성자 함수</title> <script> /* 생성자 함수 */ function Constructor (value) { this.value = value; } var constructor = new Constructor('moondol'); alert(constructor.value); // moondol 출력 </script> </head> <body> </body> </html> | cs |
일반적으로 this 키워드를 사용하면 window 객체를 나타낸다. new 키워드를 사용하지 않으면 함수를 실행하는 동안 window 객체에 속성을 추가한 것이 된다.
but new 키워드로 함수를 호출하면 객체를 위한 공간을 만들고 this 키워드가 해당 공간을 의미한다.
캡슐화
잘못 사용될 수 있는 객체의 특정 부분을 사용자가 마음대로 사용할 수 없도록 막는 기술이다. 자바스크립트에서 캡슐화를 구현할 때는 클로저를 사용한다.
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 | <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>캡슐화</title> <script> /* 캡슐화 */ function Rectangle (width, height) { this.width = width; this.height = height; } Rectangle.prototype.getArea = function () { return this.width * this.height; }; var rectangle = new Rectangle (5, 7); rectangle.width = -2; // 음수를 넣어도 계산이 된다. alert('area : ' + rectangle.getArea()); </script> </head> <body> </body> </html> | cs |
21라인과 같이 음수 값을 넣으면 엉뚱한 값이 나온다. 여기선 단순히 음수를 넣었지만 실제 업무에서는 큰 영향을 끼칠 수 있기에 캡슐화를 한다.
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 | <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>캡슐화</title> <script> /* 캡슐화 */ function Rectangle (w, h) { this.width = w; this.height = h; // getter, setter 정리 this.getWidth = function () { return w; }; this.getHeight = function () { return h; }; this.setWidth = function (w) { if (w < 0) { throw '길이는 음수가 될 수 없습니다.'; } else { width = w; } }; this.setHeight = function (w) { if (h < 0) { throw '높이는 음수가 될 수 없습니다.'; } else { height = h; } }; } Rectangle.prototype.getArea = function () { return this.getWidth() * this.getHeight(); }; var rectangle = new Rectangle (5, 7); rectangle.setWidth(-2); alert('area : ' + rectangle.getArea()); </script> </head> <body> </body> </html> | cs |
41라인에서 음수를 넣으면 에러로 실행되지 않는다.
게터와 세터를 만드는 것 자체가 캡슐화가 아님을 유의해야 한다. 캡슐화는 특정 속성이나 메서드를 사용자가 사용할 수 없도록 숨기는 것이다.
퇴사 관련 이야기들을 모아 책으로 출판했습니다. 아래 링크에서 전체 목차를 읽어보세요! 대기업 퇴사 이야기 전체보기 : http://www.bookk.co.kr/book/view/21659 아래 링크로 간단한 후기 링크를 남기면 배송비도 환급된다고 하니 참고해주세요.
