3 / 28

클래스와 인스턴스

클래스

객체를 생성하기 위한 청사진
객체를 만들기 위한 constructor 함수 포함

인스턴스

클래스를 바탕으로 메모리에 구현된 객체

객체 지향 프로그래밍의 특징

-캡슐화

데이터와 기능을 결합하는 것
누군가가 데이터에 임의로 접근하거나 수정할 수 없도록 함
코드가 복잡하지 않게 만들고 재사용성을 높임
선풍기의 예시 (미풍, 약풍 등의 바람 조절을 전선을 건드려서 하는 것이 아니라 버튼으로)

-상속

부모 클래스의 특징을 자식 클래스에서 물려받아 사용할 수 있도록 하는 것
사람이라는 부모 클래스에 성별, 이름, 나이 등을 넣어두면 그 자식 클래스인 학생에서 따로 선언하지 않아도 사용가능, 새로운 특징을 추가하는 것도 가능함
불필요한 코드를 줄여 재사용성을 높임

-추상화

내부 구현은 복잡하지만 실제로 노출되는 부분은 단순하게 만드는 것
캡슐화는 데이터의 은닉에 중점, 추상화는 단순하게 정의하는 것에 중점
코드가 복잡하지 않게 만들고 단순화된 사용으로 인해 변화에 대한 영향을 최소화
고양이의 예시 (어떤 특이한 특징을 가진 고양이여도 결국 고양이라는 일반적인 특징으로 정리할 수 있음)

-다형성

똑같은 메소드라고 해도 다른 방식으로 구현될 수 있음
TextBox와 CheckBox, Select를 구현할 때 셋 다 render()라는 메소드를 사용해서 구현하지만 나오는 결과물은 각각 다름
동일한 메소드를 객체의 특성에 맞게 작성할 수 있게함
하나의 객체가 여러 type을 가지는 것

오버라이딩

자식 클래스에서 부모 클래스의 기능을 재정의할 때 사용하는 기능
부모 클래스의 기능 중 오버라이드하고자 하는 기능을 자식 클래스에서 똑같은 이름으로 만들어주면 됨
확장할 경우에는 메소드 내부에 call()을 사용해 부모의 기능 호출

다음과 같은 경우에 사용

부모 클래스의 기능을 사용하지 않고 자식 클래스에서 구현한 기능을 사용하고 싶은 경우
부모 클래스의 기능을 자식 클래스에서 확장하고 싶은 경우

// 부모 클래스 
function MyParent() 
{ this.property1 = 'data1'; 
 console.log('MyParent'); 
} 
MyParent.prototype.method1 = function () { 
  console.log('property1 = ' + this.property1); 
}; 
// 자식 클래스 
function MyChild() { 
  console.log('MyChild'); 
} 
// 부모 클래스 상속하기 
MyChild.prototype = new MyParent(); 
// 생성자 설정 
MyChild.prototype.constructor = MyChild; 
/** * ------------------ * 메서드 오버라이드 * ------------------ **/
MyChild.prototype.method1 = function () { 
  console.log('프로퍼티 1은 = ' + this.property1 + ' 입니다.'); 
}; 
// 자식 인스턴스 생성 
var child = new MyChild(); 
// 메서드 호출 
child.method1(); 
// 콘솔창 결과 
// MyParent 
// MyChild 
// 프로퍼티 1은 = data1입니다.
출처:  [Web Club]

오버로딩

동일한 이름을 가진 여러 개의 메소드를 만든 후 매개변수 타입과 개수에 맞는 메소드가 자동으로 호출되는 기능 but 자바스크립트는 제공하지 않음
같은 이름을 가진 함수가 여러개 있는 것 (javascript는 맨 마지막 것만 인식함)
대신 constructor 함수를 이용해 오버로딩을 흉내낼 수 있음

function sum() { 
  var result = 0; 
  for (var i = 0; i < arguments.length; i++) { 
    result += arguments[i]; 
  } 
  return result; 
} 
console.log(sum(10, 20)); // 30 
console.log(sum(10, 20, 30)); // 60 
console.log(sum(10, 20, 30, 40)); // 100 
console.log(sum(10, 20, 30, 40, 50)); // 150
출처:  [Web Club]

Prototype

javascript는 함수가 생성될 때 constructor 프로퍼티만을 가진 프로토타입 객체도 같이 생성한 뒤 함수 객체의 prototype 프로퍼티로 해당 객체를 가리킴
같이 생성된 프로토타입 객체의 constructor 프로퍼티는 자신을 생성한 함수 객체를 가리키게 됨
함수 객체에만 들어있음!

var func = function(){}
func.prop = 'this is my function'

console.log(func === func.prototype.constructor) //true

__proto__

원래 명칭은 [[prototype]]으로 javascript의 모든 객체 내부에 은닉되어 있음
많은 브라우저가 [[prototype]]프로퍼티를 __proto__ 프로퍼티로 구현해둠
자신을 생성한 constructor 함수의 prototype을 가리킴
모든 객체에 들어있음!

Prototype chaining

객체가 자신의 프로퍼티나 메소드 뿐만 아니라 부모역할을 하는 객체의 프로퍼티와 메소드에도 접근을 가능하게 하는 것

// Shapes 생성자 함수 생성
var Shapes = function(shape){
    this.shape = shape;
}

// 생성자 함수를 이용해 객체 생성
var a = new Shapes('rectangle');

// a 객체의 color 프로퍼티 출력
console.log(a.color); // undefined
// a 객체에는 color 프로퍼티가 없으므로 undefined 반환

// Shapes 생성자 함수의 프로토타입 객체에 color 프로퍼티 추가
Shapes.prototype.color = 'red';

// 프로토타입 체이닝이 일어남
console.log(a.color); // red
// a 객체에는 여전히 color 프로퍼티가 없지만 프로토타입 체이닝을 통해 부모객체인 Shapes에 있는 color 프로퍼티를 받아오게 됨