| jQuery | 설명 |
| $("*") | 모든 요소 선택 |
| $("#button") | 아이디가 button인 요소 선택 |
| $(".btn_red") | btn_red라는 클래스 선택자를 가진 모든 요소 선택 |
| $("p") | 태그명이 p인 모든 요소 선택 |
| $("div p") | div의 자식 노드 중 태그 이름이 p인 모든 요소 선택 |
| $("div>p") | div의 바로 아래 자식 중 태그 이름이 p인 모든 요소 선택 |
| $("div.btn_red") | 태그명이 div인 요소 중 btn_red라는 클랙스 선택자를 가진 모든 요소 선택 |
| $("div .btn_red") | 태그명이 div인 요소 의 자식 노드 중 btn_red 라는 클래스 선택자를 가진 모든 요소 선택 |
| [javascript] this 알기 - 2부 (0) | 2018.09.17 |
|---|---|
| [javascript] this 알기 - 1부 (0) | 2018.09.17 |
Thymeleaf 사용시, 하위와 같은 예외가 발생하는 경우가 있다.
org.springframework.expression.spel.SpelEvaluationException: EL1007E:(pos 0): Property or field 'name' cannot be found on null
예외 발생 코드
<span class="column" th:text="${academy.member.name}" > </span>
member 가 null 인 케이스에 발생한 문제로,
다음과 같이 null 이 아닐 경우에만 name을 참조하도록 해야한다.
1.
<span class="column" th:text="${academy.member.name}" th:if="${academy.member} ne null"> </span>
2.
<span class="column" th:text="${academy.member?.name}" > </span>
this 가 정해지는 규칙
- 코드 1 -
- 코드 1 실행 결과 -
- price 함수 실행시, this 와 window는 같음을 알 수 있다.
- 코드 2 -
- 코드 2 실행 결과 -
- pizzas.order() 호출 시, order는 pizzas의 프로퍼티이기 때문에 this 는 pizzas라는 객체가 된다.
따라서, order 안에서 this.pizzaA 를 찍어보면 예상대로 25000이 출력된다.
여기까지는 무난하다.
- 헷갈리는 부분은 pizzas.order 안에서 호출하는 getPrice 라는 내부함수의 콘텍스트이다.
내부 함수의 콘텍스트는 외부 함수의 콘텍스트에 의존하는 것이 아니라 실행 환경에 의해 결정된다.
따라서, getPrice 안의 this는 Window를 의미하며, this.pizzaA는 undefined 이다.
this.pizzaA + this.pizzaB 는 undefined 들의 합을 의미하므로 NaN 이 출력되는 것이다.
- 그렇다면, 기대했던 대로 pizza.order 내부의 getPrice() 호출시에 NaN이 아닌 55000 이 제대로 출력되게 하려면 어떻게 해야할까?
1차적으로 getPrice 함수 내의 this가 window가 아닌 pizzas객체를 의미해야한다.
call, apply 메소드를 이용하면 함수 실행시의 this를 지정할 수 있다.
- 코드 3 -
- 코드 3 실행 결과 -
- call 메서드는 첫번째 argument로 들어온 값으로 적용된 콘텍스트의 값을 수정해준다.
- order 콘텍스트의 this는 pizzas이기 때문에 getPrice의 this도 pizzas가 된다. 따라서 55000이 출력되게 된다. 
call과 apply의 차이는 argument를 넘기는 방법이다. 상황에 맞춰 필요한 메소드를 사용하면 되겠다.
call |
각각의 인자를 넘긴다. 콤마로 구분한다. 예) fn.call(o, arg1,arg2,...,argN); |
apply |
배열이나 객체 형태로 넘길 수 있다. 인자가 가변적일 때, 유용하다. 예) fn.apply(o, [args]); |
2부 끝.
| [jQuery] selector 정리 (0) | 2019.05.02 |
|---|---|
| [javascript] this 알기 - 1부 (0) | 2018.09.17 |
결과가 어떻게 나올까 예상해보자.
- 코드 1 실행 결과 -
- price값을 할당하는 시점에 this가 가리키는 것은 Window 이다. Window에는 cost라는 프로퍼티가 없으므로 this.cost를 콘솔에 찍어보면,undefined다.
따라서 undefined 값에 숫자10000을 더해줌으로써 NaN(Not a Number) 가 출력되는 것이다.
사용할 때는 몰랐는데, 막상 알면 알수록 deep해지는 this에 대해 순차적으로 정리해보도록하겠다.
| [jQuery] selector 정리 (0) | 2019.05.02 |
|---|---|
| [javascript] this 알기 - 2부 (0) | 2018.09.17 |
