[JS] Encapsulation 캡슐화, private fields and methods
강의 출처 : The Complete JavaScript Course 2022 Jonas (Udemy)
Encapsulation
Properties와 Methods를 보호하는 캡슐화
1. 클래스 밖의 코드 또는 클래스 내의 데이터가 실수로 조작되는 것을 막아준다.
2. 캡슐화를 통하여 조금의 interface만을 노출시킬 때 (a small API consisiting only of a few public methods) 개발자들이 좀 더 안전하게 다른 내부의 method들을 수정할 수 있다.
Properties와 Methods를 보호하는 캡슐화
1. 클래스 밖의 코드 또는 클래스 내의 데이터가 실수로 조작되는 것을 막아준다.
2. 캡슐화를 통하여 조금의 interface만을 노출시킬 때 (a small API consisiting only of a few public methods) 개발자들이 좀 더 안전하게 다른 내부의 method들을 수정할 수 있다.
1)Public fields
2)Private fields
3)Public methods
4)Private methods
(there is also an static version) => static 앞에 붙히기
class Account {
//1) Public fields (instances)-> instances 자체에 저장됌. not in prototype
locale = navigator.language;
//2) Private fields (instances)
#movements = [];
#pin;
constructor(owner, currency, pin) {
this.owner = owner;
this.currency = currency;
//Protected property
this.#pin = pin;
//this._movements = [];
//this.locale = navigator.language;
console.log(`Thanks for opening an account, ${owner}`);
}
//3) Public methods
//Public interface
getMovements() {
return this.#movements;
}
deposit(val) {
this.#movements.push(val);
return this;
}
withdraw(val) {
this.deposit(-val);
return this;
}
requestLoan(val) {
if (this.#approveLoan(val)) {
this.deposit(val);
console.log(`Loan approved`);
}
return this;
}
//4) Private methods
//_approveLoan(val){
#approveLoan(val) {
return true;
}
}
const acc1 = new Account('Jonas', 'EUR', 1111);
console.log(acc1);
//Account {owner: 'Jonas', currency: 'EUR', pin: 1111, movements: Array(0), locale: 'ko-KR'}
// 일일히 movements 내 item 추가하는 것보다 이를 처리할 수 있는 method를 만들어주는 것이 좋다!
// acc1.movements.push(250);
// acc1.movements.push(-140);
acc1.deposit(250);
acc1.withdraw(140);
acc1.requestLoan(1000);
console.log(acc1.getMovements()); //private 한 정보 접근하는 법 => 해당 item들을 return 해주는 method 만들기 [250, -140, 1000]
// this._movements
// console.log(acc1.#movements);error => private field 접근 불가
// console.log(acc1.#pin); => error
// console.log(acc1.#approveLoan(100)); ==> error
Chaining Methods
각각의 함수에 return this 를 적어줌으로써 class 자체를 return하하게 되면 chaining 이 가능해진다.
acc1.deposit(300).deposit(500).withdraw(35).requestLoan(25000).withdraw(4000);
//
console.log(acc1.getMovements());
// [250, -140, 1000, 300, 500, -35, 25000, -4000]
ES6 Summary
- Classes are just "Syntactic Sugar" over constructor functions
- Classes are not hoisted
- Classes are first-class citizens
- Class is always executed in strict mode.
Author And Source
이 문제에 관하여([JS] Encapsulation 캡슐화, private fields and methods), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@hoje15v/Encapsulation-캡슐화-private-fields-and-methods저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)