이것은 자바스크립트에서 무엇입니까?

이 문서는 다음과 같이 처음 발표되었습니다.
https://www.blog.duomly.com/what-is-this-keyword-in-javascript/
자바스크립트의 이 키워드는 초보자와 더 높은 개발자를 곤혹스럽게 하는 중요한 개념이다.그것은 매우 강하지만, 어떻게 일을 하는지 모르면 사용하기 쉽지 않다.
본고에서 나는 이 키워드가 무엇인지, 그리고 서로 다른 상황에서의 가치를 설명하고 코드 예시를 통해 이를 더욱 뚜렷하게 할 것이다.

이거 뭐야?

이 키워드가 무엇인지 더 잘 이해하기 위해서 자바스크립트 코드가 어떻게 작동하는지 먼저 설명해 봅시다.브라우저에서 자바스크립트를 실행할 때마다 엔진은 일련의 절차를 실행합니다. 그 중 하나는 실행 상하문을 만드는 것입니다.실행 컨텍스트는 Javascript 코드가 실행되는 환경으로 이해됩니다.모든 실행 상하문은 이 대상을 인용합니다. 이 대상은 보통 이 키워드 값을 인용합니다.다시 말하면, 우리는 이 키워드가 호출 함수의 대상에 대한 인용이라고 말할 수 있다.이 키워드의 값은 사용 위치에 달려 있다.

이것은 단독으로 사용하는 것이다

이것은 대상이나 함수의 상하문이 아닌 단독으로 사용될 경우 전역 범위를 인용합니다.브라우저의 경우 글로벌 객체 이름은 창입니다.간단한 코드 예를 살펴보겠습니다.

<script>
var fruit = "apple";
function getFruit() {
   var fruit = "banana";
   console.log("fruit", fruit); // „banana”
   console.log("this.fruit", this.fruit); // „apple”
}
returnFruit();
</script>

우리는 위의 예를 통해 이 단독으로 사용하는 키워드를 더욱 이해할 수 있다.getFruit () 함수는 전역적으로 호출되며, 첫 번째fruit 변수도 전역적으로 호출됩니다.니가 원한다면기록 (이), 창 대상은 getFruit () 방법과 fruit 속성을 가지고 있습니다.
이 점에서 우리는 그것을 일컫는다.과일은'사과'로 돌아가지만 국부적인 변수 과일은'바나나'로 돌아간다.
이것은 창의 대상입니다.과일은 전 세계 과일의 속성을 가리킨다.
특히 엄격한 모드를 사용한 경우 전역적으로 정의되지 않았다.

이것은 한 가지 방법과 함께 사용하는 것이다

구조 함수에서 새로운 대상을 만드는 경우,this 키워드는 이 대상의 새로운 실례를 가리킨다.
다음 예를 살펴보겠습니다.

var firstName = "Peter";
var lastName = "Strong";
function Person(firstName, lastName) {
  this.firstName = firstName;
  this.lastName = lastName;
  this.returnName = function() {
    return this.firstName + ' ' + this.lastName;
  };
}
let newPerson = new Person("Kate", "Smith");
console.log(newPerson.returnName()); // "Kate Smith"

returnName () 방법을 호출하는 경우, Person 구조 함수로 만든 newPerson 대상을 인용합니다. 우리의 값은 "Kate Smith"이지 "Peter Strong"이 아닙니다. 왜냐하면 우리는 newPerson 대상 속성을 사용하기 때문입니다.

함수에서 사용

함수에서 사용하는 이 키워드는 좀 까다로울 수 있습니다.Javascript의 함수가 객체라는 것을 기억하는 것이 좋습니다.그것은 자신의 속성을 가지고 있는데, 그 중 하나는thisvalue이며, 그 값은 그것을 호출하는 방식에 달려 있다.만약 함수가 어떤 대상에 호출된다면, 이 값은 대상이다.그렇지 않으면 이 속성의 함수는 전역 대상 창입니다.코드 예시를 보여 주세요.

var catName = "Garfield";
var catColor = "orange";
function getCat() {
  return this.catName + ' is ' + this.catColor;
}
var cat = {
  catName = "Jerry",
  catColor = "gray",
  getCat: function() {
    return this.catName + ' is ' + this.catColor;
  }
}

위문하다.로그('Cat in gloabl scope', getCat();//'가비고양이는 신의 계시'.
위문하다.로그('Cat in object scope', Cat.getCat();//"제리는 회색이에요".
만약 우리가 코드를 분석한다면, 우리는 두 개의 함수를 볼 수 있는데, 그 중 하나는 전역 작용역 함수이고, 다른 하나는cat 대상 방법이다.전역 역할 영역 함수 getCat () 를 호출할 때, 함수의 이 키가 전역 대상을 인용하기 때문에 전역 역할 영역 변수를 사용합니다.cat object의 getCat () 방법에서는 cat object 속성을 가리키는데, 이것이 바로 우리가 유사한 함수에서 두 가지 다른 결과를 얻는 이유이다.

이것은 활동에서 사용

이벤트에 대해, 어떤 이벤트를 터치한 후에, 우리는 이벤트 처리 프로그램을 호출합니다.이 처리 프로그램들은 일부 코드를 호출하는 함수이다.이벤트 프로세서에서 이 키워드를 사용할 때, 이것은 함수를 시작하는 HTML 요소를 가리킨다.DOM 모델은 개체 트리이므로 페이지의 각 HTML 요소는 개체로 저장됩니다.몇 가지 예제 코드를 살펴보겠습니다.

<button onclick="this.style.backgroundColor='blue'">Click here!</button>

이제 button HTML 대상을 인용하고 스타일을 조작할 수 있습니다. 예를 들어.

call(), apply(), bind()

자바스크립트에는 콜 (), apply (),bind () 를 설정하는 데 도움을 줄 수 있는 세 가지 방법이 있습니다.
때때로 우리는 대상에서 방법을 빌려서 오류가 발생할 다른 상하문에 사용하기를 원한다.코드를 살펴보겠습니다.

var boy = {
  greeting = 'Hello',
  sayHi: function() {
    return this.greeting;
  }
}
var spanishBoy = {
  greeting: 'Hola'
} 
boy.sayHi(); // "Hello";

sayHi () 함수를 사용하려면spanishBoy 변수 인사말을 사용하려면 어떻게 해야 합니까?여기는call(), apply(), bind()가 편리한 곳입니다.모든 차이를 검사해 봅시다.

전화()

call () 방법은 이 키워드에 새로운 값을 할당할 수 있도록 합니다.우리는 여러 개의 매개 변수를call () 방법에 전달할 수 있다.첫 번째 파라미터는 new this의 값입니다. 다음에 우리는 함수 파라미터를 전달할 수 있습니다.따라서 새로운this와 전달 매개 변수를 가진 함수를 호출합니다.코드를 살펴보겠습니다.

var boy = {
  greeting = 'Hello',
  sayHi: function() {
    return this.greeting;
  }
}
var spanishBoy = {
  greeting: 'Hola'
} 
boy.sayHi(); // "Hello";
boy.sayHi.call(spanishBoy); // "Hola";

여기서call() 방법을 사용한 결과를 볼 수 있습니다.sayHi () 방법은 spanishBoy 상하문에서 즉시 호출됩니다. 우리는 spanishBoy 대상에 새로운 방법을 만들지 않은 상태에서 boy 대상 방법을 사용할 수 있습니다.

적용()

다음 방법 apply () 를 보여 줍니다.이 방법은call()과 매우 비슷합니다. 이 값을 변경하고 사용한 후에 함수를 바로 호출할 수 있지만, 그것들 사이에는 작은 차이가 있습니다.call () 방법에 매개 변수를 전달할 때, 이것은 이렇게 보입니다:call (newThis,arg1,arg2,arg3).각 매개변수를 개별적으로 전달하는 대신 apply() 함수를 사용하는 경우 다음과 같이 배열로 전달할 수 있습니다.apply(newThis, [arg1, arg2, arg3]).

바인딩()

bind () 방법은 콜 () 과 apply () 와 약간 다르다.bind () 는 이 함수를 즉시 호출하지 않고 새 함수를 만들고 되돌려주며,this 값을 지정합니다.코드 예시를 봅시다.

var boy = {
  greeting = 'Hello',
  sayHi: function() {
    return this.greeting;
  }
}
var spanishBoy = {
  greeting: 'Hola'
} 
boy.sayHi(); // "Hello";
const sayHola = boy.sayHi.bind(spanishBoy);
sayHola(); // "Hola";

이 예에서, 우리는sayHola () 라는 새 함수를 만들 수 있으며, 언제든지 호출할 수 있습니다.
비동기 코드를 처리하거나 함수에 매개 변수만 전달하려고 할 때bind () 방법을 사용하면 매우 유용할 수 있습니다.

결론

본문에서, 나는 자바스크립트에서 이 키워드의 정의와 용법을 소개했다.서로 다른 장면에서 어떤 값을 기대할 수 있는지 설명하고 세 가지 중요한 방법:call(), apply()와bind()를 설명했습니다.
이 키워드를 이해하는 것이 그것을 정확하게 사용하고 코드의 대량 오류를 피하는 데 얼마나 중요한지 감안하여, 나는 당신이 본문이 매우 유용하다는 것을 발견할 수 있기를 바랍니다.또한 자바스크립트의 기초 지식을 이해하는 것이 더 높은 개념을 파악하는 데 도움이 된다는 것을 기억하는 것이 좋다.
읽어주셔서 감사합니다.
둠리에서 온 안나