본문 바로가기

Programming/JavaScript5

자바스크립트의 private 멤버 자바스크립트의 Private 멤버들은 생성자를 통해서 만들어진다. 생성자 안에서 var를 통해 생성된 변수들과 생성자의 파라미터들이 private 멤버가 된다. 위 코드에서의 생성자는 param, secret, that 이렇게 세개의 private 변수가 오브젝트에 추가되고, 외부에서는 접근할 수 없다. 또한 오브젝트가 소유한 public method 일지라도 접근할 수가 없고, private method를 통해서만 접근할 수 있다. private method는 생성자의 내부 function을 의미한다. 위 코드에서 private method인 dec는 secret 인스턴스 변수를 사용한다. 관례적으로 private 변수인 that을 만들기도 한다. 이는 ECMAScript Language 스펙의 내부 .. 2016. 4. 24.
자바스크립트의 함수 선언과 표현식 자바스크립트에서 함수의 선언과 표현식을 구별하는 것이 중요하다. 제대로 이해하고 사용하지 않으면 잘못 사용할 소지가 있기 때문이다. 위와 같이 첫번째 방식인 함수 선언은 execution context에 미리 설정되어 있기 떄문에 어디에서나 호출이 가능한데 두번 쨰 방식인 표현식의 경우에는 인터프리터가 해당 라인에 도달했을 때 실행되기 때문에 도달하기 전에 함수를 호출하게 되면 오류가 발생한다. 주의해야 할 점은 함수 선언을 하게되면 글로벌 스코프에 설정이 되기 때문에 잠깐 사용할 함수도 페이지가 종료될 때까지 남아있게 되는 문제가 발생한다. 이를 위해 IIFE(Immediately Invoked Function Expressions)를 사용하여 스코프를 지정해주는 것이 좋다. 2016. 4. 6.
자바스크립트에서 함수를 new 연산자를 이용하여 인스턴스 생성 new 키워드를 사용하여 함수를 호출 시 동작 과정.빈 객체 인스턴스가 생성생성자 함수에 빈 객체 인스턴스가 this로 전달생성자 함수는 this 객체에 skulk 라는 프로퍼티를 생성하고 함수를 할당한다결국 새로 생성된 객체는 skulk 프로퍼티를 갖게 된다. 일반적으로 자바와 같은 객체지향 언어를 사용했던 관점에서 보면 new Ninja를 수행하면 Ninja라는 인스턴스가 생성될 것 같은데 빈 객체가 생성된다는 것이 헷갈리는 부분이었다. 빈 객체 안에 생성자를 통해 반환 될 this가 전달되고 이 this에 함수 안에서 일어나는 대입 연산에 대한 부분이 프로퍼티로 생성된다는 점이 특이하고도 혼란스럽게 느껴졌다. 그렇게해서 반환된 이 this가 ninja라는 변수에 대입되어 자바에서의 객체 처럼 사용할.. 2016. 4. 6.
자바스크립트 이벤트 중첩 문제(버블링) 작업을 하던 중 테이블 row에 클릭 이벤트가 걸려 있고, 해당 row 안에 삭제 기능을 하는 버튼이 존재하여 삭제 버튼을 클릭시 버튼 이벤트와 row에 걸려있는 클릭 이벤트가 중첩되어 발생하는 문제가 생겼다. 이는 이벤트의 버블링 때문에 발생하는 문제였는데 이벤트가 중첩된 구조에서 child 엘리먼트의 이벤트 콜백 함수에서 event 객체의 stopPropagation() 함수를 사용해서 버블링을 막아주면 이를 해결할 수 있다. 하지만 button의 onclick attribute에 함수를 호출하도록 설정하여 이벤트를 동작시킬 때 파라미터로 event를 넘길 수 없었다. (넘길 수 있는 방법이 있는데 못찾은 걸지도) 자바스크립트에서 bind나 event 리스너를 사용하면 간단히 해결되었지만 button.. 2016. 4. 5.