도대체 이게 뭐야?JavaScript의 this 키워드 보기

이게 어떻게 된 일입니까?이것은 근본적으로 아무런 의미가 없다.모든 사람은 생활 속의 어느 때 자신에게 이런 문제를 묻기 때문에 우리는 이 논쟁을 해결하고 이 수수께끼를 철저히 풀자.만약 당신이 아직 이해하지 못한다면, 이 이야기는 자바스크립트의 무서운 this 키워드에 관한 것이다.
우선 this이 무엇인지 정의합시다.

The “this” keyword in JavaScript refers to the object it belongs to.

콘솔을 열고 "this"를 쓰십시오.이런 상황에서'this'자체는 전체 국면의 대상을 가리킨다.브라우저의 글로벌 객체는 창 자체입니다.

첫 번째 예

지금, 만약 우리가 자신의 목표가 있다면?다음과 같은 상황에서 출력은 무엇이라고 생각합니까?

const user = {
    name: 'Heisenberg',
    occupation: 'entrepreneur',
    sayMyName() {
        console.log(this.name);
    }
};

const sayMyName = user.sayMyName;

sayMyName();

만약 네가 하이센버그를 맞혔다면, 너는 틀렸다.실제로는 빈 문자열을 얻을 수 있습니다.그런데 왜요?만약 네가 즉시 전화user.sayMyName()하면 무슨 일이 일어날지그것은 하이센버그에서 취소될 것이다.잠깐만... 뭐???😨 내가 너희들을 헷갈리게 하기 전에 우리 먼저 후자부터 시작하자.
우리는 키워드가 그것에 속하는 대상을 가리킨다고 말했다.user.sayMyName() 를 호출하면 user 대상을 가리키기 때문에 this.name 를 호출하면 하이젠버그로 돌아갈 것입니다.
그렇다면 user.sayMyName 새로운 변수를 부여하면 우리가 위의 예에서 한 것처럼 무슨 일이 일어날까요?간단하게 말하면 user.sayMyName 은 하나의 일반 함수가 되어 user 대상과 전혀 무관하다.
위의 예시를 함수 자체를 취소하기 위해 호출 sayMyName() write console.log(user.sayMyName) 대신 DevTools에 복사해 보십시오.user 객체에 정의된 정확한 함수를 얻을 수 있습니다.그러나 이번에는 함수의 부모 대상이 창이 됩니다.
별의 배열을 통해 창에 name 속성이 있는 것은 사실이지만, 기본적으로 그 값은 ""- 빈 문자열입니다.만약 우리가 this.name 를 this.userName 로 바꾸면, 당신은 undefined 을 얻을 수 있습니다. 기본적으로 window.userName 이 없기 때문입니다.

우리는 어떻게 이 문제를 해결합니까?

그래서 우리는 우리가 예상한 출력을 얻지 못했다는 것을 안다. 왜냐하면 우리는 잘못된 대상을 인용했기 때문이다.좋아, 그건 멋있어. 그런데 우리 어떻게 해결할까?네, 상하문만 귀속시키면 bind 방법으로 귀속할 수 있습니다.9 행을 다음과 같이 변경합니다.

const sayMyName = user.sayMyName.bind(user);

Bind는 this 키워드를 제공하는 값의 상하문으로 설정하는 매개 변수가 필요합니다.이러한 상황에서 우리는'user'를 전달하기 위해 상하문을 user 대상에 귀속시키기를 희망합니다.
리셋에서 이 함수를 사용하려면 어떻게 해야 합니까이전과 같이 컨텍스트를 바인딩하고 추출한 함수를 콜백으로 전달하기만 하면 됩니다.

document.getElementById('say-my-name').addEventListener('click', sayMyName);

두 번째 예

우리 두 가지 예를 다시 봅시다.지금까지 사람들은 그것이 예상치로 돌아올지 의심하기 시작했다.어떤 상황에서도 면접에 앉아서 갑자기 원하는 질문을 받았을 때 면접관은 사악한 미소를 지으며 화이트보드에 코딩 연습을 썼다-

“What do you think the output will be for the following?”

const shape = {
    radius: 10,
    diameter() {
        return this.radius * 2;
    },
    perimeter: () => 2 * Math.PI * this.radius
};

shape.diameter();
shape.perimeter();

물론, 그들은 네가 머릿속에서 이 모든 것을 계산하기를 기대할 수 없다. 그렇지?틀림없이 함정이 있을 거야.있다!우리 그것을 분해합시다.
우선, 당신이 호출shape.diameter하면 모든 것이 좋은 것 같습니다. 우리는 대상의 반경*2로 돌아갑니다.여기는 화려한 것이 없으니, 너는 스무 살에 돌아올 것이다.다음으로 전화shape.perimeter를 하고 돌아오세요NaN🤦‍♂️.
이 두 가지 방법을 비교하면 반드시 그들의 쓰기 방식과 관계가 있다.네가 옳다.두 번째는 화살표 함수입니다.화살표 함수는 자신의 상하문을 귀속시키지 않고 대상의 폐쇄 범위, 즉 창을 정의합니다.window.radius 평가undefined.따라서 상술한 함수의 계산 결과는 2 * 3.14 * undefined, 반대로 우리는 NaN를 얻었다.
arrow 함수의 한 줄 프로그램에 대해서는 return 키워드를 생략할 수 있습니다.위의 예는 다음과 같습니다.

perimeter: () => {
    return 2 * Math.PI * this.radius;
};

세 번째 예

마지막 예를 봅시다. 이번에 첫 번째 예로 돌아가면 약간의 곡절이 있습니다. 왜냐하면 왜 그렇지 않기 때문입니다.
만약에 버그를 조사하고 있고 근본적인 원인이 코드와 관련이 있다고 의심한다면 방법이 있는 대상이 있습니다.어떤 원인 때문에 상술한 방법 중에는 폐쇄된 내부 함수가 하나 더 있다.

const user = {
    name: 'Heisenberg',
    occupation: 'entrepreneur',
    sayMyName() {
        const closure = function() {
            console.log(this.name);
        };

        return closure();
    }
};

const sayMyName = user.sayMyName;

sayMyName();

너는 이것이 당연한 모습이 아니라는 것을 곧 깨닫게 될 것이다.너는 그것을 일하게 하고 싶다. 너는 this 너의 대상을 가리키고 싶지만, 마찬가지로 아무 일도 없다. 너는 빈 문자열을 얻는다.보아하니 그것은 또 창문을 가리키는 것 같다.
설마 우리가 delete window 우리의 모든 문제를 해결할 수 없단 말인가?
지난번처럼 너에게 좋은 생각이 하나 있다!💡 user 대상을 지정한 함수에 연결합니다!

const sayMyName = user.sayMyName.bind(user);

하지만 너는 여전히 얻는다"".불행히도 이것은 등식의 절반에 불과하다.원인을 이해하기 위해서 우리는 그것을 분리해야 한다.만약 우리가 다시 로그아웃sayMyName하면 함수체를 얻을 수 있으며, 그것은 9줄에서 내부 함수로 되돌아온다.만약 당신이 console.log(closure) 을 8줄에 삽입한다면, 당신은 우리가 가방을 닫는 주체를 얻게 될 것이다. 그 안에 console.log 가 있다.
우리는 우리가 얻은 것이 빈 문자열이라는 것을 알고 있다. 왜냐하면 this 창의 대상을 가리키기 때문에, 우리는 반드시 정확한 상하문을 closure 에 귀속해야 한다. 그렇지?이것은 정확합니다. 따라서 계속해서 closure.bind(this) 로 돌아가지만, 이번에는 함수체로 돌아갑니다.🤔.
이것은 bind 귀속만 진행되지만 실제로 우리가 필요로 하는 함수를 호출하지 않았기 때문이다.그래서 그중의 하나만 하면 된다고 하셨어요.

return closure.bind(this)();

또는

user.sayMyName()();

이미 짐작한 바와 같이, 이것은 융통성 있는 방법이며, 보기에는 매우 거칠어 보이지만, 결코 진정으로 적합한 해결 방안이 아니다.우리는 주어진 상하문을 가진 특정 함수를 호출할 수 있는 또 다른 방법이 있다.이것은 call 방법이다.
반환 값을 return closure.call(this) 로 변경하면 매개 변수로 전달되는 주어진 컨텍스트 호출 함수를 JavaScript에 사용할 수 있습니다.마지막 솔루션은 다음과 같습니다.

const user = {
    name: 'Heisenberg',
    occupation: 'entrepreneur',
    sayMyName() {
        const closure = function() {
        console.log(this.name);
        };

    return closure.call(this)
    }
};

const sayMyName = user.sayMyName.bind(user);

sayMyName();

먼저 user 대상을 13줄의 함수 부여값에 귀속시키고 sayMyName 내부에서 패키지 함수에 대한 호출을 사용하여 적당한 상하문으로 호출해야 한다.
보시다시피 this 어떤 규칙에 따라 일을 하면 이 규칙들을 이해하기 시작하면 다른 모든 것이 더욱 의미가 있을 것입니다. 그러기를 바랍니다.

명심해야 할 일

기본적으로 this 는 글로벌 객체를 가리키며 브라우저에 있는 경우 window 입니다.

다른 객체에서 사용할 때 this 는 해당 객체가 속한 객체입니다.

this 화살표 함수에서 사용할 때 부모 대상을 가리킨다.

함수 호출을 bind 또는 call 과 함께 사용하면 this 이러한 방법의 첫 번째 매개 변수로 전달되는 상하문을 인용합니다.bind 컨텍스트만 귀속되고 call 함수도 호출됩니다.