8장 클래스로 인터페이스를 간결하게 유지하라

설아아빠·2021년 12월 26일
0
post-thumbnail

1. 읽기 쉬운 클래스를 만들어라

        class Coupon {
            constructor(price, name) {
                this.price = price;
                this.name = name;
            }
        }

        const coupon = new Coupon(300, 'test');
        console.log(coupon);

2. 상속으로 메서드를 공유하라

        class Coupon {
            constructor(price, name) {
                this.price = price;
                this.name = name;
            }

            getCouponName() {
                return this.name;
            }
        }

        class UpgradeCoupon extends Coupon {

        }

        const coupon = new Coupon(300, 'test');
        console.log(coupon);

        const upgradeCoupon = new UpgradeCoupon(500, 'test1');
        console.log(upgradeCoupon.getCouponName());

3. 클래스로 기존의 프로토타입을 확장하라

        class Coupon {
            constructor(price, name) {
                this.price = price;
                this.name = name;
            }

            getCouponName() {
                return this.name;
            }
        }

        Coupon.prototype.getTime = () => {
            return new Date();
        };

        class UpgradeCoupon extends Coupon {
            //override getTime
            getTime() {
                return '변화 : ' + super.getTime();
            }
        }

        const coupon = new Coupon(300, 'test');
        console.log(coupon.getTime());

        const upgradeCoupon = new UpgradeCoupon(2, 'test');
        console.log(upgradeCoupon.getTime());

4. get과 set으로 인터페이스를 단순하게 만들어라

        class Coupon {
            constructor(price, name) {
                this.price = price;
                this.name = name;
            }

            get couponName() {
                return this.name;
            }

            get couponPrice() {
                return this.price;
            }

            set couponName(name) {
                this.name = name + '1234';
            }
        }

        const coupon = new Coupon(300, 'test');
        console.log(coupon.couponName, coupon.couponPrice);
        coupon.couponName = 'test111';
        console.log(coupon.couponName, coupon.couponPrice);

5. 제너레이터로 이터러블 속성을 생성하라

        function* getTest() {
            yield 'a';
            yield 'b';
            yield 'c';
            yield 'd';
        }

        const data = getTest();
        console.log(data.next());
        console.log(data.next());
        console.log(data.next());
        console.log(data.next());
        console.log(data.next());

        console.log([...getTest()]);

6. bind()로 문맥 문제를 해결하라

        class Validator {
            message = '가 유효하지 않습니다';

            setMessage = field => `${field} ${this.message}`;
            setMessage2 = fields => fields.map(this.setMessage.bind(this));
        }

        const v = new Validator();
        console.log(v.setMessage2(['test', 'test2']));
        
profile
back-end(java), front-end (조금)

0개의 댓글