[JavaScript] 자바스크립트(JavaScript)의 객체지향

1. 프로토타입 객체(Prototype Object)

  자바스크립트(Javascript)는 프로토타입(Prototype) 기반의 객체지향 언어입니다. 클래스 기반 객체지향 프로그래밍 언어는 객체 생성 이전에 클래스를 정의하고 이를 통해 객체(인스턴스)를 생성한다. 하지만 프로토타입 기반 객체지향 프로그래밍 언어는 클래스 없이도 객체를 생성할 수 있으며, 자바스크립트에서는 객체를 프로토타입 형태로 생성하고 그 안에 기능을 위한 함수나 변수를 추가하는 방법으로 그룹화하는 개념입니다.

  프로토타입 기반 언어에서 객체를 생성하는 방법은 크게 두 가지가 있다. 첫 번째 방법은 클래스를 작성하고, 이것을 기반으로 객체를 생성하는 방법이고, 두 번째는 아무것도 들어있지 않은 빈 객체를 생성한 후에 이 객체의 기능을 첨가 확장해가는 방법입니다. 두 번째 방법이 프로토타입 기반의 언어를 이해하는데 가장 효과적인 방법이다.

 

2. 자바스크립트에서 객체를 만드는 방법

1) 빈 객체 생성

var 객체명 = {};

  비어 있는 괄호를 통해서 빈 객체를 생성할 수 있습니다.

 

2) 변수 추가

객체이름.변수명 = "값";

  객체 안에 추가되는 변수를 프로퍼티(속성)이라 하며, 위와 같은 형식을 사용하여 추가합니다. 아래는 예시 코드입니다.

//객체 안에 포함된 변수 = 멤버변수 
//객체 안에 포함된 함수 = 메서드 

// 비어 있는 객체의 생성
var people = { };

// 객체 안에 변수를 포함시키기
people.name = "홍길동";
people.gender = "남자";

// 프로퍼티(=멤버변수)의 사용
document.write("<h1>" + people.name + "님은 " + people.gender + "입니다.</h1>");

 

3) 함수의 다른 생성 방법

  자바스크립트의 변수는 값을 할당할 때 데이터형이 결정되기 때문에 함수를 직접 대입하는 것이 가능합니다. 이렇게 생성된 변수는 함수와 동일하게 사용할 수 있습니다. 아래는 예시 코드입니다.

// 일반적인 함수의 선언
function myFunction() {
	document.write("<h1>Hello. Javascript</h1>");
}

// Javascript는 함수와 변수가 동급이다. 따라서 함수의 이름을 변수에 대입할 수 있다.
var value = myFunction;

// 함수가 대입된 변수는 그 자신이 함수처럼 동작한다.
value();

// 함수를 변수에 대입할 수 있기 때문에 처음부터 변수에 함수의 내용을 대입하는 것이 가능하다.
var value = function() {
	document.write("<h1>Hello. Javascript</h1>");
};
value();

 

4) 객체에 함수 추가(메서드)

  메서드는 빈 객체에게 프로퍼티를 추가하면서 값 대신 함수를 대입하는 것입니다.

객체이름.함수이름 = function(매개변수) {
	실행문;
	return 값;
};

 

5) 객체 안에서 객체의 자원 활용(this)

  객체 안에 포함된 메서드에서 다른 메서드를 호출하거나, 프로퍼티를 활용하고자 하는 경우, this 키워드를 사용합니다. 하지만 메서드 안에서만 유효한 변수는 기존의 방식대로 var 키워드를 사용하여 생성할 수 있습니다. 멤버변수는 모든 메서드 안에서 서로 공유하는 것이 가능하므로 전역 변수라고 하고, 반대로 메서드 안에서 var 키워드를 사용하여 생성되는 변수는 그 메서드 안에서만 유효하므로 지역 변수라고 합니다.

객체이름.함수이름 = function(매개변수) {
	this.변수이름 = 값;
    var 변수이름 = this.함수이름(매개변수);
    return 값;
};

 

  아래는 예시 코드입니다.

// 비어 있는 객체의 생성
var people = {};

// 객체 안에 변수를 포함시키기
people.name = "홍길동";
people.gender = "남자";

// 객체 안에 함수를 포함시키기
people.sayName = function() {
	// 객체 안에 포함된 함수에서, 멤버변수에 접근하기 위해서는 반드시 "this."이라는 특수 예약어를 사용해야 한다.
    document.write("<h1>" + this.name + "</h1>");
};

people.sayGender = function() {
	document.write("<h1>" + this.gender + "</h1>");
};

people.saySomething = function(msg) {
	document.write("<h1>" + msg + "</h1>");
};

people.getName = function() {
	return this.name;
};

people.getGender = function() {
	return this.gender;
};

people.sayInfo = function() {
	document.write("<h1>" + this.getName() + "님은 " + this.getGender() + "입니다.</h1>");
};

// 객체 안의 메서드 호출예제
people.sayName();
people.sayGender();
people.saySomething("Hello Javascript");
people.sayInfo();
console.log(people);

 

- 참고 문헌

https://poiemaweb.com/js-prototype