Javascript의 'This'는 무엇입니까?

반응형

프로그래밍에서, 주어진 코드 블록이 무엇과 관련되는지를 의미하는 스코프라는 개념이 있다. 때때로 자바스크립트에서 우리는 this라는 단어가 이와 같은 함수에 연결되어 있는 것을 볼 수 있다.

this.someFunction()

아니면 이런 건설자에 있을 수도 있죠.

function Dog(name, age){
    this.name = name
    this.age = age
}

 

그렇다면 이 각각의 예에서 이것은 무엇일까요?

더 이상의 문맥이 없다면 정말 알 수 없기 때문에, 어떻게 이것이 무엇인지 판단할 수 있는지 살펴보도록 하겠습니다. 그러기 위해서는 범위가 무엇인지 어느 정도 이해를 해야 하는데, 여기에 범위에 들어가는 또 다른 게시물이 있습니다.

우리가 가지고 있는 가장 일반적인 범위는 글로벌이기 때문에 함수나 변수 밖에서 this 키워드를 사용한다면 글로벌 범위를 말하는 것입니다. 이것은 보통 브라우저의 창 개체를 가리키며, this가 완전히 다른 것을 가리키는 것이라고 생각할 경우 혼란스러운 동작을 일으킬 수 있습니다. 일반적으로 글로벌 범위에서 this를 참조하고 싶지 않으므로 실제 사용보다는 디버깅에 더 적합합니다.

이제 이것의 수업 범위로 넘어갈 수 있습니다. 저는 개인적으로 이것이 가장 이해하기 쉽다고 생각합니다, 대부분 예상한 대로 작동합니다. 클래스가 있고 그 클래스에 값과 함수가 있다면 클래스를 만들 때 이러한 값과 함수를 참조해야 할 때 `이 키워드를 사용하여 값이나 함수가 이 클래스에 속하므로 다른 클래스에서 검색하면 안 됩니다.

class Polygon { 
    constructor(height, width) {
           this.height = height;
           this.width = width;
    }
      get area() {
             return this.calcArea();
      }
      calcArea() {
             return this.height * this.width;
      } }

 

위에는 높이와 너비의 두 가지 인수를 제공하는 폴리곤 클래스가 있습니다. 전달된 인수가 클래스가 아닌 폴리곤 클래스의 이 인스턴스에 적용된다고 말하기 위해 this 키워드를 사용합니다. 그런 다음 폴리곤 클래스 내부에 있는 함수인 calcArea()를 get area() 함수라고 부른다. 여기서는 this 키워드를 사용하여 이 함수가 이 클래스의 일부라고 말합니다. 여기서도 this가 가장 말이 되고, 생성자의 this는 클래스의 인스턴스를 가리키며, 함수에서 this는 클래스 자체를 가리킨다.

마지막으로, 우리는 기능 범위를 가지고 있습니다. 여기서는 클래스에 없는 함수 안에서 this를 사용하고 있는데, this가 함수인가 보군요? 하지만 그건 말이 안 돼요. 만약 이게 함수를 언급한다면 우리가 쓴 모든 함수는 이것을 아주 많이 가지고 있을 거예요. 함수에서 이것은 함수가 생성된 위치를 기반으로 하며, 객체나 클래스의 방법으로 생성되었다면 이것은 해당 객체나 클래스를 가리키고, gobal scope에 입력되었다면 this는 window 객체를 가리킵니다.

const a = 'something'
const obj = {a: 'somethingElse'}
function funWithThis(){
    console.log(this.a)
}
funWithThis()//'this' is gloabal, console will print 'something'

위의 함수는 변수 a에 액세스하여 값을 콘솔에 인쇄하려고 시도하는 것입니다. 불필요한 키워드임에도 불구하고 우리는 여기서 this 키워드를 사용하고 있습니다. 변수 a는 전역적으로 정의되므로 함수는 this를 사용하든 상관없이 액세스할 수 있지만, 호출() 또는 적용()을 사용하여 함수 맥락을 변경할 수 있다. 다음은 호출() 및 적용()에 대한 내용이지만, 간단히 말해 함수를 호출하고 this 값을 전달하는 방법입니다. 객체를 해당 객체의 클래스에 속하지 않는 함수에 전달할 수 있으며 this는 해당 함수가 객체의 클래스에 속할 경우처럼 작동합니다.

const a = 'something'
const obj = {a: 'somethingElse'}
function funWithThis(){
    console.log(this.a)
}
funWithThis.call(obj) //now 'this' is equal to 'obj'
                      // the console will print 'somethingElse'
                      // the same workes for the 'apply()' method

 

위에서 우리는 obj를 call() 함수로 전달함으로써 함수의 맥락을 바꾸었고, 따라서 a는 전역 a를 지칭하는 것이 아니라, 우리의 obj 변수에서 a에 할당된 값을 의미한다. 즉, 이 함수의 컨텍스트를 전역 함수에서 call() 또는 apply() 함수로 전달하는 다른 개체로 변경할 수 있습니다.

기능과 this의 맥락인 화살표 기능을 가진 하나의 주의사항이 있습니다. ES6에는 화살표 기능이 도입되었으며, 얼핏 보기에는 약간의 구문당처럼 보일 수 있지만, 후드 아래에서는 더 많은 작업이 진행되고 있습니다.

화살표 함수는 이것에 대한 컨텍스트가 항상 함수를 호출한 위치에 있다는 점에서 전통적인 유형의 함수와 다릅니다. 그래서 제출 버튼 같은 HTML 요소에서 함수를 사용했는데 this보다 화살표 함수를 전달하면 그 HTML 요소, 이 경우 버튼이 됩니다. 여기서 우리가 정규적으로 입력된 함수를 전달했고 call() 또는 apply()를 사용하지 않았다면 this는 gobal 범위에 있을 것이기 때문에 window 객체를 가리킬 가능성이 가장 높다. 만약 화살표 함수가 물체의 방법이라면, 그것은 그 물체를 가리키지 않을 것이다…

이는 함수가 다른 범위에서 호출될 수 있기 때문입니다! 그리고 화살표 함수는 항상 생성된 것이 아니라 호출된 범위를 가리킵니다. 따라서 우리는 객체에 대한 메소드를 작성할 때 정규적으로 입력된 함수를 사용해야 한다는 것을 기억하면 됩니다.

바로 이겁니다! 이것은 다양한 것일 수 있지만, 맥락과 범위, 그리고 물론 일부 좋은 ol 예외를 이해할 수 있다면, 이것은 여러분이 원하는 것일 수 있습니다! 이것이 무엇인지에 대한 궁극적인 통제권을 갖게 될 것이다!