JavaScript 객체

현실의 객체, 속성 및 메드

현실에서 자동차는 하나의 객체입니다.

자동차는 모델명과 색과 같은 특성, 출발과 정지 같은 기능을 가지고 있습니다.

자동차(car) 객체

속성(특성)	기능(메서드)
car.model = e-tron 55 Quattro	car.start()
car.brand = audi	car.drive()
car.weight = 850kg	car.brake()
car.color = white	car.stop()

모든 자동차는 동일한 속성을 가지고 있지만, 속성 값은 차마다 다릅니다.

모든 자동차는 같은 기능을 사용하지만, 그 기능은 다른 시간에 수행됩니다.

객체

JavaScript 변수가 데이터 값의 컨테이너라는 것을 이미 배웠습니다.

이 코드는 car라는 변수에 단순 값(e-tron 55 Quattro)을 할당합니다.

let car = 'e-tron 55 Quattro';

개체도 변수입니다. 그러나 개체에는 많은 값이 포함될 수 있습니다.

이 코드는 car라는 변수에 많은 값(e-tron 55 Quattro, audi, white)을 할당합니다.

const car = const car = {model:"e-tron 55 Quattro", brand:"audi", color:"white"};

값은 name:value 쌍(이름과 값은 콜론으로 구분)으로 작성됩니다.

const 키워드를 사용하여 개체를 선언하는 것이 일반적입니다.

객체 선언

다음과 같이 객체 리터럴을 사용하여 JavaScript 객체를 정의(및 생성)할 수 있습니다.

예제 1

const person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};

공백과 줄 바꿈은 중요하지 않습니다. 객체 정의는 여러 줄에 걸쳐 있을 수 있습니다.

예제 2

const person = {
  firstName: "John",
  lastName: "Doe",
  age: 50,
  eyeColor: "blue"
};

객체 속성

JavaScript 객체의 이름:값 쌍을 속성이라고 합니다.

속성	속성 값
firstName	John
lastName	Doe
age	50
eyeColor	blue

객체 속성 접근

두 가지 방법으로 객체 속성에 접근할 수 있습니다.

objectName.propertyName

objectName['propertyName']

예제 3

person.lastName;

예제 4

person["lastName"];

JavaScript 객체는 속성이라고 하는 명명된 값을 위한 컨테이너입니다.

객체 메서드

객체에는 메서드가 있을 수도 있습니다.

메서드는 객체에 대해 수행할 수 있는 작업입니다.

메서드는 속성에 함수 정의로 저장됩니다.

속성	속성 값
firstName	John
lastName	Doe
age	50
eyeColor	blue
fullName	function() {return this.firstName + “ “ + this.lastName;}

메서드는 속성으로 저장된 함수입니다.

예제 5

const person = {
  firstName: "John",
  lastName : "Doe",
  id       : 5566,
  fullName : function() {
    return this.firstName + " " + this.lastName;
  }
};

위의 예는 this 는 person 객체를 나타냅니다.

this.firstName은 this의 firstName 속성을 의미합니다.

this.firstName은 person의 firstName 속성을 의미합니다.

`this` 란?

JavaScript에서 this 키워드는 객체를 나타냅니다.

어떤 객체는 this가 호출(사용)되는 방법에 따라 달라집니다.

this 키워드는 사용되는 방식에 따라 다른 객체를 나타냅니다.

객체 메서드에서 this는 객체를 가리킵니다.
단독으로 사용된 this는 전역 객체를 가리킨다.
함수에서 this는 전역 객체를 가리킨다.
strict mode 함수의 this는 undefined입니다.
이벤트에서 this는 이벤트를 수신한 요소를 나타냅니다.
call(), apply() 및 bind()와 같은 메서드는 모든 객체의 this를 참조할 수 있습니다.

Note: this는 변수가 아닙니다. 키워드입니다. this 값은 변경할 수 없습니다.

`this` 키워드

함수 정의에서 this는 함수의 “소유자”를 가리킨다.

위의 예에서 this는 fullName 함수를 “소유”하는 person 객체입니다.

다른 말로 하자면, this.firstName은 this 객체의 firstName 속성을 의미합니다.

객체 메서드 접근

다음 구문을 사용하여 객체 메서드에 액세스합니다.

objectName.methodName()

예제 6

name = person.fullName();

() 괄호가 없는 메서드에 액세스하는 경우 함수 정의를 반환합니다.

예제 7

name = person.fullName;

문자열, 숫자 및 불린을 객체로 선언하지 마십시오!

JavaScript 변수가 키워드 “new”로 선언되면 변수는 객체로 생성됩니다.

x = new String();        // 문자열 객체로 x 선언
y = new Number();        // 숫자 객체로 y 선언
z = new Boolean();       // 불린 객체로 z 선언

String, Number 및 Boolean 객체는 사용하지 마십시오. 코드가 복잡해지고 실행 속도가 느려집니다.

JavaScript 15. 객체 (Object)