JS 객체(Object)를 알아보자

Kwangmo Yang·2022년 7월 3일
0

Front-end

목록 보기
5/7
post-thumbnail

객체 생성의 예시

  1. 객체 리터럴 방식
//지나가는 길고양이를 객체 타입으로 표현해보자
var test = {}; //빈 객체 생성

var Cat = {
  name : '고양희',
  type : '코숏',
  age : 8,
  
  walk = function(){
    console.log('뚜벅뚜벅');
  }
}

//객체의 프로퍼티를 참조하여 호출
console.log(Cat);
Cat.walk();
  1. Object 생성자 함수
// 인적사항 정리
var human = new Object();

// 프로퍼티와 메서드를 추가
human.name = 'Cho';
human.gender = 'Male';
human.shout = function(){
    console.log("아아아아");
}

human.shout();

객체를 생성하는 생성자 함수

new 라는 연산자와 Object 생성자 함수를 호출하여
빈 객체를 생성할수 있음
그 후 프로퍼티와 메서드를 추가하는 식으로
생성된 객체를 완성하는 방식

객체가 소유하고 있지 않은 프로퍼티 키에 값을 할당해
해당 객체에 프로퍼티를 추가하고 값을 할당한다.

🚨주의사항 : 이미 동일한 이름의 프로퍼티 키가 존재하면
프로퍼티 값은 할당한 값으로 변경된다


Object 생성자 함수를 통해 빈 객체를 생성하는것이
무조건 옳은것은 아니고 심지어 객체 리터럴방식이 편한것은 사실이다.

객체리터럴 방식의 객체 생성 = Object 생성자 함수의 축약표현

생성자 함수

생성자 함수에 비하면 객체 리터럴 방식 등은 단점이 있다.
1. 프로퍼티값만 다른 여러개의 객체를 생성시에 불편

//좋지 않은 객체예시

var Cat1 = {
    name : "고영희",//프로퍼티
    type : "코숏",  //프로퍼티
    age : 1,        //프로퍼티
    weight : 10,     //프로퍼티

    walk: function(){ //메서드
        console.log(this.name+"이가 사뿐사뿐 걷는중");
    }
}
************************************************************
var Cat2 = {
    name : "양아치냥",//프로퍼티
    type : "가필드",  //프로퍼티
    age : 1,        //프로퍼티
    weight : 10,     //프로퍼티

    walk: function(){ //메서드
        console.log(this.name+"이가 사뿐사뿐 걷는중");
    }
}

위와 같이 프로퍼티 값만 다른 2개의 리터럴방식 선언의 객체들이다.
저 리터럴 객체들은 프로퍼티 값만 다르기때문에 매우 비효율적인 코드이기 때문에 효율적인 객체 선언 방식이 필요하다.

그것이 바로 생성자 함수이다.


생성자 함수 Exam
주의사항 : 첫글자 대문자
this : 생성자 함수가 생성할 인스턴스를 가리킨다
this에 연결되어있는 프로퍼티와 메서드는 외부참조가 가능
생성자 함수 내에서 선언하는 일반 변수는 외부 참조가 불가능

function StrCat(name,type,age,weight){
  this.name =  name;
  this.type = type;
  this.age = age;
  this.walk = function(){
    console.log("발이 무겁다");
  }
}

이렇게 생성자 함수를 만들어주면 편하게 여러 객체를 만들어
내가 원하는 값들을 넣고 호출할 수 있다.

//인스턴스 : 생성자함수를 통해 만들어진 변수
//          -> 생성자함수를 할당받은 변수
var cat1 = new StrCat('김야옹','코숏',2,12);
var cat2 = new StrCat('량아치','고등어',1,14);
var cat3 = new StrCat('나비','배트맨',4,8);
var cat4 = new StrCat('억울하게생김','억울쓰',9, 9);
profile
국비교육중 22.04.26~

0개의 댓글