Javascript의 "this"키워드

this 키워드는 많은 곤혹을 가져왔다.this 키워드의 사용은 컨텍스트, 즉 사용 위치에 따라 달라집니다.그것은 귀속을 통해 대상, 방법, 함수와 연결된다.

Binding allows us to set which object will be bound by this keyword

두 가지 유형의 바인딩이 있습니다.

은식: 은식이지만 직접적으로(수동으로) 설명하지 않습니다.

현식: 수동 성명.

이제 여러 가지 예를 들어 이 키워드를 은밀하게 연결하기 시작합니다.

대상의 방법 중

여기this 키워드는 성명 방법의 대상을 나타낸다.이 점을 하나의 예로 이해합시다.

const student = {
    name: "Nikhil",
    birthYear: 1999,
    gender: "Male",
    education: "Graduate",
    calcAge(){
    return 2021 - this.birthYear
    }
}

console.log(student.calcAge()); //22

위의 예에서 this는 student 대상을 나타낸다.우리가 이 점을 알게 된 것은 원점의 왼쪽(.)연산자는 함수calcAge()와 인접하고 우리는 student의 대상을 보았다.
함수 표현식/성명의

여기this 키워드는 창의 전체 대상을 나타냅니다.아래의 예를 통해 이 점을 이해합시다.

표현식(677/457)
여기this 키워드는 엄격한 모드undefined를 나타낸다.다음 코드 세션을 통해 이 점을 이해합시다.

이벤트 처리기/탐지기

여기this 키워드는 이벤트 처리/감청 요소를 가리킨다.코드 세션을 통해 이해합시다.

글로벌 컨텍스트에서 사용할 경우 개별 및 독립this 키워드는 객체window를 가리킵니다

.

화살표 기능

여기this 키워드는 화살표 함수owner를 나타낸다.우리는 예를 들어 이 점을 이해합시다.


따라서 우리는 사건 탐지기에서 화살표 함수를 사용하는 것을 피해야 한다.

새 키워드

로 객체를 만들 때new 키워드는 constructor 함수에서 대상을 만드는 데 사용됩니다.

let Player = function(name, position){
    this.name = name,
    this.position = position

    this.aboutPlayer= function(){
        console.log(`${this.name} plays at ${this.position}`);
    }
}

let Cristiano = new Player('Cristiano Ronaldo', 'Forward')
let Beckham = new Player('David Beckham', 'Midfield')

여기에 함수 플레이어는 new 키워드로 호출됩니다.이 예에서 new 키워드는 키워드를 만드는 대상을 나타낸다.그래서 첫 번째 상황에서this 대표Cristiano, 두 번째 상황에서Beckham를 대표한다.

이 키워드의 현식 귀속으로 넘어갑니다.콜(), apply(), bind()는 현식 귀속을 실현하는 데 도움을 줄 수 있는 세 가지 특수한 방법이 있다.

우리 함께 모든 예를 봅시다.

call()방법

call() 방법은 서로 다른 대상에게 하나의 대상에 속하는 함수/방법을 분배하고 호출할 수 있다.
예를 들어 어떻게 작동하는지 살펴보겠습니다.

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

const student = {
    name: "Nikhil",
    birthYear: 1999,
    gender: "Male",
    education: "Graduate",
    calcAge(){
    return 2021 - this.birthYear
    }

}

levelOfEducation.call(student) // Graduate

여기call() 방법은 levelOfEducation()에 호출되었고 후자는 this.education에 기록되었다.그러나 현재 이 함수는 this 키워드를 찾기 때문에 call() 방법에서 전달된 매개 변수에 의해 확정됩니다.이런 방식을 통해this 특정 대상과 현식으로 귀속된다.
현재 우리가 호출할 함수에 매개 변수가 필요하다고 가정하면 call() 방법에서 매개 변수를 전달할 수 있다.

const aboutEducation = function(university,place){
    console.log(`${this.name} is ${this.education} from ${university}, ${place}.`);
}

aboutEducation.call(student,'XYZ','Mumbai') // Nikhil is Graduate from XYZ, Mumbai.

지금 여기에 통증이 하나 있다. 만약 우리가 더 많은 매개 변수를 가지고 있다면, 우리는 그 중의 하나하나를 전달해야 한다.매개 변수를 단독으로 전달하는 것은 바쁜 방식이므로 이를 최적화하기 위해 apply() 방법을 사용했다.

apply()방법

apply() 방법은 일련의 매개 변수를 전달하는 것을 허용함으로써 단독으로 매개 변수를 전달하는 어려움을 해결한다.우리는 예를 통해 이 점을 이해합시다.

const educationInfo = ['XYZ','Mumbai',2021]

const aboutEducation = function(){
    console.log(`${this.name} is ${this.education} from ${educationInfo[0]}, ${educationInfo[1]} in year ${educationInfo[2]}`);
}

aboutEducation.apply(student,educationInfo)// Nikhil is Graduate from XYZ, Mumbai in year 2021

그래서 여기서 우리는 one개의 값 매개 변수만 전달하거나 매개 변수가 전달되지 않을 때 call()를 사용하고 multiple개의 값 매개 변수가 전달될 때 apply()를 사용한다는 것을 이해한다.

bind() 방법

bind() 방법은 call() 방법과 비슷하지만 차이가 있다.call() 방법은 함수를 직접 호출하지만 bind() 방법returns a new function은 그것을 호출할 수 있다.
이 점을 하나의 예로 이해합시다.

const aboutEducation = function(university,place){
    console.log(`${this.name} is ${this.education} from ${university}, ${place}.`);
}

const newFunction = aboutEducation.bind(student,'XYZ','Mumbai') 

newFunction() // Nikhil is Graduate from XYZ, Mumbai.

The bind() method also allows an object to borrow a method from another object without making a copy of that method. This is overall a vast topic for some other day.

결론:
암시적 바인딩

대상의 방법this에서 대상 자체를 인용한다.

함수 표현식/성명에서 창의 대상을 인용합니다.다른 한편, strict 모드에서는 정의되지 않았다.

화살표 함수에서 this 함수의 소유자를 인용한다.

이벤트 처리 프로그램에서 this 이벤트 처리 요소를 인용한다.

구조 함수를 사용하여 new 키워드로 만든 대상 중 this 인용 대상 자체.

단독과 독립에서 this 창의 대상을 인용합니다.

세 가지 방법 현식 귀속this 키워드

call(): 함수에 전달할 값이 없거나 인자가 없을 때 사용합니다.call(object, argument-1,...,argument-n)

apply(): 여러 개의 값 매개 변수를 함수에 전달할 때 사용합니다.그것은 우리가 수조를 매개 변수로 전달할 수 있도록 허용한다.apply(object, array)

bind(): call()와 유사하며, 유일한 차이점은 새로운 함수를 되돌려 나중에 호출할 수 있다는 것이다.

엉엉!🥳 나는 인내심을 가지고 이 장편 문장을 읽은 후에 네가 반드시 JS의 this 키워드를 완전히 이해하길 바란다.
만약 네가 유용하다고 생각한다면 반드시 너의 친구와 나눠야 한다.
꼭 따라와.나는 이런 문장을 더 많이 발표할 것이다.끝까지 읽어줘서 고마워.