pseudo-classical 패턴
과제에는 ES5(pseudo-classical) 패턴 및 ES6 class keyword 를 각각 사용해서 코드를 작성해야했다.
ES5(pseudo-classical) 패턴 같은 경우는 constructor를 명시하지 않는다.
// 수도클래식한 방법으로 constructor 생성
const Me = function () {
this.age = 28;
this.name = "useong";
this.food = "Chicken";
}
// 스코프를 나온 뒤, 메소드를 만든다.
Me.prototype.eat = function() {
return 'Ummmmmmmm Chicken';
}
이렇게하면 Me라는 기본적인 pseudo-classical 함수를 만들 수 있다. 실제로 메소드를 사용하기 위해서는 생성자 함수를 만들어야 한다.
const itsMe = new Me()
console.log (itsMe.eat()) // 'Ummmmmmmm Chicken'
이렇게 생성자 함수를 할당하면 메소드까지 사용할 수 있다.
pseudo-classical 패턴 참조하기
그렇다면 Me 함수를 그대로 참조하면서 메소드를 추가하려면 어떻게 해야할까?
새로운 함수 You에 Me를 참조하면서 메소드를 추가해보겠다.
const You = function () {
// call함수를 이용해서 Me함수를 참조한다.
Me.call(this);
this.age = 20
this.job = "developer"
this.coding_skill = 0
}
// constructor를 연결해준다.
You.prototype = Object.create(Me.prototype);
You.prototype.constructor = You;
// 메소드 추가
You.prototype.coding_skill_plus = function () {
this.coding_skill++
}
const you = new You ()
// 메소드 사용
you.coding_skill_plus()
console.log(you)
/*
You {
age: 20,
name: "useong",
food: "Chicken",
job: "developer",
coding_skill: 1; (1 증가)
}
*/
ES6 Class keyword
ES6 문법에는 constructor라는 함수가 생겨났다.
constructor란인스턴스가 생성될 때 실행되는 함수라고 보면 된다.
class Grub {
constructor (name, age) {
console.log("constructor called", this)
this.name = name
this.age = age
}
}
const newGrub = new Grub ("me", 28);
// => "constructor called" 생성자함수 할당과 동시에 실행된다.
// new 함수 this의 의미 => Grub {} (즉, newGrub의 this가 된다.)
newGrub.__proto__ === Grub.prototype
//true
//grub의 주소가 들어있다.
// __proto__ => Grub을 참조하기 위한 하나의 속성이다.
Grub.prototype.constructor === Grub
나도 처음에는 이 조건문이 상속의 개념인 줄 알았지만, 상속의 개념은 아니고
참조의 개념이라고 이해하면 좋다고 한다.
super()
pseudo-classical으로 코드를 작성하다가 ES6 문법으로 코드를 작성하려고하니,,, 정말 간편했다. super()는 상속의 개념과 가까웠다.
class Me {
// 생성자 함수
constructor () {
this.age = 28;
this.name = "useonglee";
}
//메소드는 스코프 안에서 만들어주면 된다.
eat () {
return 'Ummmmmmmm Chicken';
}
}
위에 만들어진 Me 라는 class 함수를 super()를 통해 상속할 수 있다.
class Useonglee extends Me {
constructor () {
super();
this.job = "developer";
this.coding_skill = [];
}
exp (code) {
this.coding_skill.push(code);
}
}
// 클래스 함수의 인스턴스 만들기
const me = new Me()
const useonglee = new Useonglee()
useonglee.exp("클래스 함수 마스터")
console.log(me)
/*
Me {
age: 28,
name: "useonglee",
*/
console.log(useonglee)
/*
Useonglee {
age: 28,
name: "useonglee",
job: "developer",
coding_skill: ["클래스 함수 마스터"]
*/
위에 코드를 보면 Me 클래스 함수라는 부모의 함수에서 상속을 받았다는 것을 알 수 있다.
그리고 Useonglee 함수에만 있는 메소드를 추가해서 다형성까지 공부를 해보았다!
이 과제를 시작하기 전에는 도대체 이게 뭐하는 과제인가 궁금했지만 막상 시작하고 알았다. 그냥 클래스 함수와 파일명이었다는 것을….
이번 페어 프로그래밍도 재밌게 진행되었다. 서로 의견을 주고 받으면서 문제가 발생하면 바로 검색해보고, 페어분과 의견을 자유롭게 주고 받으면서, 내 의견과 페어분의 의견중에 하나만 해보는 것이 아닌, 둘 다 실행해보는 시간을 가졌다.
내 의견이 과제 테스트 케이스에 통과가 된다고 하더라도, 페어분의 의견도 시험삼아 진행해보았다! 그랬더니 나도 어떻게 했을 때 오류가 나는지 공부도 되었던 것 같다.
👊 내일의 TIW(today I Will)
인스턴스를 DOM과 활용