생성자 함수 & 인스턴스

Now, Sophia·2021년 8월 14일

instance new Fucntion new 연산자 생성자 함수 인스턴스

TIL_JAVASCRIPT

목록 보기

11/15

생성자 함수 (constructor function)

일반함수과 기술적 차이는 없지만 두 가지 규칙이 있다.

함수의 이름의 첫글자는 대문자
반드시 'new' 연산자를 붙여 실행

	function Person(name,country,number) {
 	  this.name = name;
  	  this.country = country;
  	  this.likeNumber = number;
         };
  	let person = new Person("Emily","Korea",5);
  console.log(person); // {name : "Emily", country:"Korea",likeNumber: 5}

빈 객체를 만들어 this 에 할당

함수 본문 실행. this에 새로운 프로퍼티를 추가해 this 수정

this 반환

🖍 생성자 함수의 의의

함수 인스턴스를 생성하는 생성자

	function Person(name,country,number) {
 	  this.name = name;
  	  this.country = country;
  	  this.likeNumber = number;
         };
	let person = new Person("Emily","Korea",5);
 	let person2 = new Person("Thor","America",3);
console.log(person); // {name : "Emily", country:"Korea",likeNumber: 5}
console.log(person2) // {name : "Thor", country:"America",likeNumber: 3}

생성자 함수의 재사용성!
1개의 생성자 함수를 이용하여 person, person2와 같은 유사한 여러객체를 만들 수가 있다.

함수 인스턴스 생성

	let add = new Function('a','b','return a+b;');
	console.log(add(1,2)); // 3 ;

함수 정의

	function add = (a,b){
    	  return a+b;
    	}
	console.log(add(1,2)); // 3;

return이 없는 생성자함수

	function Person(name,country,number) {
      // this = { }; 빈 객체가 암시적으로 만들어짐
 	  this.name = name; // 객체에 새로운 프로퍼티 추가
  	  this.country = country; // 프로퍼티 추가
  	  this.likeNumber = number; // 프로퍼티 추가
      // return this; this가 암시적으로 반환됨
        };
  	let person = new Person("Emily","Korea",5);
  console.log(person); // {name : "Emily", country:"Korea",likeNumber: 5}

생성자 함수에는 this 라는 빈 객체가 만들어져 있고,
생성자 함수 안에서 this는 자동으로 반환되기 때문에 return이 필요 없다.

return이 있는 생성자함수

	function Drinks (like) {
 	  this.likeDrinks = "milk";
  	  return { likeFood : "pasta" }; // this 아닌 새로운 객체 return
         };
  	let drinks = new Drinks();
  console.log(drinks); // { likeFood : "pasta"}

새로운 객체를 return 한다면, this 대신 return의 객체가 반환.
그러나 원시형 return 한다면, 무시된다.

	function Drinks (like) {
 	  this.likeDrinks = "milk";
  	  return; //  원시형 return
         };
  	let drinks = new Drinks();
  console.log(drinks); // { likeDrinks : "milk"}

new function

재사용할 필요가 없는 복잡한 객체에 사용하는 익명 생성자 함수

	let movie = new function(){
	  this.movieName = 'Thor',
 	  this.movieRelase = 2011
	};
    console.log(movie); // { movieName:'Thor', movieRelase:2011}

익명 함수는 어디에도 저장되지 않고, 처음부터 한 번만 호출할 목적으로 만들었기 때문에 재사용이 불가능!
익명 생성자 함수는 재사용은 막으면서 코드를 캡슐화 할 수 있다는 장점이 있다.

생성자와 메소드

생성자 함수를 사용하면 매개변수를 이용해 객체 내부를 자유롭게 구성할 수 있다.

	function Color(name){
 	  this.name = name;
 	  this.like = function(){
 	    console.log(`I like ${name} color.`);
 	  }
	}
	let emily = new Color("yellow")
 	let thor = new Color('black')
   emily.like(); // I like yellow color.
   thor.like(); // I like black color.

Color라는 생성자 함수에 name 이라는 프로퍼티와 like 라는 메서드를 가진 객체가 들어있다.

💡 생성자 함수 참고링크

instance

new 연산자를 사용하여 object이 생성되어 변수에 할당된 object가 인스턴스다.
즉, 생성자 함수로 만들어진 객체를 의미한다.

	// new 연산자를 사용하여 object 생성 
	let obj = new Object();
	// 변수 obj에 할당된 'object'이 인스턴스.
	console.log(obj); // Object{ };

	// 객체 리터럴 방식 { } 으로 사용하여 object 생성
	let obj2 = {};
	// 변수 obj2도 인스턴스.
	console.log(obj2); // Object{ };

기존 생성자 함수의 값

기존 생성자 함수의 값을 새로운 생성자 함수에서 값을 변경해도 또 다른 생성자 함수해서 값을 바꾸지 않는다면 기존 생성자 함수의 값을 그대로 가져온다
// 생성자 함수
	function Call(){
	  this.name = 'Thor';
	};
	let obj = new Call();
	console.log(obj.name); // Thor ;
// obj 인스턴스는 생성자 함수의 프로퍼티의 값인 'Thor'를 출력.
	let obj2 = new Call();
	obj2.name = 'Iron';
	console.log(obj2.name); // Iron ;   
// 생성한 인스턴스에 생성자 함수의 프로퍼티 name의 값을 바꾸면 'Iron' 값을 출력.
	let obj3 = new Call();
	obj3.name = 'Hulk'
	console.log(obj3.name); // Hulk	;
// 또다른 인스턴스에 생성자 함수의 프로퍼티 name의 값을 바꾸면 'Hulk'를 출력.
	let obj4 = new Call();
	console.log(obj4.name); // Thor	;
// 또다른 인스턴스에 생성자 함수의 프로퍼티 nama을 가져오면 'Thor' 출력.
🛎 상기 예문들을 보면 obj3 인스턴스에서 프로퍼티 값을 바꿨을 경우, 생성자 함수의 프로퍼티 값이 바뀌지만, obj4 인스턴스와 같이 값을 바꾸지 않았을 경우. 기존 값이 그대로 출력된다.