objcet 오브젝트

자바스크립트의 오브젝트

오브젝트 구분

 빌트인 오브젝트 Built-in Objcet

 네이티브 오브젝트 Native Objcet

 호스트 오브젝트 Host Objcet

 

빌트인 오브젝트(ES5기준으로 11개의 오브젝트가 존재)

 사전에 만들어 놓은 오브젝트

 빌트인 Number 오브젝트, 빌트인 String 오브젝트

 

네이티브 오브젝트

 JS 스펙에서 정의한 오브젝트

 빌트인 오브젝트 포함 + JS코드를 실행할 때 만드는 오브젝트

 예) Argument 오브젝트

 

호스트 오브젝트

 빌트인, 네이티브 오브젝트를 제외한 오브젝트

  예) window, DOM 오브젝트

  var node = document.querySelector("div");

  log(node.nodeName); //document가 오브젝트. querySelector()는 DOM 함수. DOM에서 제공하는 오브젝트를 호스트 오브젝트라고 부름. 마치 JS함수처럼 DOM 함수를 사용. 결과는 DIV

 JS는 호스트 환경에서 브러우저의 모든 요소 기술을 연결하고 융합하여 이를 제어

 

오브젝트와 인스턴스

 강좌에서는 오브젝트와 인스턴스를 구분.

 new 연산자를 사용하면 인스턴스. 사용하지 않으면 오브젝트

 var abc = new Object();

 var obj = {};

 

프로퍼티 리스트

new Objcet() 파라미터 데이터 타입의 인스턴스 생성

Objcet() Object 인스턴스 생성

 

Objcet.prototype

constructor 생성자

valueOf() 피리미티브 값 반환

hasOwnProperty() 프로퍼티 소유 여부 반환

propertyIsEnumerable() 프로퍼티 열거 여부 반환

isPrototypeOf() prototype의 존재 여부 반환

toString() 문자열로 반환

toLocaleString() 지역화 문자열로 반환

 

objcet 인스턴스 생성

new Object()

구분	데이터(값)
파라미터	값opt
반환	생성한 인스턴스

인스턴스를 생성하여 반환

파라미터의 데이터 타입에 따라 생성할 인스턴스 결정

var newNum = new Number(123);

web.log(typeof newNum); //object

web.log(newNum + 100); ///223

var newNum = new Objcet(123);

web.log(typeof newObj); //objcet

web.log(newObj + 100); // newObj의 값이 123으로 설정되어 Number인스턴스를 생성. 그래서 값을 더할 수 있음. 223

파라미터값이 undefined, null이면 빈 Objcet 인스턴스 반환.

var newObj = new Objcet();

web.log(newObj); // 값을 작성하지 않은건 undefined를 작성한것과 같으며 값을 갖지 않는 Objcet 인스턴스 생성. {}

 

Object()

구분	데이터(값)
파라미터	값opt
반환	생성한 인스턴스

Objcet 인스턴스 생성. 파라미터는 {name: value} 형태

var obj = Objcet({name: "JS책"});

log(obj); //{name: JS책}

var emptyObj = Objcet();

log(emptyObj); // {}

 

Objcet 생성 방법

var abc = { };

 var abc = Object()와 같음.

 즉, var abc = {}를 실행하면 Object 인스턴스가 생성됨

var obj = Objcet({name: "value"});

var obj = {name : "value"}; //objcet()와 {}모두 Objcet 인스턴스를 생성함

log(obj); //{name: value}

log(obj instanceof Objcet); //true 

{}표기를 오브젝트 리터럴이라고 부름.

 

valueOf()

구분	데이터(값)
data	Object 인스턴스, 숫자
파라미터	사용하지 않음
반환	프리미티브 값

data위치에 작성한 Object 인스턴스의 프리미티브 값 반환.

var obj = {key: "value"};

log(obj.valueOf()); // {key: value}

 

빌트인 오브젝트 구조

오브젝트 이름(Objcet, String, Number..)

오브젝트.prototype

 인스턴스 생성 가능 여부 기준

 프로퍼티를 연결하는 오브젝트

오브젝트.prototype.constructor

 오브젝트의 생성자

오브젝트.prototype.method

 메소드 이름과 함수 작성

 

함수와 메소드 연결

함수

 오브젝트에 연결  Object.create()

메소드

 오브젝트의 prototype에 연결

 Objcet.prototype.toString()

 

함수, 메소드 호출

함수 호출방법 Objcet.create();

 log(Object.create); // Objcet에 create가 존재하므로 함수 출력. function create() { [native code] }

 log(Objcet.prototype.create); //Object.prototype에 create가 존재하지 않으므로 undefined 출력. undefined

메소드 호출방법 Objcet.prototype.toString(); 또는 인스턴스를 생성하여 호출.

 log(Object.prototype.toString); 

 var obj = {}; // 

 log(obj.toString); 

함수와 메소드를 구분해야하는 이유

 JS코드 작성방법이 다르기 때문.

 함수는 파라미터에 값을 작성하고 메소드는 메소드 앞에 값을 작성.