객체
-
javascript this와 bindKnowledge/javascript 2019. 9. 15. 13:46
생성자 패턴을 활용하다 보면 javascript의 this가 내 맘 같지 않은 상황을 자주 마주 한다. 예를 들자면 이런 것이다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 function promotionObj(id) { this.registerEvents(id); } promotionObj.prototype = { // 등록 이벤트 registerEvents : function(id){ // 뒤로 가기 버튼 var backBtn = document.querySelector(".btn_back"); backBtn.addEventListener("click",function(){ this.ba..
-
javascript 객체 리터럴 패턴과 생성자 패턴, prototypeKnowledge/javascript 2019. 9. 9. 23:10
객체 리터럴 패턴을 활용하면 javscript 코드를 비슷한 기능끼리 묶을 수 있습니다. 예를 들어 promotion과 관련된 기능만을 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 var promotionObj = { // 프로모션 템플릿 붙일 타겟 imageTarget : document.querySelector(".visual_img"), // 프로모션 이미지 템플릿 imageTemplate : document.querySelector("#imageTemplate").innerText, // 이미지 세팅 setImage : function(productDetail){ var imageBindTemplate = Handlebars.compile(this.imageTemplate..
-
setTimeout에서 this사용하는 방법!Knowledge/javascript 2019. 8. 26. 13:35
자바스크립트 코드를 객체 리터럴 패턴으로 정리하던 중 이상한 현상이 발생했다. 객체안에 무한슬라이드의 다음 슬라이드 가져오는 함수를 집어넣었는데 setTimeout안에서는 객체내의 프로퍼티에 this로 접근할 수 없었던 것 말로하자니 두루 뭉술해서 간략화한 코드를 붙여보자면 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 var slideObj = { // 이미지 UL imageUl : document.querySelector("ul"), getNextSlide : function (){ setTimeout(function() { // 201초 후( 넘어가는 듯한 트랜지션 효과가 모두 끝난 후 )에 xPosition 적용 this.imageUl.style.transition = "0s";..