rhanziy

JS - 객체, 배열의 객체지향 문법 상속기능 class 본문

Html_css_js

JS - 객체, 배열의 객체지향 문법 상속기능 class

rhanziy 2022. 12. 22. 14:23
        // 옛날방식 상속기능
        const Student = function(name, age){
            this.name = name,
            this.age = age

        }
        Student.prototype.sayHi = function(){
            console.log(`안녕 나는 ${this.name}이야`);

        }
        
        let 학생1 = new Student('Kim', 20);
        학생1.sayHi();


        var arr = [1,2,3];
        var arr2 = [3,6,8,3,2,5,7];

        Array.prototype.remove3 = function(){
            for(let i = 0; i < this.length; i++){
                if(this[i] == 3){
                    this.splice(i,1);
                }
            }
        }

        arr.remove3();
        arr2.remove3();
        console.log(arr);
        console.log(arr2);


        // ES5식 상속기능

        var 부모 = { name: 'Kim', age : 50 };

        var 자식 = Object.create(부모);
        자식.age = 20;

        var 손자 = Object.create(자식);
        손자.age;

 

prototype 은 유전자라고 생각하면 편하다.

Array나 Object는 콘솔에 찍어보면 __proto__ 를 조회할 수 있는데,

여기에 기본 자바스크립트 내장함수가 들어있다.

물론 커스텀해서 등록 가능!

 

부모로부터 물려받은 데이터를 상속이라고 표현할 수 있음.

자식에 없는 값이 부모에 있다면 가까운 순차적으로 호출한다.

 

constructor(생성자)는 함수나 class로 만들 수 있다.

 

 // ES6식 상속기능

        class 부모 {
            constructor(){
                this.name = 'Kim';
                // this.sayHi = function(){ console.log('hello'); }
            }
            sayHi(){
                console.log('hello ' + this.name);
                // contructor 밖에 생성하면 부모의 prototype에 추가됨
                // 모든 자식이 공통적으로 사용 가능. 관리가 편함.
            }
        }

        var 자식 = new 부모();

        자식.__proto__  // 부모의 prototype출력
        Object.getPrototypeOf(자식);

 

이건 ES6 문법. 상속을 왜하냐?

1. 오브젝트를 여러개 만들기 위해. 가독성도 좋고 관리도 쉬움.

2. 다음 글에

3. 추가

4. 함

Comments