[Javascript 💡] Javascript 객체, 프로토타입

1. Javascript 객체

• 자바스크립트는 자바와 달리 클래스 개념을 사용하지 않고, 생성자 함수를 정의하는 형태로 객체를 사용하게 되며, 프로토타입을 활용함
• 내장 객체 : 내장 객체는 생성자 함수가 미리 정의되어(작성되어) 있는 것
• 사용자 정의 객체 : 사용자가 이 생성자 함수를 직접 정의하는 것

2. 사용자 정의 객체

• 객체와 연관된 데이터는 객체가 생성될 때 초기화 되어야 하는데 생성자라고 부르는 특별한 함수가 객체를 활성화하는데 필요함
  var arr = new Array();
• 생성자로 객체를 생성하기 위해서는 자바와 마찬가지로 new 연산자를 활용
• 생성자(객체)의 이름은 첫 글자를 대문자로 표기함
• 생성자 내부에 속성, 함수를 생성하기(정의하기) 위해 this 키워드를 사용
• 객체의 멤버인 속성과 함수는 .(dot) 연산자로 접근함
• 기본 형식 및 구조 (생성자를 구성하는 기본 형식 및 구조)

function 생성자명(인자리스트) //→ 생성자명의 첫 글자... 대문자
{
    // 속성 정의
    this.멤버명 = 인자;

    // 메소드(함수) 정의
    this.멤버명 = function(인자리스트)
    {
        // 메소드(함수) 내부 코드
        return 리턴값;
    };
}

프로토타입

• 한 객체가 가지고 있는 속성과 메소드(함수)를 다른 객체(혹은 여러 다른 객체)가 공유할 수 있도록 지원하는 개념
• 자바스크립트에서 프로토타입(Prototype)은 객체 지향 프로그래밍의 중요한 개념 중 하나로, 모든 객체는 프로토타입을 가지며, 이를 통해 상속과 프로토타입 체인(Prototype Chain)이라는 메커니즘을 구현함
• 프로토타입은 객체의 부모 역할을 하며, 다른 객체로부터 속성과 메서드를 상속할 수 있게 함. 예를 들어, 특정 객체의 프로토타입에 새로운 속성이나 메서드를 추가하면, 해당 객체와 그 객체를 상속한 모든 객체가 새로운 속성과 메서드에 접근할 수 있음
• 프로토타입은 코드를 더 효율적이고 재사용 가능하게 만들어주는데 기여하며, 객체 간의 상속을 간단하게 처리할 수 있도록 도움
   

🔎 예시 1 ] function Car는 자동차를 나타내는 객체, getDistance() 는 원래 위치부터 이동 거리를 계산하는 함수라고 가정

 

객체 정의 (member는 x, y, getDistance) 

 function Car(x, y)
{
    this.x=x;
    this.y=y;

    this.getDistance = function()
    {
        return (this.x * this.x + this.y * this.y);
    };
}

// 여러 개의 자동차를 사용하는 경우...
var c1 = new Car(10, 20);
var c2 = new Car(10, 50);
:
var c100 = new Car(10, 42);
//-- 이와 같은 구문을 활용하여 객체를 생성했다면 객체들마다 『getDistance()』 함수를 가지게 되면서 메모리를 낭비함

// 따라서, 객체들마다 함수를 가지는 것이 아니라 하나의 함수를 만들어 공유하기 위해 프로토타입을 정의함
function Car(x, y)
{  
    this.x=x;
    this.y=y;
}  

Car.prototype.getDistance = function()
{
    return (this.x * this.x + this.y * this.y);
};

var c3 = new Car(10, 80);
c3.getDistance();

 

※ 모든 객체는 프로토타입이라는 숨겨진 객체를 포함하고 있음. Car 객체의 프로토타입은 Car.prototype 이라는 숨겨진 객체를 갖고 있다는 것

 

 

🔎 예시 2 ]

 

객체 생성 및 프로토타입 할당

function Person(name) {
  this.name = name;
}

// Person 객체의 프로토타입에 메서드 추가
Person.prototype.sayHello = function() {
  console.log('Hello, ' + this.name + '!');
};

// Person 객체 생성
var person1 = new Person('John');

 

프로토타입 체인

// person1 객체는 Person의 프로토타입에 정의된 메서드를 상속받음
person1.sayHello(); // 출력: Hello, John!

 

Object.create를 사용한 프로토타입 생성

var animal = {
  makeSound: function() {
    console.log('Some generic sound');
  }
};

var cat = Object.create(animal);
cat.makeSound(); // 출력: Some generic sound