객체와 생성자

Bindung·2020년 5월 6일

javascript

목록 보기
3/5
post-thumbnail

자바스크립트의 객체

  • 자바스크립트 자체가 객체기반의 스크립트 언어
  • 구현할 대상(개체)
  • 프로퍼티 + 메소드 = 자바스크립트 객체

객체 키워드

  • 프로퍼티 : 속성 (ex. 사람의 나이, 성별, 이름)
  • 메소드 : 객체에 제한된 함수
  • 인스턴스 : 설계도를 기준으로 완성된 상품

객체 구성

  1. 자바스크립트 내장객체(Build-in object)
    자바스크립트 구동시 쓸 수 있는 자바스크립트 고유 객체(ex. Math, String, Number, Date)

  2. 브라우저 내장객체(Native object)
    자바스크립트 구동시 보단 엔진을 구동하는 빌드측에서 가진 객체

  3. 사용자정의 객체(Host object)
    사용자가 객체를 정의하고 생성함

프로퍼티(Property)

  1. 자바스크립트내에서 key와 value로 되어있다.
  2. 접근가능한 이름과 활용가능한 값을 가진 형태
  3. “.” 연산자를 통해서 접근가능하다.
  4. 객체에 프로퍼티가 없어도 무관, 있지만 값이 없어도 무관하다.
  5. Null, undefined 둘다 확인가능하다.
var person = {
	name: '재석',
	age: 47
}
console.log(person.name) //재석
console.log(person.age) //47

name, age 는 person의 key이며, value(값)을 가지고있다.
즉, 프로퍼티이다.

메소드(Method)

객체가 가지는 동작
함수와 같은 형태이지만 객체를 통해서 수행가능한 함수라는 의미가 강하다.

var person = {
	name: '재석',
	age: 47,
	sayHello: function(){
		console.log('안녕하세요.')
	}
}
console.log(person.name) //재석
console.log(person.age) //47
console.log(person.sayHello) //안녕하세요.

객체 생성 방식

객체 리터럴 방식(Object literal)

  • 키값으로 이루어진 형태
  • "."연산자로 접근가능
var person = {
	name: '재석',
	age: 47,
	sayHello: function(){
		console.log('안녕하세요.')
	}
}

생성자 함수 방식(Constructor Function)

  • 구분을 위해서 맨앞글자가 대문자
  • this는 자동으로 객체 리턴
function Person(name, age){
	this.name = name;
	this.age = age;
	this.sayHello = function(){
		console.log('안녕하세요.')
	}
}
const jaeseok = new Person('재석', 47);
console.log(jaeseok.name); //재석
console.log(jaeseok.age); //47
console.log(jaeseok.sayHello()); //안녕하세요.

팩토리 함수 방식(Factory Function)

  • 생성자 방식과 다르게 return을 붙여줌(retrun을 해줘야지 함수를 바로 드러낼 수 있다.)
  • this가 없음
function personCreate(name, age){
	return {
		name:name,
		age, //key와 value가 같으면 하나만 사용가능 (ES6)
		sayHello: function(){
			console.log('안녕하세요.')
		}
	}
}
const jaeseok = personCreate('재석', 47);
console.log(jaeseok.name); //재석
console.log(jaeseok.age); //47
console.log(jaeseok.sayHello()); //안녕하세요.

뒷이야기

javascript를 쓰면서 항상 그냥 객체를 만들려면 var 변수 = {}
아니면 new 붙이면 되겠지 였지만 그게 왜 그런지는 한번도 생각하지 못했다.
new + 생성자 = 객체가 되어버리고 생성자를 쓰고 new를 안써주면 그냥 그건 그저 리턴없는 함수가 되어버린다.
하지만 함수안에 return을 기본으로 넣어주면 new가 없이 쓰여지며 이것들이 그냥 하나의 트릭이 아닌 각각의 명칭이 있는 방법이였다.

profile
포기하지말고 천천히...

0개의 댓글