[JavaScript] 객체지향, Constructor(생성자), new

JavaScript

[JavaScript] 객체지향, Constructor(생성자), new

SangRok Jung 2022. 4. 18. 21:51

객체지향 자바스크립트

데이터, 함수 기반 프로그래밍

data가 보호받지 못하는 문제점이 있다.

func2 입장에서 data1이 바뀐 이유에 대해서 알 수 없다.

객체지향 프로그래밍

기존의 데이터, 함수 기반 개발에서 객체를 기반으로 구현하는 프로그래밍

객체지향 프로그래밍의 장점

응집도 향상 : 객체 = 속성 + 메서드

재활용성 : 범용성을 가진 객체를 통한 재활용성 증가.

유지보수성 : 코드의 구성 파악 용이, 낮은 결합도로 인한 오류 파급 제한

객체의 생성 방법

Object 형을 이용

사용하기 편함.
정형화된 방식이 없음.
인스턴스마다 코드를 작성해줘야 함.

Closure를 이용.

Readability가 낮음
독특한 메커니즘을 이용

* 객체를 생성해서 리턴해주는 기능을 가진 함수를 Facroty 함수 라고 한다.

<body>
    <script>
        const makeStudent = function(id, name)
        {
            return {
                getId(){
                    return id;
                },
                getName(){
                    return name;
                }
            }
        }

        const cst1 = makeStudent('JSR', '정상록')
        console.log(cst1.getName())
        //정상록

        const cst2 = makeStudent('JCS', '정찬성')
        console.log(cst2.getName())
        //정찬성


    </script>
</body>

class를 이용

가장 좋은 방식.

Constructor (생성자)

객체를 초기화 하는 함수.

new로 사용한다.

일반적인 객체지향언어에서의 생성자와 다름, JS의 생성자는 일반함수를 기반으로 객체를 생성.

데이터와 메소드를 묶어서 사용하기 위한 목적이다.

Constructor의 사용법

<body>
    <script>
        const Animal = function()
        {
            console.log('Animal!!');
        }

        const aa = new Animal();
        //aa에 Animal의 함수객체를 생성해서 call한다.

        //Animal!!
    </script>
</body>

Constructor의 이해

함수는 함수 객체이며 이는 함수를 호출하고 관리하기 위한 여러 기능이 포함되어 있음.
함수 객체를 new로 할당 시 좀 더 많은 기능이 추가되며 이때 함수 객체를 만드는 함수를 특별히 생성자라고 부름.
생성자를 통해 함수 객체를 생성하면 함수 내부에 임의의 객체를 파라미터로 전달하며 이를 this로 접근.
일반 함수의 경우 window 객체가 전달됨, window객체는 전역 객체.

<body>
    <script>
        const Animal = function()
        {
            console.log(this);
        }

        Animal();

        const aa = new Animal();

        //Window {window: Window, self: Window, document: document, name: '', location: Location, …}
    	//Animal {}
    </script>
</body>

new operator

new 연산자는 사용자 정의 객체 타입 또는 내장 객체 타입의 인스턴스를 생성한다.

생성자를 호출하면서 생성자의 파라미터에 빈 객체의 래퍼런스 값(this)을 넣어준다.

생성자 호출이 끝나면 래퍼런스 값을 return한다.

구문

new constructor[([arguments])]

매개변수

constructor객체 인스턴스의 타입을 기술(명세)하는 함수argumentsconstructor와 함께 호출될 값 목록

설명

사용자 정의 객체를 생성에는 두 단계가 필요하다:

함수를 작성하여 객체 타입을 정의한다.
new 연산자로 객체의 인스턴스를 생성한다.

객체의 타입을 정의하기 위해, 객체의 이름과 속성을 명세하는 함수를 만든다. 객체는 그 자체가 또 다른 객체인 속성을 가질 수 있다. 아래의 예를 본다.

코드 new Foo(...)가 실행될 때 다음과 같은 일이 발생한다:

Foo.prototype을 상속하는 새로운 객체가 하나 생성된다.
명시된 인자 그리고 새롭게 생성된 객체에 바인드된 this와 함께 생성자 함수 Foo가 호출된다.new Foo는 new Foo()와 동일하다. 즉 인자가 명시되지 않은 경우, 인자 없이 Foo가 호출된다.
생성자 함수에 의해 리턴된 객체는 전체 new 호출 결과가 된다. 만약 생성자 함수가 명시적으로 객체를 리턴하지 않는 경우, 첫 번째 단계에서 생성된 객체가 대신 사용된다.(일반적으로 생성자는 값을 리턴하지 않는다. 그러나 일반적인 객체 생성을 재정의(override)하기 원한다면 그렇게 하도록 선택할 수 있다.)

생성자 예제

Student 생성자를 만드시오. (getter, setter 포함)

<body>
    <script>
       //student 생성자를 만드시오

        function makeStudent(aId, aName)
        {
            this.id = aId;
            this.name = aName;

            this.getName = function ()
            {
                return this.name;
            }
            this.getId = function ()
            {
                return this.id;
            }
            this.setName = function (_name)
            {
                this.name = _name;
            }
            this.setId = function(_id)
            {
                this.id = _id;
            }
        }

        const stu1 = new makeStudent('JSR', '정상록');

        console.log(stu1.getName())
        console.log(stu1.getId())
        //정상록
        //JSR

        stu1.setId("JJJ")
        console.log(stu1.getId())
        //JJJ
        
    </script>
</body>

객체를 위한 constructors 체이닝을 위해 apply를 사용

https://cruella-de-vil.tistory.com/51

[JavaScript] apply()

Function.prototype.apply() apply() 메서드는 주어진 this 값과 배열 (또는 유사 배열 객체) 로 제공되는 arguments 로 함수를 호출합니다. 구문 func.apply(thisArg, [argsArray]) 매개변수 ˙thisArg옵..

cruella-de-vil.tistory.com

<body>
    <script>
        const o = {}
        const p = {}

        function func()
        {
            switch(this)
            {
                case o : 
                    console.log('o ojb');
                    break;
                case p :
                    console.log('p ojb');
                    break;
                case window : 
                    console.log('window');
                    break;
            }    
        }

        func();
        func.apply(o);
        func.apply(p);

        //windwo
        //o ojb
        //p ojb

        //Function은 this를 변경할 수 있다.
    </script>
</body>

'JavaScript' 카테고리의 다른 글

[JavaScript] Prototype (0)	2022.04.19
[JavaScript] Closure(클로저) 예제 (0)	2022.04.18
[JavaScript] apply() (0)	2022.04.18
[JavaScript] 소숫점 자리수 정하기 toFixed() (0)	2022.04.18
[JavaScript] 문자열 정렬하기 (+예제, sort()이해) (0)	2022.04.16

현재글[JavaScript] 객체지향, Constructor(생성자), new

꾸준함이 말미암아