JS의 핵심! 프로토타입 prototype

YouTube Link
	JavaScript - prototype (1/2) : prototype이란?
	https://youtu.be/yXnbvyl04V4
	JavaScript - prototype (2/2) : prototype chain
	https://youtu.be/673mZ8rE9UY

자바스크립트의 객체지향을 지탱하는 핵심적인 개념이다.

Prototype : 원형

// 객체 리터럴을 사용하여 객체 생성

let person = {

  name: "John", // name 프로퍼티

  age: 30,      // age 프로퍼티

  isMale: true  // isMale 프로퍼티

};

// 점 표기법으로 프로퍼티 접근

console.log(person.name);   // 출력: "John"

console.log(person.age);    // 출력: 30

console.log(person.isMale); // 출력: true

// 대괄호 표기법으로 프로퍼티 접근

console.log(person['name']);   // 출력: "John"

console.log(person['age']);    // 출력: 30

console.log(person['isMale']); // 출력: true

프로퍼티는 키(key)와 값(value)로 구성되어 있다. 키는 문자열로 표현된다. 프로퍼티에 접근할 때는 점 표기법 또는 대괄호 표기법을 사용할 수 있다. 흔하게 사용되는 방법이며 리터럴을 상용해 초기화 시키는 방법이다.

function Person(name, age) {

  this.name = name;

  this.age = age;

}

Person.prototype.sayHello = function() {

  console.log(`Hello, my name is ${this.name} and I'm ${this.age} years old.`);

};

// Person 생성자 함수를 사용하여 객체 생성

let person1 = new Person("John", 30);

let person2 = new Person("Alice", 25);

// 객체의 메서드 호출

person1.sayHello(); // 출력: "Hello, my name is John and I'm 30 years old."

person2.sayHello(); // 출력: "Hello, my name is Alice and I'm 25 years old."

위 코드는 생성자 함수로 객체의 초기 상태를 설정하기 위해 매개변수를 사용한다. 매개벼수를 통해서 프로퍼티를 초기화 한다.

prototype - JavaScript

아래 코드는 객체 리터럴과 생성자 함수, 이 두가지 코드들 이용한 코드이다.

function Person(name, age) {

  this.name = name;

  this.age = age;

}

let person1 = new Person("John", 30);

let person2 = {

  name: "Alice",

  age: 25,

  isMale: true

};

console.log(person1.name); // John

console.log(person2.name); // Alice