객체 (Object)

자바스크립트의 객체

-숫자, 문자열, 불린값, null, undefined같은 기본 타입을 제외한 모든 값은 객체.

-따라서 배열, 함수, 정규표현식 등도 모두 자바스크립트 객체로 표현됨.

-이러한 객체는 자바스크립트에서 참조타입이라고 부릅니다.

-이름(key):값(value)형태의 프로퍼티들을 저장하는 컨테이너

-참조 타입인 객체는 여러 개의 프로퍼티들을 포함(기본 타입은 하나의 값만 가짐)함

-객체의 프로퍼티는 기본 타입의 값을 포함하거나, 다른 객체를 가리킬 수 있음

-객체의 모든 연산은 실제 값이 아닌 참조값으로 처리됨

   

   

객체 생성하기 

자바	클래스 정의하고 클래스의 인스턴스를 생성하여 객체 생성
자바스크립트	클래스 개념 없음. 객체 리터럴이나 생성자 함수등 별도의 생성 방식 존재

   

• Object()생성자 함수 이용

//Object()메소드를 이용해서 foo라는 빈 객체 생성 var foo = new Object();     //foo객체에 프로퍼티 생성 foo.name ='foo'; foo.age =33; foo.gender='femaile';     //출력 document.write(typeof foo); console.log(foo);

   

   

• 객체 리터럴 방식으로 객체를 생성

중괄호({ })를 이용해서 객체 생성

중괄호안에 "프로퍼티이름":"프로퍼티값" 형태로 표기(key와 value의 쌍)로 속성 지정

var member = { name:'foo', age:20, job:'student' };

   

객체에 메서드 지정

var member = { name:'foo', age:20, job:'student' eat:function(){ 코드 } };

   

   

• 생성자 함수 이용하여 객체 생성

자바스크립트는 함수를 통해 객체 생성 할 수 있습니다.

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

   

   

객체 호출 하기

객체 프로퍼티 접근 방법

대괄호 표기법으로 접근	[ ]	member['name']	접근하려는 프로퍼티 이름을 문자열 형태로 지정해야 합니다. member[name]이라고 접근하면 'foo'가 아닌 undefined값이 출력됨 대괄호 안에 접근하려는 프로퍼티의 속성은 문자열 형태로 작성되어야 하지만 자바스크립트 엔진는 []연산자 내에 숫자가 사용될 경우, 해당 숫자를 자동으로 문자열 형태로 바꿔주어 정상적으로 결과를 출력해 줍니다.
마침표 표기법으로 접근	.	member.name	java, C++과 유사

   

생성된 객체에서 메서드 호출

member.eat()

   

   

   

속성 호출시 대괄호 연산자만 쓸 수 있는 경우

(1) 식별자로 사용할 수 없는 프로퍼티명을 사용하는 경우 

obj = {'foo-bar':5};     //obj.foo와 bar의 뺄셈이라고 해석되어 에러가 발생 obj.foo-bar;     //[] 연산자를 사용해 문자열 값으로 지정 obj['foo-bar'];

   

(2) 변수의 값을 프로퍼티명에 사용하는 경우

var key = 'x'; //프로퍼티 x (프로퍼티 key가 아님) obj[key];

   

   

객체 관련 키워드

   

in

해당 키가 객체 안에 있는지 확인 

var output = '';     var student = { 이름 : '홍길동', 국어 : 92, 수학 : 98, 영어 : 96, 과학 : 98 };     output += "'이름' in student: " + ('이름' in student) + '\n'; output += "'성별' in student: " + ('성별' in student); alert(output);

   

with

객체명을 등록하고 속성에 접근할 때 속성명만 호출할 수 있도록 처리 

var student = { 이름: '홍길동', 국어: 92, 수학: 98, 영어: 96, 과학: 98 };     var output = '';   //with에 객체를 전달하면 with 블럭내에서 속성명만으로 객체의 속성에 접근 가능 with (student) { output += '이름: ' + 이름 + '\n'; output += '국어: ' + 국어 + '\n'; output += '수학: ' + 수학 + '\n'; output += '영어: ' + 영어 + '\n'; output += '과학: ' + 과학 + '\n'; output += '총점: ' + (국어 + 수학 + 영어 + 과학); } alert(output);

   

   

동적 객체 생성과 추가

처음 객체를 생성하는 시점 이후에 객체의 속성 및 메서드 추가하거나 제거

   

속성 추가 

//객체 생성 var student = {};     //객체에 속성 추가 student.이름 = '홍길동'; student.취미 = '악기'; student.특기 = '프로그래밍'; student.장래희망 = '프로그래머';

   

   

속성 갱신

//이미 취미라는 프로퍼티가 존재하므로 해당 값이 갱신됨 student.취미='댄스';     //프로퍼티가 존재하지 않으므로 나이라는 프로퍼티가 동적으로 생성된 다음, 33이라는 값이 할당됨 student.나이 = 33;

   

메서드 추가 

//객체 생성 var student = {};     student.greet = function(){ return 'Hello students!!'; };

   

속성 제거 

객체의 프로퍼티를 delete연산자를 이용해 즉시 제거할 수 있습니다.

delete연산자는 객체의 프로퍼티를 삭제할 뿐, 객체 자체를 삭제하지는 못합니다.

delete(student.취미);

   

   

   

생성자 함수를 이용한 객체 생성

   

new 키워드를 사용해 객체 생성할 수 있는 함수 

function Student(name,korean,math,english,science){ this.이름 = name; this.국어 = korean; this.수학 = math; this.영어 = english; this.과학 = science; //메서드 지정 this.getSum = function(){ return this.국어 + this.수학 + this.영어 + this.과학; }; this.getAverage = function(){ return this.getSum() / 4; }; this.toString = function(){ return this.이름 + ', ' + this.getSum() + ', ' + this.getAverage(); }; } //생성자 함수를 이용한 객체 생성 var student = new Student('홍길동',100,99,98,97);

   

   

   

instanceof 연산자

- 생성자 함수를 통해 만들어진 객체가 인스턴스instance

- 해당 객체가 어떠한 생성자 함수를 통해 생성됐는지 확인할 때 사용 

function Student(name) { this.name = name; }     var student = new Student('홍길동'');     alert(student instanceof Student);

   

   

캡슐화

객체 내부에 데이터가 저장되는 영역을 지역변수화해서 객체 외부에서 직접 접근을 불허하고 메서드를 이용해 접근하도록 처리함 

// 생성자 함수를 선언 function Rectangle(w, h) {     var width = w; //지역변수 var height = h; //지역변수   this.getWidth = function () { return width; }; this.getHeight = function () { return height; }; this.setWidth = function (w) { width = w; }; this.setHeight = function (h) { height = h; }; }

   

   

상속

- 기존의 생성자 함수나 객체를 기반으로 새로운 생성자 함수나 객체를 쉽게 만드는 것

- 기존의 객체를 기반으로 생성

- 상속을 통해 새로 만들어지는 객체에는 기존 객체의 특성 존재