프로그래밍, 코딩, 컴퓨터/html, css, js

JavaScript 객체와 프로토타입 설명

마이데일리 2023. 7. 25. 22:17
반응형

자바스크립트는 객체 지향 프로그램을 작성할 수 있는 객체 지향 프로그래밍 언어입니다. 이 문서에서는 자바스크립트 객체와 프로토타입에 대해 자세히 설명합니다.


[목차]
객체
프로토타입
프로토타입 체인
결론



객체

자바스크립트에서 객체는 속성과 메소드가 있는 데이터 타입으로 객체를 생성하여 프로그램에서 사용할 수 있음을 의미합니다. 객체는 대괄호({})로 묶인 키와 값의 쌍으로 정의되며, 객체는 속성과 메소드를 가질 수 있습니다. 속성은 객체의 속성을 나타내며, 메소드는 객체의 동작을 나타냅니다. 예를 들어 이름과 나이의 두 가지 속성으로 사람이라는 객체를 생성할 수 있으며, 인사법은 각각 문자열과 숫자 값을 가지며, 인사법은 Hello!라고 콘솔에 쓸 수 있습니다.


const person = {
  name: 'John',
  age: 30,
  greet: function() {
    console.log('Hello!');
  }
};

console.log(person.name); // John
person.greet(); // Hello!




프로토타입

자바스크립트의 모든 객체는 프로토타입을 가지고 있습니다. 프로토타입은 객체를 만드는 데 사용되는 청사진입니다. 객체의 속성과 메소드는 프로토타입으로부터 상속됩니다. 모든 객체는 'Object'라는 기본 프로토타입을 가지고 있습니다. 이는 객체를 만들 때 자동으로 'Object' 프로토타입의 속성과 메소드를 상속받습니다.


const person = {
  name: 'John',
  age: 30,
  greet: function() {
    console.log('Hello!');
  }
};

console.log(person.toString()); // [object Object]




프로토타입 체인

자바스크립트에서 객체는 여러 개의 프로토타입을 가질 수 있으며, 이를 프로토타입 체인이라고 합니다. 프로토타입 체인을 따라 객체에서 사용할 수 있는 속성과 메서드를 찾습니다. 예를 들어, 속성 전공을 가진 학생이라는 객체를 만들 수 있습니다. 그런 다음 Object.setPrototypeOf 메서드를 사용하여 학생 객체의 프로토타입을 사람 객체로 설정할 수 있습니다. 따라서 학생 객체의 사람 객체에서 이름과 인사 방법을 사용할 수 있습니다.


const person = {
  name: 'John',
  age: 30,
  greet: function() {
    console.log('Hello!');
  }
};

const student = {
  major: 'Computer Science'
};

Object.setPrototypeOf(student, person);

console.log(student.name); // John
student.greet(); // Hello!




결론

객체와 프로토타입은 자바스크립트에서 중요한 개념입니다. 이러한 개념을 이해함으로써 보다 체계적인 방식으로 데이터를 조작하는 보다 복잡한 프로그램을 작성할 수 있습니다. 이를 통해 자바스크립트에서 객체 지향 프로그래밍을 보다 효과적으로 사용할 수 있습니다.




[인기글]

CSS-grid-그리드-기초-및-활용-방법

Python-딕셔너리dictionary-란

이미지-최적화와-웹-성능-향상

반응형