javascript - this1

Javascript 에서 This는 해당 메서드를 호출한 객체로 바인딩된다.

코드를 보면 Javascript 함수가 3가지있다. (FirstValue, SecondValue, ThirdValue)

이 3가지 함수안에 alertValue라는 함수를 다시 넣었다.

그런 다음 console.dir을 실행시켜서 FirstValue() 함수 내부의 정보 및 프로퍼티를 로그를 찍어 보았다.

위의 코드와 비교를 해보면 FirstValue() 안에 있는 context1이 없다. 이것은 당연한 이야기인데 변수로 선언되는 것이기 때문에 실행 전에는 존재할 수가 없는 것이다. 따라서 로그에 나오지 않는다. 다만 FirstValue.propertyTest 는 나오는데 이것은 함수 내부에 프로퍼티를 생성했기 때문이다. 그외에 alertValue()와 length, name, proto도 나오는 것을 볼수 있다.

이제 First 버튼을 눌러보면 alertValue()가 잘 작동한다. 이 함수내에는 세가지 alert가 존재한다.

alert(value);            ===> "Global Object"

alert(this.value);       ===> "First"

alert(this.context1);   ===> "undefined"

첫번째 alert(value)는 전역변수의 값을 가져온다.

두번째 alert(this.value)는 this에 바인딩 된 객체의 value를 가져온다.

this에 바인딩 된 객체가 무엇일까? 바로 buttons[0] 이다. 따라서 input태그의 value인 First가 출력되는 것이다.

세번째 alert(this.context1)은 객체 buttons[0]에서 context1을 찾고 당연하지만 없으니 undefined라고 뜨는 것이다.

만약 context1이라고만 쓴다면 어떻게 될까? 그때는 ReferenceError가 나면서 context1을 찾을수 없다고 나온다. 아마 FirstValue를 호출해서 실행하는 것이 아니라 그안의 alertValue만 실행시키기 때문에 그렇게 에러가 뜨는거 같다.

호출되지 않기 때문에 선언되지도 않는 것이다. 또한 FirstValue.propertyTest에서의 propertyTest도 마찬가지로 나오지 않는데 이것 또한 마찬가지의 이유에서 제대로 작동하지 않는다고 한다. 제대로 띄울려면 alert ( FirstValue.propertyTest ) 로 해야한다.

https://jsfiddle.net/s09ffkcd/1/ <= 이건 객체 내에서 작동하는 것