Web/Javascript
객체(Object)란 무엇인가???
zkzk7290
2024. 8. 7. 17:50
반응형
객체 :관련된 데이터와 함수(일반적으로 여러 데이터와 함수로 이루어지는데, 객체 안에 있을 때는 보통 프로퍼티와 메소드라고 부릅니다)의 집합입니다.
객체의 구조
객체 지향 프로그램의 객체 -- 고유한 특성과 동작을 가지는 것
특성 (속성, 프로퍼티) - 변수, 기능 (동작, 메서드) - 함수
- 특성: 객체를 구성하는 정보의 일부, 해당 객체의 상태 지표가 됨
-사람 - 이름, 나이, 성별, 직업, 주민등록번호, 키, 몸무게.... - 기능 :객체가 수행할 수 있는 행동이나 기능을 정의 -사람 - 공부하다, 걷다, 먹다, 말하다, 잠을 자다.....
EX) 스마트 폰을 객체의 구조식으로 표현
- 특성 (속성)-
제조사: 'Apple'
모델: '10s'
저장공간: '64GB'
배터리상태: '85%'
-기능 (동작)-
전화 걸기
앱 실행하기
사진 찍기
let objectName = {
// 키1: 값1,
// 키2: 값2,
// 키3: 값3,
// ...
// 값의 데이터 형식에는 제한 X (배열, 또 다른 객체, 함수 모두 사용 가능)
// 키와 값을 하나의 쌍(멤버)으로 나열, 각각의 쌍은 ,(콤마)로 구분
// 각각의 멤버(키와 값)는 콜론(:)으로 분리
let lsa1 = ['성', '찬영'];
let lsa2 = {
// 키(이름)는 문자열로 작성하되, 따옴표 없이 작성
// : 영문자 사용을 권장, lowerCamelCase 사용을 권장
lastName: '성',
firstName: ' 찬영',
height: '181',
hobby: ['야구 시청', '독서']
};
객체의 생성 방법: 리터럴 방식, 생성자 함수 사용 방식
리터럴 방식 : 가장 간단하고 일반적인 객체 생성 방식
- 중괄호 {}를 사용하여 객체를 선언하고 초기화 - 내부에 속성과 메서드 정의
const person1 ={// const는 해당 변수의 주소를 전달하기때문에 안에 내부 데이터는 수정이 가능하다
// 쉽게 말해서 집의 주소를 바꾸면 안되고 집안에 있는 가구들은 바꿔도 상관이 없다.
name : '김철수',
age : '25',
married : false
};
console.log(typeof(person1));
console.log(person1);
//값들에 접근하는 방법 (값을 반환하는 코드들 )
console.log(
person1.name,
person1['age']
);
기존의 프로퍼티 수정하기
person2.age++;
person2['married'] = true;
생성자 함수 방식 : new 키워드와 함께 '사용자 정의 생성자 함수'를 사용하여 객체를 생성
- 같은 형태(구조)의 객체를 여러 개 생성할 때 유용
function person1(name, age, maerried){
this.name =name ;
this.age =age;
this.maerried =maerried;
}
let person2 =new person1('김철수',27,false)
console.log(person2.name);
console.log(person2.age);
console.log(person2.maerried);
This : 함수가 호출될때 결정이 된다.
- 고정된것이 아니라 함수가 호출 될떄 마다 값이 바뀐다.
console.log(this);//{}
//전역적인 문맥에서 this에 접근을 하게되면 윈도우 객체가 된다.
const car = {
name :"BZ",
getName: function(){
console.log('car getName',this);
},
};
const globalCar = car.getName;
globalCar();
const car2 = {
name : 'BMW',
getName : car.getName,
};
car2.getName()
// .bind this값을 고정 시켜주는 함수
const bindGetname =car2.getName.bind(car);
console.log(bindGetname);//BZ가 나온ㅁ
https://developer.mozilla.org/ko/docs/Learn/JavaScript/Objects/Basics
JavaScript 객체 기본 - Web 개발 학습하기 | MDN
이 글에서는 JavaScript 객체와 관련된 기본적인 문법을 살펴보고 이전 코스에서 학습해서 이미 알고 있는 JavaScript 의 특징들과 우리가 이미 사용하고 있는 기능들이 이미 객체와 관련되어 있다는
developer.mozilla.org
반응형