자바스크립트 핵심컨샙33 #16. new, Constructor, instanceof and Instances(new, 생성자, instanceof, 인스턴스)

김동욱·2021년 7월 29일
0

자바스크립트

목록 보기
16/25
post-thumbnail
post-custom-banner

1. new

new연산자는 생성자 함수를 이용해 새로운 객체 인스턴스(Instances)를 만들때 사용하는 연산자입니다.
물론 객체를 만들때 {}를 사용하여 쉽게 만들 수 있지만 유사한 객체를 여러개 만드는 것에 대해선 한계가 있습니다.

function Func(name, age){
	this.name = name;
    this.age = age;
}

const newObj = new Func("404","10");//newObj = {name : "404", age : "10"}

const newObj02 = {name : "404", age : "10"}

newObj와 newObj02는 키, 프로퍼티가 같습니다. 그러면 새로운 객체를 만들때 마다 newObj02처럼 리터럴({})을 사용하면 생성자 함수를 사용할 필요없이 간단하게 만들 수 있는데 왜 굳이 생성자 함수와 new를 사용해야할까요


2. Constructor(생성자)

JAVA에서는 Class가 객체를 생성한다면 자바스크립트 생성자(constructor) 함수가 그 역할을 대신합니다.
만약 위의 객체처럼 키 밸류가 2개뿐이 아니라 원래 100개가 있고 메서드도 100개가 있고 또 객체의 각각 마다 속성이 다르다면 일은 100배로 뻥튀기가 됩니다. 하지만 생성자 함수를 이용하면

붕어빵 틀에 팥, 크림, 과자등 다양한 재료를 넣어 같은 붕어빵이지만 전부 다른 속성인 비슷한 붕어빵을 만들 수 있듯이

비슷하지만 다르며 그리고 '서로 연결되어' 유지보수도 편리한 여러 객체를 무한정 만들 수 있습니다. 리터럴을 사용하여 만드는 것 보다 훨씬 유연하며 유지보수도 수월합니다.
객체지향의 시작입니다.

ES6에서 Class문법이 추가되었습니다! 이는 추후에 포스팅하겠습니다.

function Func(name){
	this.name = name;
  	this.hi = function(txt){
    	console.log(`Hi! ${txt} ${this.name} ~`)
    }
}

const newObj1 = new Func("404");
newObj1.hi('멋진')//Hi! 멋진 404
const newObj2 = new Func("405");
newObj2.hi('잘생긴')//Hi! 잘생긴 405
const newObj3 = new Func("406");
newObj3.hi('잘가')//Hi! 잘가 406

생성자로 부터 생성된 객체는 자신을 생성한 생성자의 prototype으로 부터 constructor 메서드를 '상속'받습니다.
newObj.constructor === Func//true(prototype은 다음 포스팅에서 다루겠습니다.)


3. instanceof

instanceof 연산자는 객체가 특정 생성자 객체에 속하는지 아닌지를 확인할 수 있습니다.

function Func(name){
	this.name = name;
}

const newObj1 = new Func("404");
console.log(newObj1 instanceof Fucn)//true
const newObj2 = new Func("405");
console.log(newObj1 instanceof Fucn2)//false

const arr = [1,2,3];
console.log(arr instanceof Array)//true

정확히 말하면 인스턴스의 프로토타입 체인에 constructor.prototype이 있는지 확인합니다.

function Func(){}

const newObj1 = new Func();

console.log(newObj1 instanceof Func)//true
console.log(newObj1 instanceof Object)//true
console.log(Func.prototype instanceof Object)//true

4. instance

객체 지향 프로그래밍(OOP)에서 인스턴스(instance)는 해당 클래스의 구조로 컴퓨터 저장공간에서 할당된 실체를 의미한다. 여기서 클래스는 속성과 행위로 구성된 일종의 설계도이다. OOP에서 객체는 클래스와 인스턴스를 포함한 개념이다. feat. 위키

파파고에 검색하면

    1. 사례, 경우
    1. …을 예로 들다

처럼 자세한 단어의 뜻이 안나온다...

조금 쉽게 풀자면 '클래스나 생성자 객체를 사용하여 메모리에 할당한 자료' 라고 보면 되겠다. 메모리에 할당이 되면 자유롭게 쓸 수가 있고 변형시킬 수가 있다. 인스턴스를 만드는 방법은 위에서 배운것처럼 생성자를 이용해서 만들 수도 있고 선언문, 리터럴등 다양한 방법이 있다. 이렇게 만들어진 인스턴스의 가장 큰 특징은 원래 객체인 클래스나 프로토타입이 가지고 있는 프로퍼티(property)와 메소드(method)를 모두 상속받는 것이다! 객체지향의 가장 큰 특징인 상속이 들어갔다.

🤣위의 붕어빵 설명처럼 붕어빵 틀이 생성자면 인스턴스는 붕어빵이다!

profile
안녕하세요. 부산에서 근무하고 있는 프론트엔드 개발자 김동욱입니다. 영어 공부 겸 개발 공부를 위해서 글을 작성하고있습니다.
post-custom-banner

0개의 댓글