< P5.JS > 1. P5.JS의 OOP ( Object - Oriented Programming )

1.   OOP ( Object – Oriented Programming ) 란 ?

 

OOP는 객체지향 언어를 뜻한다. 자바스크립트는 프로토타입 기반 ( Prototype – based ) 의 객체지향 언어다. P5.JS도 자바스크립트 기반의 라이브러리이기 때문에, 객체의 관점으로 프로그래밍한다. 

 

프로토타입 기반은 클래스가 필요 없는 ( Class-free ) 방식이다. 클래스 기반 언어에서 상속을 사용하는 것과는 다르게, 객체를 원형으로 하여 이것을 복제하는 과정을 통해 사용 할 수 있다.

 

객체지향 프로그래밍이란, 코딩하는 방식, 방법론 중 하나이다. 예를 들어 컴퓨터가 있으면 이 컴퓨터란 무엇인지, 이 컴퓨터가 수행할 수 있는 일은 무엇인지 정의하고 이것으로 프로그래밍 하는 방법이라고 생각된다. 즉, 상위 개념이 존재하고 하위 개념들을 그룹핑 한 것이다.

 

자바스크립트의 객체지향은 다른 자바, C++ 같은 객체지향 언어와는 사뭇 다르다고한다.

 

 

-       클래스를 사용하는 객체지향, 클래스가 필요없는 객체지향

 좀 더 깊게 이해해보기

 

클래스를 사용하는 객체지향에서는 생성자가 클래스 소속이라고 한다. 즉, 클래스에서 생성자를 호출하여 객체를 만드는 것이다.

 

클래스가 필요없는 객체지향에서 생성자는 어디에도 소속되어 있지않은 ‘함수’다. 이 함수에 new를 붙이면, 비어있는 객체가 만들어지는 것이다.

 

 

 

-       클래스 기반의 객체지향 언어 구성 요소

 

클래스 ( Class ), 객체/인스턴스 ( Obect ) 

 

클래스 : 일종의 설계도. 위에서 말했듯이 컴퓨터의 정의, 컴퓨터가 수행 할 수 있는 일의 정의를 이 설계도에 디자인하는 것을 뜻한다.

 

객체/인스턴스 : 클래스 ( 설계도 )를 사용하여 생성한 실제 물건을 뜻한다. 컴퓨터 설계도를 통해 실제적으로 만들어진 컴퓨터가 내 눈앞에 있다고 생각하면 될까.

 

 

-       P5.JS 에서 Function 으로 클래스 / 객체 만드는 방법 분석하기

 

자바스크립트에서는 function 과 new 생성자를 통해 클래스를 비슷하게 흉내낸다고 한다.

 

var w;

function setup() {
  createCanvas(400, 400);
  
  w = new walker();		// new : 생성자 ( constructor ) 는 객체를 만드는 역할을 하는 ‘함수’다.
					   	// walker 라는 객체를 생성하고, 그 객체를 w에 반환한다.
}

function draw() {
  background(220);
  
  w.walk();
  w.display();			// 객체를 사용하기 위해 콜한다.
}

function walker() {
  this.pos = createVector(width/2, height/2); // 원의 초기 위치 백터를 지정.
  this.vel = createVector(0,0); // 속도 백터 초기화.
  this.acc = createVector(0,0.1); // 가속도 백터 초기화
  
  this.walk = function() {
    this.vel.add(this.acc);
    this.pos.add(this.vel);
  }
  
  this.display = function() {
    fill(255);
    ellipse(this.pos.x, this.pos.y, 10, 10);
  }
}

 

 

 

-       P5.JS 에서 클래스 / 객체 만드는 방법 분석하기

 

let ball; // class


function setup() {
  createCanvas(400, 400); 
  ball = new Ball(30);
}


function draw() {
  background(220, 5);
  
  ball.update();
  ball.display();
  
}

class Ball {
  constructor(sizeOfBall) {
    this.x = width/2;
    this.y = height/2;
    this.w = sizeOfBall;
  }
  
  update() {
    this.x = this.x + random(-5, 5);
    this.y = this.y + random(-5, 5);
  }
  
  display() {
    ellipse(this.x, this.y, this.w);
  }
}