자바스크립트 constructor & instanceof

constructor property

생성자 인스턴스에는 자신의 생성자함수를 가리키는 속성이 있습니다.

객체를 인스턴스로 만들면 이 객체/인스턴스에는 constructor 라는 속성(프로퍼티)이 자동으로 추가되는데, 이 속성은 해당 객체를 만든 생성자 함수를 가리키게 됩니다.

다음은 사용자 정의의 객체에서 constructor 속성을 사용할 수 있는지를 알아보겠습니다.

var obj = {}; // 객체 리터럴로 객체를 생성한 후 obj 변수에 객체를 저장.

console.log(obj.constructor === Object);
/**
 * Object() 가 obj 를 만들었으므로 true 가 출력된다.
 */

console.log(obj.constructor); // Object()인 생성자 함수를 가리킨다.

위와 같은 코드는 어떤 인스턴스를 다루고 있을때 인스턴스를 만든 생성자 함수를 알 수 없는 경우(특히, 다른 사람이 작성한 코드일 때), 이 속성을 사용하면 간편하게 생성자 함수를 찾을 수 있습니다.

이를 이용하면 어떤 인스턴스가 배열인지 객체인지 혹은 다른 자료형인지도 확인할 수 있습니다.

다음의 코드는 대부분의 객체를 인스턴스로 만든 후 constructor 속성을 사용해 리터럴/원시값에 해당하는 생성자 함수를 확인해보는 코드입니다.

var num = new Number('100');
var numLiteral = 10; // 숫자 리터럴

var str = new String('생성자 문자열');
var strLiteral = '리터럴 문자열'; // 문자 리터럴

var bool = new Boolean('true');
var boolLiteral = true;

console.log(
        num.constructor === Number,
        numLiteral.constructor === Number,
        str.constructor === String,
        strLiteral.constructor === String,
        bool.constructor === Boolean,
        boolLiteral.constructor === Boolean
);

// 모두 true 를 출력.

위와 같이 construtor 속성은 리터럴/원시값의 생성자 함수를 올바르게 찾아낼 수 있습니다.

그리고 constructor 속성은 사용자 정의의 생성자 함수와도 잘 동작합니다.

다음은 사용자 정의의 생성자함수를 정의한 후 new 키워드를 사용하여 새로운 객체를 만들고, 이 객체의 constructor 속성에 접근하는 코드입니다.

 

// 사용자 정의 생성자 함수
var myConstructor = function () {
    return 'Wow!';
};

// 인스턴스/객체 생성
var instanceOfObject = new myConstructor();

console.log(instanceOfObject.constructor === myConstructor);
// true 가 기록

console.log(instanceOfObject.constructor);
/**
 * 'function() { return 'Wow';};' 가 반환된다.
 */

객체를 반환하지 않는 원시값이 왜 생성자 함수를 가리키는 constructor 속성을 가지고 있는지 혼동스러울 수 있습니다.

이 글에서 자세히 다루지는 않지만 원시값을 사용할 때도 생성자 함수가 호출된다는 것을 알아야 합니다.

따라서, 원시값과 생성자 함수 사이에도 연관성이 생기게 되고, 생성자 함수와의 연관성이 생겼다고 해서 원시값이 복합객체로 바뀌는 것은 아니며 최종결과는 원시값입니다.

instanceof 연산자

객체가 특정 생성자 함수의 인스턴스인지 아닌지를 확인하는데는 instanceof 연산자를 사용하면 알 수 있습니다.

반환값은 true 또는 false 입니다.

다음의 코드를 통해 사용자 정의 객체는 물론 네이티브 객체와도 잘 동작하는지를 확인해 보도록 하겠습니다.

// 사용자 정의의 생성자 함수(객체 생성자)
var CustomFn = function () {
    this.name = 'jaehee';
};

// CustomFn 의 인스턴스를 생성
var instanceOfOjb = new CustomFn();

console.log(instanceOfOjb instanceof CustomFn);
// true 가 기록


// 네이티브 객체에서도 instanceof 연산자를 사용
console.log(
        new Array('foo') instanceof Array
);

instanceof 연산자를 다룰 때 주의해야할 사항 중 하나는 자바스크립트의 모든 객체는 Object() 생성자를 상속하기 때문에 어떤 객체가 Object() 의 인스턴스인지를 확인하려는 코드를 작성한다면 항상 true 를 반환한다는 점입니다.

그리고 instanceof 연산자를 사용하여 원시값에 해당하는 객체 래퍼의 인스턴스인지 확인하는 경우에는 항상 false 를 반환합니다.

e.g) 'foo' instanceof String 

위의 'foo' 는 원시값으로 String 생성자 함수인지를 확인한다면 false 를 반환합니다.

만약 new String('foo')  과 같이 new 연산자를 사용하여 'foo' 문자열을 생성했다면 instanceof 연산자는 true 를 반환할 것입니다.

따라서, 객체를 반환하는 생성자 함수를 통해 만든 복합객체(배열,객체리터럴등..) 또는 인스턴스에만 instanceof 를 사용해야 합니다.

Jaehee's WebClub