본문 바로가기
창고(2021년 이전)

[JS] OOP(Objcet Oriented Programming)

by 측면삼각근 2019. 11. 14.
728x90
반응형

컴퓨터 프로그램 : 알고리즘의 모음!
프로그램 언어 : 프로그램을 개발할수 있도록 도와주는 tool

  1. Machine Languages : 1과 0의 조합
  2. Assembly Languages : CPU를 통해서 기계어로 변환됨 제약 多
  3. High-Level Languages : (고급언어) 영어랑 비슷함, line-by-line으로 실행된다.

HL언어는 두가지로 볼 수 있었다.

  1. Procedural languages - 절차지향 언어 : 어떤 절차로 진행될것인가? c언어가 대표적
  2. Object - Oriented languages(OOP) - 객체지향 언어 : Programmers code using 'blueprints' of data models called class :Java, C++, Phython, PHP, JS.....

객체 지향의 특징

  1. Encapsulation - 캡슐화
  2. Ingeritance - 상속
  3. Abstaction - 추상화
  4. Polymorphism - 다형성

 


Js 객체 예제

1. Fuctional

var Car = funciton(position){
  var someInstance = {};
  someInstance.position = position;
  someInstance.move = function(){
    this.position += 1;
  }
  return someInstance;
}

var car1 = Car(5);

 

2. Fuctional Shared

var extend = function( to, from){
	for( var key in from ){
    	to[key] = from[key];
    }
}

var someMethods = {};
someMethods.move = function(){
	this.position += 1;
}

var Car = function(position){
	var someInstance = {
    	position : position;
    };
    extend(someInstance, someMethods);
    return someInstance;
}

var car1 = Car(5);
var car2 = Car(10);

이전의 Functonal방식은 인스턴스를 생성할 때 마다 모든 메소드를 someInstance에게 할당하므로, 각각의 인스턴스들이 메소드의 수만큼 더 차지한다.
하지만 Functional Shared 방식을 사용한다면, someMethods 라는 객체에 있는 메소드들이 메모리 주소만을 참조하기 때문에 메모리 효율이 더 좋다.

3. Prototypal Instantiation

var someMethods = {};
someMethods.move = function(){
  this.position += 1;
}

var Car = function(position){
  var someInstance = Object.create(someMethods)
  // Object.create는 특정객체를 프로토 타입으로 하는 객체를 생성해주는 함수
  someInstance.potition = position;
  return someInstance;
}

var car1 = Car(5);
var car2 = Car(10);

objcet.create MDN

Object.create 는 생성자로 객체를 만드는것이 아니라 prototype 에 대한 참조가 더 주된 목적이다.

const Car = function(color){
  this.color = color
}

Car.prototype = {
  getColor(){
    return this.color;
  }
}

const ToyCar = function(){}

ToyCar.prototype = Object.create(Car.prototype);

const LegoCar = new ToyCar();

console.dir(ToyCar);//getColor 존재
console.dir(LegoCar);// getColor 존재
console.dir(Car);// getColor 가 존재하지 않음

 

4. Pseudoclassical_가장 많이 쓰는 방식

var Car = fucntion(position){
	this.position = position;
}

Car.prototype.move = function(){
	this.postion += 1;
}

var car1 = new Car(5);
var car2 = new Car(10);

 

반응형