JavaScript | 생성자 함수

Kate Jung·2021년 12월 5일
0

JavaScript

목록 보기
16/39
post-thumbnail

📌 객체 리터럴

let user = {
  name: 'Mike',
  age: 30,
}

↑ 이렇게 만드는 것

📌 만들 때 규칙

  • 첫 글자 → 대문자

    ( 어떤 함수라도 new를 붙이면 알고리즘이 동일하게 동작 )

  • 함수 호출 방법 : new 연산자

📌 예시

fucntion User(name, age) {
  this.name = name;
  this.age = age;
}

let user1 = new User('Mike', 30);
let user2 = new User('Jane', 22);
let user3 = new User('Tom', 17);

📌 동작 원리

fucntion User(name, age) {
	// this = {}

  this.name = name;
  this.age = age;

	// return this;
}

new 함수명();

🔹 new를 붙인 순간 실행되는 알고리즘

  1. new 함수명(); 을 실행하면

  2. this = {}

    빈 객체({})를 만들고 this에 할당

  3. this에 프로퍼티 할당

    this.name = name;
    this.age = age;
  1. this = {} & return this;은 코드에 없음

🔹 new를 안붙이면

그냥 함수 실행

  • 원리
    1. undefined 반환 (return 되는 것이 없어서)

    2. 그 값이 변수에 할당 됨 (만약 변수에 할당 했으면)

      ex. const user3 = User('Mike', 30) == user3는 undefined

📌 장점

  • 빠르고 일관성 있게 객체 만들기 가능
  • 비슷한 객체 여러 개 만들 때 유용

📌 메소드 추가

🔹 예시 코드

function User(name, age){
  this.name = name;
  this.age = age;
  this.sayName = function(){
    console.log(this.name) // this는 .앞의 user5
  }
}

let user5 = new User('Mike', 30)

user5.sayName() // "Mike"

참고

  • 코딩앙마_자바스크립트 중급
profile
복습 목적 블로그 입니다.

0개의 댓글