화투의 개발 블로그

자바스크립트는 기본적으로 Java와 C++과 같은 클래스 객체의 상속이란 개념을 사용하지 않고 prototype 모델의 상속을 지원한다. prototype은 객체를 생성하기 위해 사용되는 객체의 원형을 뜻하며 생성자 객체를 통해 객체가 생성 될 때, 생성자의 prototype 프로퍼티에 링크되어있는 프로토타입 객체들이 생성된 객체에 연결된다. prototype 프로퍼티는 함수 함수들이 가지고있는 속성으로서 생성자를 처음 정의할때엔 기본적으로 empty Object를 가르킨다.

(cf: prototype 프로퍼티는 1급 객체인 함수 객체만 가지고 있는 프로퍼티이므로 일반 객체에서 접근하려고하면 syntax error가 발생한다.)

prototype을 정리하기에 앞서 비교를 위해 생성자 함수를 이용한 객체 생성을 먼저 보면,

var Parent = function(){
    this.f = function(){
        console.log("HI");
    }
}

Parent.f = function(){
    console.log("HELLO");
}
var A = new Parent;
var B = new Parent;

A.f();
B.f();

위 코드의 결과는 다음과 같다.
HI
HI

위에서 this.f는 프로토타입이 아닌 생성자 Parent의 프로퍼티이다. 즉 이 생성자를 통해 새로운 객체를 생성하면 this가 A,B객체에 바인딩이 되어 A,B객체의 프로퍼티가 되기 때문에, 아무리 생성자인 Parent의 f를 수정하더라도 생성된 객체인 A와 B의 f 프로퍼티는 변하지 않는다.(객체 생성 부분은 객체 생성 포스트를 참조하자)

다음은 프로토타입을 이용한 객체 생성이다.

var Parent = function(){
    Parent.prototype.f = function(){
        console.log("HELLO");
    };
}
var A = new Parent;
var B = new Parent;
A.f();
B.f();


Parent.prototype.f = function(){
        console.log("HI");
    };
A.f();
B.f();

위 코드의 결과값은 다음과 같다.

정리하자면 함수 객체는 자식에게 상속할 프로퍼티를 포함하는 prototype를 가지고 있다. prototype 프로퍼티는 객체의 원형을 담는 자신의 프로토타입 객체에 링크되고, 또한 객체를 생성할 때 객체의 [[Prototype]] 프로퍼티(__proto__)에 링크된다. (객체 생성 포스트를 참조하자, new 키워드를 이용해 생성될 때 연결된다.). 객체는 이 __proto__에 연결된 프로토타입 객체를 따라가 프로토타입에 정의된 프로퍼티를 객체 자신의 것처럼 사용할 수 있다. 부모 프로토타입에도 없을 경우, 부모가 상속받은 프로토타입을 찾아가며(__proto__프로퍼티를 통해 프로토타입 체인을 따라 올라가며) 해당 프로퍼티를 찾는다.

이렇게 따로 생성한 객체 말고도, Array나 Function 등의 객체들도 프로토타입의 상속을 기반으로 한다. Array나 Function이 내부적으로 가지고있는 메소드들은 바로 이 상속을 기반으로 가능한 것이다.

객체의 생성은 함수 객체(생성자 객체)에 의해 일어나지만, 상속에 관련된 모든 역할은 생성자 객체에 연결되어있는 프로토타입 객체에 의해 일어난다는 것을 기억하자. 

자바스크립트는 기존 C++,Java와 같은 클래스 기반 객체 지향 언어와는 객체 생성 방법이 다르다.

자바스크립트 자체에 클래스라는 개념이 없기 때문이다. 자바스크립트에서 객체를 생성할 수 있는 방법은 크게 3가지로 나뉜다.

1. 기본 객체(Object() 객체)의 생성자 함수를 이용

2. 객체 리터럴을 이용

3. 생성자 함수 이용

위 순서대로 객체 생성 방법에 대해 하나씩 알아보겠다.

1. 기본 객체(Object() 객체)의 생성자 함수를 이용

Object 객체를 생성하고, 여기에 새로운 프로퍼티를 추가하는 방법이다. 객체는 new 연산자를 이용해서 생성이 가능하므로, 기본 객체를 다음과 같이 생성하자.

var member = new Object()

이 같이 기본 객체를 생성한 뒤에, 필요한 프로퍼티를 추가한다.

member.Id = 'phs1116';
member.pass = '1234';
member.gender = 'male'

이 변수의 타입과 변수를 출력해보자.

console.log(typeof member);
console.log(member);

출력값은 다음과 같다.

object
Object {Id: "phs1116", pass: "1234", gender: "male"}

이로서 member변수가 여러 프로퍼티를 포함한 객체로 생성됬음을 알 수 있다.

2. 객체 리터럴을 이용

그 다음은 1번과 같이 기본 객체를 생성하여 프로퍼티를 추가하는 방법이 아닌, 자체로 바로 객체를 생성하는 방법이다. 방법은 간단한데, 변수를 생성할 때 중괄호({})안에 생성할 객체의 프로퍼티를 정의하면 된다. 안에 아무것도 넣지 않고, 중괄호 만으로 생성을 하면 빈 객체가 생성된다. 프로퍼티를 선언할 땐 다음과 같은 방식으로 선언한다.

프로퍼티 이름 : 프로퍼티 값

1번과 같은 객체를 객체 리터럴 방식으로 생성해보자.

var member = {
  Id : 'phs1116',
  pass : '1234',
  gender : 'male'
};

이렇게 생성한 변수를 확인해보면 이 또한 여러 프로퍼티를 포함한 객체임을 알 수 있다.

3. 생성자 함수 이용

자바스크립트의 함수는 생성자 함수로도 정의할 수 있다. 생성자 함수라는 것은 일정의 형식이 정해진 것이 아니라, 정의한 함수에 new 키워드를 붙여 변수에 호출하면 그 자체로 생성자의 역할을 한다. 생성자 함수와 일반 함수의 구분이 명확치 않기 때문에, 이의 구분을 위해 생성자 함수의 첫 글자는 대문자로 쓰는 것을 권장하고 있다.

생성자 함수를 new 키워드로 이용해서 생성하는 객체는 다음과 같이 작동한다.

1. 먼저 빈 객체를 생성하고, this를 이 객체에 바인딩한다.(new 키워드를 사용하지 않을경우엔 this는 전역객체 window에 바인딩된다.) 또한 생성한 객체의 프로토타입 객체를(__proto__) 자신의 생성자의 프로토타입 프로퍼티로 설정한다.

2. 생성자 내부에 this 키워드로 정의된 프로퍼티들을 객체 내에 동적으로 생성한다.

3. 생성자 내부에 return문이 따로 명시되어있지 않으면, 생성한 객체를 리턴한다. 뿐만 아니라 this 키워드를 리턴해도 생성한 객체를 반환한다. (new 키워드를 사용하지 않았고(즉 함수로 사용하였고), return문을 명시하지 않았을 경우에는 undefined가 반환된다.)

생성자는 다음과 같이 정의한다.

var Member = function(Id,pass,gender) {
    this.Id  = Id;
    this.pass = pass;
    this.gender = gender;
}

var Member = function(Id,pass,gender) {
    this.Id  = Id;
    this.pass = pass;
    this.gender = gender;
    return this;
}

위 생성자를 다음과 같이 new 키워드로 호출하고, console.log로 출력해보면

var member = new Member('phs1116','1234','male');

console.log(member);
console.dir(member);

Member {Id: "phs1116", pass: "1234", gender: "male"}

가 출력되어 member 변수가 Member 생성자의 객체로 생성됬음을 알 수 있다.

부모 객체의 프로토타입을 가르키는 [[Prototype]]프로퍼티(__proto__)도 Member 생성자의 프로토타입 객체로 설정됬음을 확인할 수 있다.

기본 객체를 이용하는 방법이나, 객체 리터럴을 이용하는 방법은 같은 형태의 객체를 다시 생성할 수 없다. 같은 형태의 여러 객체를 생성하고자 한다면 생성자 함수를 정의하여 사용해야 할 것이다.

또한 생성자 함수를 이용해서 객체를 생성하면 프로토타입 객체(__proto__)는 생성자의 프로토타입 프로퍼티로 설정하지만, 객체 리터럴은 Object 객체의 프로토타입으로 설정된다. 이는 자바스크립트에서 객체를 생성할 때, 자동적으로 프로토타입 객체가 생성자의 프로토타입 프로퍼티로 설정되는데, 객체 리터럴을 사용할경우 Object()생성자를 사용하여 생성하는 것과 같기 때문이다.

this 키워드는 자바스크립트와 다른 클래스 기반 언어와는 약간 다른개념이다.
C++에서 this라함은 보통 이를 사용하는 멤버함수가 속한 클래스를 가르키는 포인터이고, java또한 비슷한 기능을 가진다.
이렇게 클래스 기반언어 C++/JAVA의 this는 기능이 정해져있다.

자바스크립트 또한 클래스기반 언어 처럼 같은 기능을 제공하지만, this 키워드를 사용하는 방법에 따라 가르키는 대상이 모두 다르다.

자바에서의 this

class Memeber{
    private String id;
    private String password;
    
    Memeber{String id, String password){
        this.id = id;
        this.password = password;
    }
}

C++에서의 this

class Brick{
private:
    int shape;
    int rot;
public:
    Brick(){
    srand(GetTickCount());
    this->shape = rand() % 6; 
    this->rot = rand() % 3; 
    }
};  

'This'

자바스크립트에서 this가 가르키는 경우는 크게 5가지의 경우로 나타낼 수 있다.

1. Global Scope에서 사용될 때 this는 전역 객체를 가르킨다(window 객체)

2. 함수에서 사용될 때에도 this는 전역 객체를 가르킨다.(window 객체)

3. 객체에 속한 메서드에서 사용될 때 this는 메서드가 속한 객체를 가르킨다.

4. 객체에 속한 메서드의 내부함수에서 사용될 때 this는 전역 객체를 가르킨다.(window 객체)

5. 생성자에서 사용될 때, this는 이 생성자로 인해 생성된 새로운 객체를 가르킨다.

1. Global Scope에서 사용될 때 this는 전역 객체를 가르킨다(window 객체)

var func = {}; //객체 생성

this === window;//true

this === func;//false

다음과 같이 global scope에서 this와 전역객체를 비교해보면 true를 반환한다. global scope 자체가 전역객체(window)이므로  전역변수들과 함수들은 모두 전역객체에 속한다.

2. 함수에서 사용될 때에도 this는 전역 객체를 가르킨다.(window 객체)

function func(){
    if(this===window)
        console.log("this===window");
}

func();

1번과 같은 맥락으로 global scope가 전역객체이므로 함수는 전역객체에 속하는 메서드와 같다. this는 자신이 속한 메서드를 가르키므로 함수의 this는 window를 가르킨다. 따라서 이 코드의 함수 내 if문은 올바르게 작동하여 "this===window"를 출력한다.

3. 객체에 속한 메서드에서 사용될 때 this는 메서드를 호출한 객체를 가르킨다.

var obj = {
    func : function(){
        if(this===window){
            console.log("this===window");
        }
        else if(this===obj){
            console.log("this===obj");
        }
    }
}

object.func();

메서드를 하나 가지고있는 객체를 생성했다. 이 객체의 메서드 func는, this가 window일때와 obj일때에 따라 다른 결과를 출력한다.

코드를 실행해보면 this===obj가 출력된다. 따라서 객체에 메서드가 사용하는 this는 자신이 속한 객체를 가리킴을 알 수 있다.

4. 객체에 속한 메서드의 내부함수에서 사용될 때 this는 전역 객체를 가르킨다.(window 객체)

var obj = {
    func : function(){
        function inner(){
            if(this===window){
                console.log("this===window");
            }
            else if(this===obj){
                console.log("this===obj");
            }
        }
        inner();
    }
}

obj.func();

3번의 코드에서 메서드에 내부함수를 추가하고 그 안에 this가 어떤 객체에 속하는지 확인하는 코드를 넣었다. 이코드의 결과로는 놀랍게도 "this===window"가 출력된다. 따라서 내부함수에서 this를 사용할때에는 주의를 요한다.
내부함수에서 자신이 속한 객체를 가르키는 this 키워드가 필요할 시 보통은 다음과 같이 메서드 내에서 this를 변수에 따로 저장하여 그 변수를 사용하는 방법을 취한다.

var obj = {
    func : function(){
        var that = this;
        function inner(){
            if(that===window){
                console.log("that===window");
            }
            else if(that===obj){
                console.log("that===obj");
            }
        }
        inner();
    }
}

obj.func();

위 코드는 "that===obj"가 출력된다.위 방법 외에 아래와 같이 bind 메서드를 사용해서 같은 결과를 출력할 수 있다. 밑의 코드는 "this===obj"를 출력한다

var obj = {
    func : function(){
        var inner = function(){
            if(this===window){
                console.log("this===window");
            }
            else if(this===obj){
                console.log("this===obj");
            }
        }.bind(this);
        inner();
    }
}

obj.func()

5. 생성자에서 사용될 때, this는 이 생성자로 인해 생성된 새로운 객체를 가르킨다.

function obj(){
    this.thisValue = this;
    this.func = function(){
        if(this===window){
            console.log("this===window");
        }
         else if(this===obj){
            console.log("this===obj");
        }
        else{
            console.log("this===other Object");
        }
    }
}
var A = new obj();
A.func();

이는 일반적인 this 사용과 같다. 위 생성자의 프로퍼티로 들어있는 func메서드는 this가 어떤 값인지를 출력한다. 새로운 객체를 생성하고 위 메서드를 실행해보면,"this===other Object"가 출력된다. 즉 여기서 this는 window도, obj아닌 새로운 값을 가진다는 것을 알 수 있다.
이 this는 새롭게 생성된 객체 A를 가르키는지 확인을 위해 다음 코드를 입력해보자.

A.thisValue === A

여기서 thisValue 프로퍼티는 this의 값을 저장하고 있다. 위 코드를 입력하면 true를 반환하는데, 이를 통해 생성자의 this는 새로운 객체를 생성할 시 그 객체(여기서는 객체 A)를 가르킴을 확인할 수 있다.

apply 메서드와 call 메서드로 this 제어

this는 이렇게 어디서 사용되냐에 따라 참조하는 값이 다르다. 근데 function.prototype의 apply 메서드와 call 메서드를 이용해서 이 this 키워드를 제어할수 있다. 즉 위에 정해진 5가지 경우와 다르게 다른 값을 참조하도록 만들어줄 수 있다.

apply와 call은 인자값만 조금 다르고, 결과는 모두 같으므로 apply로만 예제를 보도록 하겠다.

var obj = {};
function func(){
    if(this===window)   
        console.log("this===window");
    else if(this===obj)
        console.log("this===obj");
    }
    
func();
func.apply(obj);

기본적으로 함수 func는 grobal scope에 존재하므로 this는 전역객체(window)를 가르킨다. 따라서 func를 실행하면 "this===window"가 출력된다.

하지만 apply로 인자값에 obj를 전달하여 func.apply(obj)를 실행하면 "this===obj"가 출력된다. 즉 apply를 통해 저 함수의 this값을 obj로 변경하여 함수가 실행되었다.

apply는 인자로 바인딩할 객체와, 해당 함수에 전달할 인자들을 '배열'로 입력받는다. 반면 call은 배열이 아닌 인자들도 입력받는다는 점이 다르니 이는 입맛이나 때에 따라 사용하자.

ex) func.apply(obj,[a,b,c]);    func.apply(obj,a,b,c);

접근제어자 public으로써의 this 

자바스크립트에서는 C++과 JAVA와 같이 public이나 private같은 접근제어자가 따로 존재하지 않는다. 하지만 var,this로 객체를 캡슐화 할 수 있다.

function Member(id,password){
    this.id = id;
    var pass = password;
    this.getPassword = function(){
        return pass;
    }
}

var newUser = new Member("hsp1116","12345");

console.log(newUser.id);
console.log(newUser.pass);
console.log(newUser.getPassword());

위 코드를 실행해보면 console.log(newUser.id)는 올바르게 id를 출력하지만 console.log(newUser.pass)는 undefiend가 출력된다. this.id는 노출되지만 var.pass는 은닉화 된것이다.
대신 getter메서드인 console.log(newUser.getPassword())는 올바르게 출력되는것을 확인할 수 있다.