FEDev Story

https://ko.javascript.info/event-delegation 이벤트 위임 ko.javascript.info https://joshua1988.github.io/web-development/javascript/event-propagation-delegation/ 이벤트 버블링, 이벤트 캡처 그리고 이벤트 위임까지 (기본) 이벤트 버블링, 이벤트 캡처링, 그리고 이벤트 위임까지 이벤트 전달 방식과 관련된 모든 것을 파헤쳐 봅니다. joshua1988.github.io https://pathas.tistory.com/213 JavaScript | Event Handling 이벤트 처리 Evnent Handler 이벤트 처리기 등록 방법 이벤트 주도형 프로그램(event driven progr..

프로토타입 오염모든 객체는 그 prototype 객체의 프로퍼티들을 상속하고 for...in 반복문은 객체의 상속된 프로퍼티 또한 자신이 '소유한' 프로퍼티로 열거한다. 다음 코드와 같이 요소를 객체 자신의 프로퍼티로 저장하는 사용자 정의 생성자와 Array 타입을 사용하여 객체를 생성하게 되면 프로토타입을 오염시킬 수 있다. function NaiveDict() { } NaiveDict.prototype.count = function() { var i = 0; for (var name in this) { // counts every property i++; } return i; }; NaiveDict.prototype.toString = function() { return "[object NaiveDi..

참고문서 : Beautiful Javascript 다음 조건문은 프로퍼티가 존재하는지 확인한다. 만약 존재하지 않으면 메서드를 호출한다. if ( !this.username ) { this.setUsername(); } username이 없으면 username 을 설정한다. 그러나 논리 연산자 OR을 사용하면 더욱 간결한 방법으로 같은 것을 표현할 수 있다. this.username || this.setUsername() username이 존재하지 않으면 username을 설정한다는 표현식이다. 다음은 username에 대한 배열을 살펴보자. username이 없으면 배열에 username을 추가하고자 한다. if ( users.indexOf(this.username) == -1){ users.push(..

출처 : A fresh look at JavaScript Mixins 믹스인이란 프로토타입을 바꾸지 않고 한 객체의 프로퍼티를 다른 객체에게 ‘복사’해서 사용하는 방식이다. 이 믹스인 패턴은 어디에 쓰일 수 있을까? 이 패턴은 기존에 있던 객체의 기능을 그대로 가져가면서 다른 객체에 추가할 때 주로 사용된다. 예를 들어 이벤트를 지원할 때는 상속보다는 믹스인이 더 어울린다. 아래는 믹스인과 관련된 유용한 정보를 담고 있다. https://vnthf.github.io/blog/mixin/ 아래는 원형, 타원, 네모 버튼을 생성하는 사례를 구현하고자 기능과 동작을 정의하는 전통적인 믹스인 오브젝트를 프로토타입 방식으로 정의하였다. var Circle = function() {}; Circle.prototyp..

자기 실행 익명 함수 (function(){ var private_var = "private"; })(); //변수 private_var이 선언되지 않았다는 에러가 출력된다. console.log(private_var); 위의 함수는 함수명을 지정하거나 함수를 변수에 저장하지도 않고 함수를 바로 실행하기 때문에 자기 실행 익명 함수라고 한다. 자기 실행 익명 함수는 변수 스코프를 제어하는 데 사용하며, 변수가 코드 외부로 노출되지 않게 해준다. 이런 이유로 자바스크립트 플러그인 개발할 때 유용하게 활용할 수 있다. 변수 덮어쓰기를 차단해야 하는 사례로 흔히 제이쿼리와 프로토타입 자바스크립트 라이브러리를 모두 사용하는 경우 두 라이브러리 모두 단일 문자 변수 $를 폭넓게 활용하고 있다. 다음 코드처럼 $ ..

자바스크립트 객체는 프로토타입기반이다. 하지만 new 연산자를 사용하여 클래스 기반으로 객체를 만들 수 있다. 클래스 방식의 객체 만들기 //1단계 : 프로토타입 객체 정의 var proto = { sentence : 4, probation: 2 }; //2단계 : 객체 생성자 정의 var Prisoner = function(name, id){ this.name = name; this.id = id; }; //3단계 : 생성자와 프로토타입 객체 연결 Prisoner.prototype = proto; //4단계 : 객체생성 var firstPrisoner = new Prisoner('Joe', '12A'); var secondPrisoner = new Prisoner('Sam', '2BC'); new연산자..