ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • class 문법에서 접근제한자 어떻게 해야 할까요?
    자바스크립트 2023. 3. 11. 21:53
    반응형

    es6 문법에서 공식적으로 private에 대한 문법은 제공하고 있어요

    바로 이름 앞에 #을 붙이는거에요

    그렇지만 protected에 대한 문법은 없어요

    암묵적으로 이름앞에 _를 붙입니다.

    class T {
    	// private 변수
    	#pwd = 1234;
    
        // 자식만 직접 접근하자는 약속이고 값을 보고 싶으면 getId를 호출해라 라는거에요
        _id = 1;
        getId() {
        	return this._id;
        }
    }

    그럼 위에 private 이거 어떻게 가능한건지 궁금하지 않아요?

    const #pwd = new WeakMap();
    
    class T {
    	constructor() {
        	#pwd.set(this, 0);
            let pwd = #pwd.get(this);
        }
    }

    위에 보면 외부에서 접근할수 없는 스코프에  WeakMap을 만들고 WeakMap에다가 this를 key 로 해서 값을 설정하고 가져오고 하는거에요

    이렇게 해서 object를 계속 생성해도 서로 다른 값을 가질수 있도록 하고 값을 숨기는거에요

    WeakMap은 object만 key로 가질수 있어요

    이렇게 되면 외부에서는 pwd를 접근할수 없겠져? class 내부에서는 당연히 볼수 있는 값이지만요

     

    es5로 WeakMap을 통해서 구현할수도 있지만 es5로 private 처리하기 이런거 검색해보시면 아래와 같은 방법도 나올거에요

    함수 내부에다가 변수 선언하고 그거 set/get 하는 함수 만들어서 this에다가 붙이는거에요

    생성자 함수 실행하면 객체 반환할거고 _id 변수는 더이상 접근할 방법은 없어지고 set/get 함수통해서 조작 하라는거에요

    var T = function() {
    	var _id = 10;
        this.setId = function(id) {
        	_id = id;
        };
        this.getId = function() {
        	return _id;
        };
    }

    자바스크립트는 GC라는 도구가 알아서 메모리 정리해줘요

    참조가 없어지면 정리되는거에요. 그럼 _id는 함수 끝날때 없어져야되잖아요. 근데 set/get 함수에서 쓰겠다고 하고 있져?

    이것이 클로저라는 개념이에요

    내부함수에서 사용하고 있는 외부함수 변수는 정리되지 않고 메모리에 남아있고 내부함수는 그 메모리를 기억하고 있는거에요

     

    같은 자바 스크립트인데 가끔 es6문법에서는 가능한데 왜 es5에서는 안되는거야 라는 생각이 들때가 있잖아요

    es6에서 할수 있는건 es5에서도 할수 있어요 문법적으로 접근이 쉽게 만들어준거고

    babel을 사용해서 변환한다음 보면 어떻게 이런걸 구현했는지 알수 있어요

     

    요즘 추세는 OOP고 OOP의 기본은 class로 모듈화 하고 접근제한자로 캡슐화 하는거잖아요

    class 이쁘게 만들어봐요

    let autoIdGenerator = 0;
    
    Class T {
    	#age = 0;
    	#internalId = autoIdGenerator++;
        
        _getInternalId() {
        	return this.#internalId;
        }
        
        setAge(age) {
        	if (age < 0) {
            	throw Error("age must be bigger then 0");
            }
            
            this.#age = age;
        }
        
        getAge() {
        	return this.#age;
        }
    }
    반응형
Designed by Tistory.