멋쟁이사자처럼 프론트엔드 스쿨 2기 33_Day

aydennote·2022년 5월 17일
0

📖 오늘 학습 뽀인트!

  1. stopPropagation
  2. 객체지향 프로그래밍
    2-1 생성자
    2-2 prototype
    2-3 객체 상속

1. stopPropagation

🕵️‍♀️ stopPropagation이란?

	const submit = document.querySelector('.submit');
	submit.addEventListener('click', (event) => {
	    console.log('clicked');          // clicked 출력.
	    event.stopPropagation();         // 다음 이벤트 실행 X
	});

지난 게시물에 포스팅한 event.preventDefault는 이벤트 동작 자체를 막을 수 있지만 이벤트 전파를 막을 수는 없었다.
event.stopPropagation()는 이벤트 전파를 막는 메소드이다.
이벤트 전파 또한 지난 게시물에 포스팅한 적이 있었는데, 다시 간단히 설명하자면 캡처링 단계, 버블링 단계에서 이벤트 리스너가 차례로 실행되는 것이다. 좀 더 자세한 내용은 아래 이벤트 전파 링크에 작성되어 있다.
이벤트 전파


✍ 결과적으로 stopPropagation를 사용하면 다음 이벤트로 전파되지 않아 다음 이벤트가 실행되지 않는다.

2. 객체지향 프로그래밍(OOP)

🕵️‍♀️ 객체지향 프로그래밍이란?
데이터를 추상화시켜 상태와 행위를 가진 객체로 만들고 그 객체들 간의 유기적인 상호작용을 통해 로직을 구성하는 프로그래밍 패러다임 중 하나이다.


✍ 객체지향 프로그래밍 장단점
장점 :

  • 코드 유지보수가 비교적 쉬움.
  • 코드 재사용 용이.

단점 :

  • 설계가 비교적 복잡.

2-1 생성자

🕵️‍♀️생성자란?
객체를 만들 때 new 연산자와 함께 사용하는 함수이다. 함수의 기능적인 부분만 보았을 때는 일반적인 함수와 차이는 없다.

function SayMyName(name) {
        this.name = name;
        console.log(`제 이름은 ${name} 입니다.`);
      }
const me = new SayMyName("ayden");
  • SayMyName()는 생성자 함수로 필수는 아니지만 일반 함수와 구분하기 위해 이름 맨 앞을 대문자로 쓴다.
  • new 키워드를 사용하여 인스턴스를 생성한다.
  • 생성자 함수에서 this는 인스턴스를 뜻한다.

new 키워드의 역할
생성자 함수에 return 이 없어도 인스턴스를 반환한다.


❓ 생성자를 왜 사용할까?
생성자의 장점은 생성자를 통해 생성된 객체는 같은 프로퍼티와 메서드를 공유할 수 있다는 것이다. 결국 코드 재사용, 생산성 향상, 유지보수 용이하게 하기 위해 사용한다.

2-2 prototype

🕵️‍♀️prototype이란?
메서드 저장 공간(객체)이며, 인스턴스끼리 메서드 공유를 위해 사용한다. 즉, 객체의 메서드를 등록 할때마다 새로운 함수를 생성하지 않아도 된다.
유전자 쯤으로 생각하면 될 것 같다.

function NewFactory(name) {
   this.name = name;
}
NewFactory.prototype.sayMyName = function () {
      console.log(`제 이름은 ${this.name}입니다.`);
};
const result = new NewFactory("ayden");
console.log(result.sayMyName());

생성자 함수명.prototype.생성할 함수명 = function () {...}로 생성자 함수에 prototype을 추가할 수 있다.

2-3 객체 상속

🕵️‍♀️ 객체 상속이란?
부모 생성자의 기능을 물려받으면서 새로운 기능도 추가할 수 있는 것을 의미하며, 확장(extend)이라고도 한다.

function Parent() {        //  생성자 함수
    this.name = 'ayden';
}
Parent.prototype.rename = function (name){ // Parent 유전자에 함수 생성
    this.name = name;
}
Parent.prototype.sayName = function () {   // Parent 유전자에 함수 생성
    console.log(this.name);
}
function Child() {
    Parent.call(this);
}
Child.prototype = Object.create(Parent.prototype);
Child.prototype.canWalk = function () {
    console.log('now i can walk!!');
}


Parent.prototype은 추가한 renamesayName 함수를 포함한 객체에 대한 property가 prototype에 정의되어 있다.
Child.prototypeParent.prototype + 따로 정의한 canWalk가 정의되어 있다. 위 소스코드는 객체 상속에 대한 전문이고 아래 내용은 핵심 내용에 대한 설명이다.


Child.prototype = Object.create(Parent.prototype);
Child.prototype.canWalk = function () {
    console.log('now i can walk!!');
}

Child.prototype객체에 Parent.prototype 을 객체로 생성하여 참조시킨다.
❓ Parent.prototype 이 객체인데 왜 객체로 생성해서 Child를 참조시킬까?
당연하지만 Child.prototype = Parent.prototype;로 작성하면 Child.prototype과 Parent.prototype 동일해진다.즉, 상속이 아니라 완전히 똑같은 객체가 만들어진다.


function Child() {
    Parent.call(this);
}

const child1 = new Child()로 child1이라는 인스턴스를 생성했을 때, Parent.call(this); 코드에 this는 child1이다. 위 소스코드로 child1이 Parent 함수 안 property에 접근할 수 있다.


✍ call 과 super
상속에 있어서 call(this)super()는 비슷한 역할을 한다고 생각한다.
둘 다 부모의 생성자 함수를 불러와 자식의 값을 전달하여 자식이 클래스에서 부모 클래스 프로퍼티, 메서드를 사용하는 것이다.
차이가 있다면, call은 생성자 함수로 인스턴스를 생성할 때 사용하고 super는 call에서 사용한다.

profile
기록하는 개발자 Ayden 입니다.

0개의 댓글