JavaScript
-
모던 자바스크립트 Deep Dive - 이벤트 전파와 이벤트 위임 , preventDefault , stopPropagationJavaScript 2021. 9. 26. 01:12
[ 이벤트 전파 ] DOM 트리 상에 존재하는 DOM 요소 노드에서 발생한 이벤트는 DOM 트리를 통해 전파된다. 이벤트 캡처링 : 이벤트가 상위요소 -> 하위 요소 전파 ( 화면 캡처는 자기 자신 화면에서 크기가 줄어들 수 있으나 커질 수는 없다. ) 이벤트 버블링 : 이벤트가 하위요소 -> 상위 요소 전파 ( 거품은 커진다. ) // html ... apple banana orange 위와 같은 html이 있다. 위 코드의 banana를 클릭했을 때의 실행 결과를 유추 해보자. 2 banana banana 3 banana ... banana를 먼저 event등록을 해주었으니 먼저 실행되겠지? 하면 아니다. 결과는 1 banana ... 2 banana banana 이다. $fruit의 addEvent..
-
모던 자바스크립트 Deep Dive - 이벤트 핸들러 등록과 제거JavaScript 2021. 9. 26. 00:20
브라우저는 처리해야 할 특정 사건이 발생하면 감지하여 이벤트를 발생 시킨다. 이벤트 핸들러 : 이벤트가 발생했을 때 호출될 함수 이벤트 핸들러 등록 : 브라우저에 이벤트 핸들러의 호출을 위임하는 것 함수를 언제 호출할지 알 수 없으므로 개발자가 명시적으로 호출하는 것이 아니라 브라우저에게 호출을 위임한다. 이벤트 핸들러 프로퍼티에 함수를 할당하면 해당 이벤트가 발생했을 때 할당한 함수가 브라우저에 의해 호출된다. https://developer.mozilla.org/ko/docs/Web/Events 이벤트 참조 | MDN DOM 이벤트는 발생한 흥미로운 것을 코드에 알리기 위해 전달됩니다. 각 이벤트는 Event 인터페이스를 기반으로한 객체에 의해 표현되며 발생한 것에 대한 부가적인 정보를 얻는데 사용되..
-
모던 자바스크립트 Deep Dive - 프로퍼티 섀도잉 , 교체 , 정적 프로퍼티JavaScript 2021. 9. 23. 22:47
오버라이딩과 프로퍼티 섀도잉 const Person = (function(){ function Person(name){ this.name = name; } Person.prototype.sayHello = function(){ console.log(`Hi! My name is ${this.name}`); }; return Person; }()); const me = new Person('Kim'); me.sayHello = function(){ console.log(`Hello ! My name is ${this.name}`); } me.sayHello(); // Hello ! My name is Kim 위 예시 코드처럼 같은 이름의 프로퍼티를 인스턴스에 추가하게되면 프로토타입 프로퍼티를 덮어쓰는 것이 ..
-
모던 자바스크립트 Deep Dive - 프로토타입 체인JavaScript 2021. 9. 23. 21:43
function Person(name){ this.name = name; } Person.prototype.sayHello = function(){ console.log(`Hi! My name is ${this.name}`); } const me = new Person('Kim'); console.log(me.hasOwnProperty('name')); // true 위 코드에서 Person으로 생성한 객체 me가 hasOwnProperty라는 메서드를 사용하였다. 이것은 me 객체가 Person.prototype 뿐만 아니라 Object.prototype을 상속받았다는 것을 의미한다. 그렇다면 me.prototype은 무엇일까? Object.getPrototype(me) === Person.protot..
-
모던 자바스크립트 Deep Dive - 프로토타입 생성JavaScript 2021. 9. 23. 21:32
프로토 타입의 생성 시점 프로토타입은 생성자 함수가 생성되는 시점에 더불어 생성된다. => 프로토타입과 생성자 함수는 단독으로 존재할 수 없고 언제나 쌍으로 존재하기 때문이다. [ 사용자 정의 생성자 함수와 프로토타입 생성 시점 ] 내부 메서드 [[Construct]]를 갖는 함수 객체 즉, 일반 함수로 정의한 함수 객체는 new 연산자와 함께 생성자 함수로서 호출할 수 있다. 생성자 함수로서 호출할 수 있는 함수가 함수 객체를 생성하는 시점에 프로토타입도 더불어 생성된다. console.log(Person.prototype); // {constructor : f} function Person(name){ this.name = name; } 함수 선언문은 런타임 이전에 자바스크립트 엔진에 의해 먼저 실행..
-
모던 자바스크립트 Deep dive - 프로토타입 ( 리터럴 표기법 )JavaScript 2021. 9. 23. 20:58
리터럴 표기법에 의해 생성된 객체의 생성자 함수와 프로토타입 생성자 함수에 의해 생성된 인스턴스는 프로토타입의 constructor 프로퍼티에 의해 생성자 함수와 연결된다. const obj = new Object(); console.log(obj.constructor === Object); // true 리터럴 표기법에 의해 생성된 객체도 물론 프로토타입이 존재한다. 하지만, 리터럴 표기법에 의해 생성된 객체의 경우 프로토 타입의 constructor 프로퍼티가 가리키는 생성자 함수가 반드시 객체를 생성한 생성자 함수라고 단정할 수는 없다. const obj = {}; console.log(obj.constructor === Object); // true obj 객체는 객체 리터럴 표기법에 의해 생성되..
-
-