Daily/TIL(Today I Leared)

🍒What I did today(OOP에 대해서 정리)

Judaeng 2021. 3. 2. 00:21

✅객체 지향 프로그래밍(OOP in JavaScript) Blogging

객체가 무엇인지 알아보고, 객체지향 프로그래밍의 특징 4가지, 클래스와 인스턴스가 무엇인지, '프로토타입 기반 언어'까지 정리했다. (주말에 정리)

prototype, __proto__, constructor 속성들의 역할들을 이해하고, 공부하는 시간에 이렇게 시간을 쓸 줄 몰랐다...

동기분들은 어떻게 정리를 했지 하고 블로그를 눈팅했는데 너무 쉽게 정리를 해버려서 당황스러웠다💧

 

🍒Remember

✅객체 = 속성 + 행동이다.

 

✅객체지향 프로그래밍 특징 4가지

  • 캡슐화 (Encapsulation) : 한 객체에서 비슷한 역할을 하는 속성, 메서드를 캡슐처럼 한 곳(클래스)에 담는 것
  • 추상화(Abstraction) : 복잡한 문제를 단순화 ex) 전화기
  • 상속(Inheritance) : 부모 클래스의 속성과 기능을 그대로 이어받아 사용할 수 있게 한다.(일부 변경, 추가 가능)
  • 다형성(Polymorphism) : 다양한 형태를 가지는 특성 (오버 라이딩? 오버 로딩?)ex) 배터리

✅prototype, __proto__

  • Constructor를 new 연산자로 호출하면 instance가 만들어진다.
  • instance의 속성인 __proto__는 Constructor의 prototype을 참조한다.
  • __proto__는 생략 가능하다.

✅Object.create()

첫번째 인자로 들어가는 객체를 바탕으로 새로운 prototype 객체를 생성하는 메서드이다.

복사해서 새로 만든다라는 개념이 강하다.

Human.prototype의 기능을 복사한 새로운 prototype 객체를 만드는 것이다.

 

Object.create()를 쓰는 이유는?

1. 부모로부터 속성을 물려받지만, 자식들도 각자 자신만의 기능을 추가하고 싶을 때 사용한다.

2. 새로운 prototype 객체와 새로운 참조 주소값을 만들어내기 때문에 자식은 부모로부터 독립적으로 존재할 수 있게 된다.

Student.prototype = Human.prototype;

이렇게 사용하게 되면 부모 생성자 함수의 주소값까지 그대로 가져와서 두 함수가 같은 값을 참조해 종속적인 관계를 가진다.

Student객체에 변화가 생기면, Human 객체도 같은 변화가 적용된다.

이렇게 자식과 부모가 동일해진다면 상속을 할 필요도 없다.

Student.prototype.constructor = Student;

위에 코드가 이해가 안되서 정리한다.

저 코드의 Student.proStudent.prototype.constructor 는 Human인 부모객체를 바라보게 된다.

그래서 위에 코드를 사용해 Human을 바라보고 있는걸 Student로 변경해주는 것이다.

constructor는 인스턴스가 초기화 될 떄 실행하는 생성자함수(인스턴스의 초기값을 셋팅)

아래예시는 ES5 문법이다.(레거시 과거문법)

var Human = function(name){
   this.name = name;
}

Human.prototype.sleep = function() {
	console.log(this.name + ' is sleeping...');
};
var steve = new Human('steve');

var Student = function(name){
     Human.call(this, name); // Human.apply(this, arguments) 자식 부모 연결하기
}

Student.prototype = Object.create(Human.prototype); // 다형성 구현하기
Student.prototype.constructor = Student;	// 부모객체를 재할당해준다.
Student.prototype.learn = function() {console.log('Hi Judaeng')};	// 자식 기능 추가하기

var john = new Student('john');
john.learn(); // Hi Judaeng
john.sleep(); // john is sleeping...

ES6 class 키워드를 이용하면 어떻게 될까?

class Human {
	constructor(name){
    this.name = name;
	}
	sleep(){
	}
}
var steve = new Human('steve');

class Student extends Human {
	constructor(name){
    super(name);
    }
    learn(){
    }
}
var john = new Student('john');
john.learn();
john.sleep(); // john is sleeping...

위에 예시 두개가 핵심이었던 내용인데 이해를 많이 못해서 블로그에 정리를 많이 한 것 같다.

 

🍒More Study

✅알고리즘의 관한 책 읽기

✅Object.create 메서드 정리

 

2021-02-26

this 개념, OOP 이렇게 겹쳐서 정리를 하게 되었는데, 둘이 매우 비슷한 느낌이 많이 든다.🤔

근데 자세하게 알아보면 또 생각했던 느낌이 아니었다.

this, OOP 너무 헷갈리고 어렵다... 어려울수록 블로그에 기록하면서 이해를 하려고 노력해야겠다.💧