'이것'은 무엇입니까? 기술적 부채!

Discussion was locked because I moved away from DEV to blog on my personal website. If you want to chat about the content of any article, hit me up in Twitter.

뿐만 아니라 웹 전체에 JavaScript의 this가 무엇인지에 대한 수많은 기사가 있습니다. this는 다른 프로그래밍 언어에 대한 경험이 있더라도 후배들에게 JavaScript에 대해 가장 혼란스러운 주제 중 하나이기 때문입니다.

"this가 무엇입니까?"라는 질문에 대한 많은 답변이 있지만 내 관점에서 대답은 "기술 부채"중 하나일 뿐입니다. 없이 작성해야 합니다.

이 문서에서는 피해야 할 몇 가지 이유this도 살펴보겠습니다.

묵시적은 좋지 않다

this는 함수의 인수, 변수 등으로 정의하지 않는 암시적 값입니다. 이미 정의되어 있습니다. 잠깐 "멋지네요"라고 생각할 수도 있지만 코드의 위치에 따라 this가 변경되므로 현재 값이 무엇인지 100% 확신할 수 없다는 점을 고려해야 합니다.

console.log(this); // Will log `globalThis`.

const object = {
    shouldLogObject() {
        console.log(this);
    },
};

object.shouldLogObject(); // Will log `object`

[1, 2, 3].map(object.shouldLogObject); // Will log `globalThis` 3 times (???)

const aFunction = function () {
    console.log(this);
};

aFunction(); // Will log `globalThis`

const arrowFunction = () => console.log(this); // Will log `globalThis`

aFunction.call("foo"); // Will log `"foo"`

이제 this를 사용하지 않는 경우 어떻게 보이는지 살펴보겠습니다.

console.log("hello"); // Will log `"hello"`.

const object = {
    shouldLogArgument(argument) {
        console.log(argument);
    },
};

object.shouldLogArgument("foo"); // Will log `"foo"`

[1, 2, 3].map(object.shouldLogArgument); // Will log `1`, `2` and `3`

const aFunction = function (argument) {
    console.log(argument);
};

aFunction("foo"); // Will log `"foo"`

// Will log the value of `argument`:
const arrowFunction = argument => console.log(argument);

aFunction("foo"); // Will log `"foo"`

거의 같은 양의 코드이지만, 우리가 그것에 대해 명시하고 있기 때문에 이제 모든 것이 무엇을 하는지 꽤 분명합니다.

"솔루션"은 최악입니다.

일부 게시물은 this , bind 및 call 함수와 함께 제공되는 몇 가지 방법을 사용하여 이러한 종류의 문제를 해결하는 것이 "쉽다"고 알려줍니다. 나에게 그것은 근본 문제를 수정하는 대신 패치 위에 패치를 적용하는 것과 같습니다. apply라는 콜백을 받는 함수가 있다고 가정해 보겠습니다.

// with plain functions:
onEvent(doSomething); // readable, no issues here

// but with class methods:
onEvent(instance.doSomething); // will break if it uses `this`

// to "solve" that:
onEvent(event => instance.doSomething(event)); // verbose

// or
onEvent(instance.doSomething.bind(instance)); // wth?!

// or when you write the class itself:
class Example {
    constructor() {
        this.doSomething = this.doSomething.bind(this); // 🤮
    }
}

클래스를 사용하지 않는다면...

코딩하기 위해 클래스가 필요하지 않은 이유에 대해 이미 알고 있으며 이 게시물은 주로 onEvent가 this로 작업할 때 매우 일반적이기 때문에 다소 관련이 있습니다. 당신은 당신이 정적 방법과 같은 것들로 작업하는 경우 class 를 사용하지 않는다고 말할 수 있지만 그에 대한 나의 대답은 다음과 같습니다. 그렇다면 왜 this 를 사용하고 있습니까? 이러한 정적 메서드를 모듈의 함수로 만들고 직접 사용할 수 있습니다.

그럼 어떤 클래스인지 배워도 소용없나요?

아니요, 클래스를 사용하는 브라우저와 서버에 많은 기본 API가 있다는 것은 말할 것도 없고 이것이 어떻게 작동하는지 반드시 알아야 하며 처리 방법this을 알고 있으면 작업할 때 유용합니다. 내 요점은 당신의 삶과 다른 개발자들의 삶을 더 좋게 만들기 위해 this를 사용하는 코드를 피해야 한다는 것입니다.

마무리 생각

나는 주로 this가 무엇인지 설명하는 일부 사람들이 실제로 좋지 않을 때 좋은 것처럼 "판매"하려고 하기 때문에 이 글을 썼습니다. 야생이지만 작성한 코드에서는 가능한 한 많이 사용하지 마십시오.

그게 다야. 그 게시물입니다.

동의하는 경우 this 가 엉망인 시나리오를 읽고 싶습니다. 동의하지 않는 경우 this 와 같은 암시적 값에 의존하는 것이 좋은 생각이라고 생각하는 이유에 대해 의견을 말하십시오.

시간을 내어 읽어주셔서 감사합니다!

건배!