🕵️♀️ stopPropagation이란?
const submit = document.querySelector('.submit'); submit.addEventListener('click', (event) => { console.log('clicked'); // clicked 출력. event.stopPropagation(); // 다음 이벤트 실행 X });
지난 게시물에 포스팅한
event.preventDefault
는 이벤트 동작 자체를 막을 수 있지만 이벤트 전파를 막을 수는 없었다.
event.stopPropagation()
는 이벤트 전파를 막는 메소드이다.
이벤트 전파 또한 지난 게시물에 포스팅한 적이 있었는데, 다시 간단히 설명하자면 캡처링 단계, 버블링 단계에서 이벤트 리스너가 차례로 실행되는 것이다. 좀 더 자세한 내용은 아래 이벤트 전파 링크에 작성되어 있다.
이벤트 전파
✍ 결과적으로
stopPropagation
를 사용하면 다음 이벤트로 전파되지 않아 다음 이벤트가 실행되지 않는다.
🕵️♀️ 객체지향 프로그래밍이란?
데이터를 추상화시켜 상태와 행위를 가진 객체로 만들고 그 객체들 간의 유기적인 상호작용을 통해 로직을 구성하는 프로그래밍 패러다임 중 하나이다.
✍ 객체지향 프로그래밍 장단점
장점 :
- 코드 유지보수가 비교적 쉬움.
- 코드 재사용 용이.
단점 :
- 설계가 비교적 복잡.
🕵️♀️생성자란?
객체를 만들 때 new 연산자와 함께 사용하는 함수이다. 함수의 기능적인 부분만 보았을 때는 일반적인 함수와 차이는 없다.function SayMyName(name) { this.name = name; console.log(`제 이름은 ${name} 입니다.`); } const me = new SayMyName("ayden");
SayMyName()
는 생성자 함수로 필수는 아니지만 일반 함수와 구분하기 위해 이름 맨 앞을 대문자로 쓴다.- new 키워드를 사용하여 인스턴스를 생성한다.
- 생성자 함수에서
this
는 인스턴스를 뜻한다.
✍
new
키워드의 역할
생성자 함수에 return 이 없어도 인스턴스를 반환한다.
❓ 생성자를 왜 사용할까?
생성자의 장점은 생성자를 통해 생성된 객체는 같은 프로퍼티와 메서드를 공유할 수 있다는 것이다. 결국 코드 재사용, 생산성 향상, 유지보수 용이하게 하기 위해 사용한다.
🕵️♀️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
을 추가할 수 있다.
🕵️♀️ 객체 상속이란?
부모 생성자의 기능을 물려받으면서 새로운 기능도 추가할 수 있는 것을 의미하며, 확장(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
은 추가한rename
과sayName
함수를 포함한 객체에 대한 property가prototype
에 정의되어 있다.
Child.prototype
은Parent.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에서 사용한다.