비공개 프로퍼티와 메서드
자바 등 다른언어와는 달리 자바스크립트에는 private, protected, public 프로퍼티와 메서드를 나타내는 별도의 문법이 없다.
객체의 모든 멤버는 pulic, 즉 공개되어 있다.
var myobj = {
myprop: 1,
getProp: function(){
return this.myprop;
}
};
// 두개 모두 공개적으로 접근이 가능
console.log(myobj.myprop);
console.log(myobj.getProp());
// 생성자 함수를 사용해 객체를 생성할 때도 마찬가지로 모든 멤버가 공개된다.
function Gadget(){
this.name = 'iPod';
this.stretch = function(){
return 'iPod';
};
}
// 두개 모두 공개적으로 접근이 가능
var toy = new Gadget();
console.log(toy.name);
console.log(toy.stretch());
비공개 멤버
비공개 멤버에 대한 별도의 문법은 없지만 클로저를 사용해서 구현할 수 있다.
생성자 함수 안에서 클로저를 만들면 클로저 유효범위 안의 변수는 생성자 함수 외부에 노출되지 않지만 객체의 공개 메서드 안에서는 쓸 수 있다. 즉 생성자에서 객체를 반환할 때 객체의 메서드를 정의하면 이 메서드 안에서는 비공개 변수에 접근할 수 있는것이다.
function Gadget(){
// 비공개 멤버
var name = 'iPod';
// 공개된 함수
this.getName = function(){
return name;
};
}
var toy = new Gadget();
// name 은 비공개 이므로 undefied 출력
console.log(toy.name);
// 공개 메서드에서는 name에 접근할 수 있다.
console.log(toy.getName());
비공개 멤버의 허점
function Gadget(){
// 비공개 멤버
var specs = {
screen_width: 320,
screen_height: 480,
color: "white"
};
// 공개함수
this.getSpecs = function(){
return specs;
}
}
var toy = new Gadget();
// name 은 비공개 이므로 undefied 출력
console.log(toy.name);
// 공개 메서드에서는 name에 접근할 수 있다.
console.log(toy.getName());
getSpec() 메서드가 specs 객체에 대한 참조를 반환하는 문제가 있다.
var toy = new Gadget(),
specs = toy.getSpecs();
specs.color = "black";
specs.price = "free";
console.dir(toy.getSpecs());
/*
파이어폭스 로그 결과
color: "black"
price: "free"
screen_height: 480
screen_width: 320
<prototype>: Object { … }
*/
객체 리터럴과 비공개 멤버
// v1
var myobj; // 이 변수에 객체를 할당
(function(){
// 비공개 멤버
var name = "my, oh my";
// 공개될 부분을 구현
myobj = {
getName: function(){
return name;
}
}
}());
console.log(myobj.getName());
// v2
var myobj = (function(){
// 비공개 멤버
var name = "my, oh my";
// 공개될 부분을 구현
return {
getName: function(){
return name;
}
}
}());
console.log(myobj.getName());
프로토타입과 비공개 멤버
생성자를 사용하여 비공개 멤버를 만들 경우 생성자를 호출하여 새로운 객체를 만들 때마다 비공개 멤버가 매번 재생성된다는 단점이 있다.
이러한 중복을 없애고 메모리를 절약하려면 공통 프로퍼티와 메서드를 생성자의 prototype 프로퍼티에 추가해야 한다.
function Gadget(){
// 비공개 멤버
var name = 'iPod';
// 공개함수
this.getName = function(){
return name;
};
}
Gadget.prototype = (function(){
// 비공개 멤버
var browser = "Mobile Webkit";
// 공개된 프로토타입 멤버
return {
getBrowser : function(){
return browser;
}
}
}())
var toy = new Gadget();
console.log(toy.getName()); // 객체 인스턴스의 특권 메서드
console.log(toy.getBrowser()); // 프로토타입의 특권 메서드
비공개 함수를 공개 메서드로 노출 시키는 방법
노출 패턴은 비공개 메서드를 구현하면서 동시에 공개 메서드도 노출 하는것을 말한다.
var myarray;
(function(){
var astr = "[object Array]",
toString = Object.prototype.toString;
function isArray(a){
return toString.call(a) === astr;
}
function indexOf(haystack, needle){
var i = 0,
max = haystack.length;
for (; i < max; i += 1){
if(haystack[i] === needle){
return i;
}
}
return -1;
}
myarray = {
isArray: isArray,
indexOf: indexOf,
inArray: indexOf
};
}());
console.log(myarray.isArray([1,2])); // TRUE
var a = myarray.isArray({0: 1}); // FALSE
// console.log(a); // false
console.log(myarray.indexOf(["A","B","C"], "C")); // 2
console.log(myarray.inArray(["A","B","C"], "C")); // 2
'개발 > dev-patterns' 카테고리의 다른 글
| 자바스크립트 코딩 기법과 핵심 패턴 - 샌드박스 패턴 (0) | 2019.11.01 |
|---|---|
| 자바스크립트 코딩 기법과 핵심 패턴 - 모듈 패턴 (0) | 2019.11.01 |
| 자바스크립트 코딩 기법과 핵심 패턴 - 네임스페이스 패턴 (0) | 2019.08.13 |
| 자바스크립트 코딩 기법과 핵심 패턴 - 커리(Curry) (0) | 2019.08.13 |
| 자바스크립트 코딩 기법과 핵심 패턴 - 설정 객체 패턴 (0) | 2019.08.09 |