코드스테이츠 컨텐츠 복습
JavaScript - OOP Object 생성
로 자바스크립트에서 OOP를 어떻게 사용하는지 복습
JavaScript - Prototype과 상속
에서 prototype 복습
JS는 prototype으로 class를 만든다. prototype은 객체의 원형으로 이를 복제하여 상속을 한다. Prototype object와 Prototype link로 나눌수 있는데,
자바스크립트에서 객체를 생성할때, var obj = new Object(); 이렇게 생성된다. 이는 객체를 생성할때 함수를 통해 생성된다는 것을 알 수 있는데, 함수가 생성될 때 기본적으로 해당함수에 생성자 자격이 부여되고, 해당함수의 Prototype Object가 생성 및 연결 된다.
생성된 함수는 prototype이라는 속성을 통해 Prototype Object에 접근할 수 있다. Prototype Object의 속성으로는 constructor
, __proto__
가 있다.
Prototype link는 __prototype__
에 값을 담고 있는데 이는 자신을 만들어낸 객체의 원형을 의미한다.
Prototype Chain은 상속관계를 통해 상위 프로토타입으로 연속해서 이어지는 관계를 말한다.
class 키워드를 사용하면 간단하다.
class Human{
constructor(name){
this.name = name;
}
sleep(){ console.log('zzz'); }
}
class Student extends Human{
constructor(name){
super(name);
}
learn(){ console.log('빡공중')}
sleep(){
super.sleep()
console.log('wake up!')
}
}
위의 원리는 아래와 같음
var Human = function(name){
this.name = name;
}
Human.prototype.sleep = function(){console.log('zzz')}
var Student = function(name){
Human.call(this,name);
}
Student.prototype = Object.create(Human.prototype);
Student.prototype.constructor = Student;
Student.prototype.learn = function(){};
// 객체지향의 다형성
Student.prototype.sleep = function(){
Human.prototype.sleep.apply(this);
console.log('wake up!');
}
코드스테이츠 프라이빗 레포 beesbeesbees로 자바스크립트의 상속을 복습하였다.
ES6
class Grub {
constructor() {
this.age = 0;
this.color = 'pink';
this.food = 'jelly';
}
eat() {
return 'Mmmmmmmmm jelly';
}
}
class Bee extends Grub{
constructor(){
super();
this.age = 5;
this.color = 'yellow';
this.job = 'Keep on growing';
}
}
코드스테이츠 프라이빗 레포 subclass-dance-party로 OOP 다형성을 복습하였다.
class DancerClass {
constructor(top, left, timeBetweenSteps) {
this.$node = this.createDancerElement();
this.top = top;
this.left = left;
this.timeBetweenSteps = timeBetweenSteps;
this.step();
this.setPosition(this.top, this.left);
}
createDancerElement() {
let elDancer = document.createElement('span');
elDancer.className = 'dancer';
return elDancer;
};
step() {
setTimeout(this.step.bind(this), this.timeBetweenSteps);
}
setPosition(top, left) {
Object.assign(this.$node.style, {
top: `${top}px`,
left: `${left}px`
});
}
}
class RotatingDancerClass extends DancerClass {
//constructor(top, left, timeBetweenSteps) {
// super(top, left, timeBetweenSteps);
//}
step() {
super.step();
let style = this.$node.style;
// style.display = "inline-block";
//style.display = style.display === 'none' ? 'inline-block' : 'none';
}
createDancerElement() {
let elDancer = document.createElement('img');
elDancer.className = 'rotatingImage';
elDancer.src = "https://image.flaticon.com/icons/svg/742/742795.svg"
elDancer.style.width = "150px";
elDancer.style.height = "150px";
elDancer.onclick = function(){
let el =document.querySelector(".rotatingImage");
el.remove();
}
return elDancer;
};
}
복습
컴퓨터에 0과 1로 저장되어 있는 데이터를 인간이 사용하는 여러가지 데이터들의 종류로 해석하기 위한 장치
대부분의 자료구조는 특정한 상황에 문제를 해결하는데 특화되어 있다.
스택, 큐를 복습하였다.
+)
hasOwnProperty - 객체가 특정 프로퍼티를 가지고 있는지를 나타내는 불리언 값을 반환
MDN | hasOwnProperty