객체지향
객체 지향 프로그래밍
하나의 모델의 되는 청사진(blueprint)를 만들고, 그 청사진을 바탕으로 한 객체(obejct) 만드는 프로그래밍 패턴
청사진을 바탕으로 한 객체는 인스턴스객체(instance object)줄여서 인스턴스라고 합니다.
이때 청사진은 class라고 합니다!
객체를 만들기!
- new키워드를 사용해서 객체를 만들면 이는 새로운 인스턴스를 만드는 방법입니다.
- class를 만드는 방법
클래스를 만들때 암묵적인 규칙으로, 보통 클래스는 대문자, 그리고 일반 명사로 만든다.
따라서 일반적임 함수를 만들 때에는, 적절한 동사를 포함하고, 소문자로 시작하도록 만들면 좋다. - class는 ES6에서 부터 도입되었습니다.
- 함수는 객체지향 프로그래밍에서 생성자(constructor)함수라고 부릅니다.
- 생성자 함수는 return 값을 만들지 않습니다.
인스턴스 만드는 방법
- 인스턴스를 만들 때에는 new키워드를 사용한다.
- 즉시 생성자 함수가 실행되며 , 변수에 클래스의 설계를 닮은 새로운 객체 , 즉 인스턴스가 할당된다
- 인스턴스는 클래스의 고유한 속성과 메소드를 갖게된다.
😃매서드호출
매서드 호출은 객체.매서드() 같이 객채 내에서 메서드를 호출 하는 방법을 의미합니다.
let counter1 = {
value: 0,
increase: function() {
this.value++ // 메서드 호출을 할 경우, this는 counter1을 가리킵니다
},
decrease: function() {
this.value--
},
getValue: function() {
return this.value
}
}
counter1.increase()
counter1.increase()
counter1.increase()
counter1.decrease()
counter1.getValue() // 2🔇매서드 호출 방식을 이용할때 화살표 함수를 쓰지 않습니다.
- 객체의 메서드를 정의할 때 화살표 함수를 사용하면, 바인딩 과정을
생략하기 때문에 this를 가리킬 곳이 사라져버립니다. 그렇게 가리킬곳이 사라진 this는
this 기본값 전역객체가 되어 버립니다.
😗클로저를 이용해 매번 새로운 객체 생성하기
위처럼 같은 기능을 여러번 사용해야할때 클로저 모듈 패턴을 이용하면 중복사용에서 벗어날수있습니다!
function makeCounter() {
let value = 0;
return {
increase: function() {
value++;
},
decrease: function() {
value--;
},
getValue: function() {
return value;
}
}
}
let counter1 = makeCounter()
counter1.increase()
counter1.getValue() // 1
let counter2 = makeCounter()
counter2.decrease()
counter2.decrease()
counter2.getValue() // -2❗️객체지향
Javascript는 프로토타입 기반 객체지향 프로그래밍 언어이며 이는 java,C++ 등 차이점입니다.
ES6부터 Calss문법이 추가 되었으며, Class 또한 프로토타입 기반의 함수 중 하나입니다
즉 Class 가 ES6와 같이 등장 하였지만, 프로토타입을 그래도 배워야하는 이유는
아직 es5로 작성된 코드들이 많이있으며, 객체 생성,상속이 구현된 코드를 모르면 마이그레이션 할 수 가 없습니다.
🧓prototype
자바스크립트의 프로토타입
프로토타입(prototype)이라고 하면 일반적으로 자바스크립트만을 떠올리지만 사실 프로토타입은 자바스크립트에서만 사용되는 것은 아니고 하나의 디자인 패턴입니다.
자바스크립트의 모든 객체는 prototype 객체를 가지고 있고 그 prototype을 복제하면서 객체를 생성합니다.
자바스크립트 객체는 Prototype이라는 내부 프로퍼티가 존재합니다. 거의 모든 객체가 생성 시점에 이 프로퍼티에 null이 아닌 값이 할당됩니다.
그리고 이 프로타입객체는 새로운 생성할때 원본 객체 역할을 해줄 객체를 의미합니다.
constructor 프로퍼티
이 프로퍼티는 단어 그대로 원래의 생성자 함수(자기 자신)을 참조하고 있다.
console.log(User.prototype.constructor === User); // true자신에게 자심을 참조하는 프로퍼티를 굳이 왜 가지고 있을까 싶지만 자신의 의해 생선된 인스턴스 객체 입장에서 봤을때 그 원형이 무엇인지 알 수 있는 수단이 된다. (앞서 말했듯 인스턴스는 생성자의 prototype을 그대로 복제하므로!)
proto 프로퍼티
새롭게 생성된 객체는 원본 객체와의 연결을 가지고 있다. 이때 이 연결을 프로토타입 링크(Prototype Link)라고 한다. 그리고 이 링크가 담기는 프로퍼티가 proto 프로퍼티이다. 또한 프로토타입 링크는 생략가능하다.
const evan = new User();
console.log(evan.__proto__.constructor === User); // true
console.log(evan.constructor === User); // true--proto__ 는 예전 방식으로 많은 브라우저 호환성 유지에 인정되었지만
ECMAScript 명세에는 Object.getPrototypeOf() 를 접근 하는것을 권장하고있다.
프로토타입 체인
Object.prototype가 모든 객체들의 조상님이다.
상속을 해주는
object에서 자료뽑을 때 일어나는 일
1. 직접 자료를 가지고 있는지 확인후 있으면 출력합니다.
2. 없으면 부모요소에서 확인후 출력합니다.
3. 없으면 부모 요소에 부모 요소 확인후 출력합니다(반복 : 체인이라고도함).
🔔클래스
클래스는 함수이다.
클래스는 constructor와 메소드가 들어간다. new 연산자를 사용해서 객체를 생성하면 constructor가 자동으로 호출되고 메소드는 prototype에 들어간다.
const mike = new User('Mike' , 30)
class User2 { // 1. 클래스란 키워드를 사용하며
constructor(name,age){ // 2. 내부에는 constructor 가 존재합니다.(객체를 만들어주는 생성자 메소드)
this.name = name;
this.age = age;
}
showName(){
console.log(this.name);
}
}
const tom = new User2('Tom' , 19); // 3.New를 통해 실행됩니다.[클래스 예시 코드 - 1]
클래스는 ES6에서 추가된 문법입니다.
클래스와 생성자 함수의 차이점
- class로 만든 함수에는 특수 내부 프로퍼티 [[FunctionKind]] 라는 것이 있어서 new 연산자와 함께 호출하지 않으면 에러가 발생한다.
- 클래스의 메서드는 열거할 수 없다.
- 클래스는 항상 엄격모드로 실행된다.
~~클래스
인스턴스
new 키워드
생성자 함수
ES5 클래스 작성 문법
ES6 클래스 작성 문법
블로그는 사전에 안내된 수강생 노션 페이지를 이용하여 작성합니다.
객체 지향 프로그래밍
캡슐화
추상화
상속
다형성
프로토타입
.prototype
.proto
클래스, 인스턴스, 프로토타입의 관계
~~
