그렇지!이것 괜찮아요?

 this 키워드는 가장 혼란스러운 자바스크립트 개념 중 하나여야 한다. 왜냐하면 호출 방식이 동적이기 때문이다.만약 당신이 이 글을 읽고 있다는 것을 발견한다면, 당신은 이미 this 몇 번을 읽었을 것이다. 더 잘 이해하고 싶을 것이다.나는 this 실제 예와 최소한의 용어로 명확하게 표현할 수 있기를 바란다.당신이 가장 좋아하는 브라우저에서 컨트롤러를 열고 계속 조작하십시오.
 
this 전 세계
가장 직접적인 식별 방법this은 이를 전역 대상으로 사용하는 것이다.전역 객체는 JavaScript 코드의 모든 위치에서 액세스할 수 있는 객체입니다.브라우저는 전역 대상window, NodeJ는 전역 대상global이라고 부른다.이런 기본적인 기본 귀속을 기본 귀속이라고 부른다.

console.log(this) // window
console.log(window) // window
console.log(this === window) // true

fetch와localStorage가 전역 창 대상의 일부라는 것을 아십니까?var 키워드와 함수로 성명된 변수를 창 대상의 속성으로 합니다.글로벌 객체의 속성은 점이나 괄호 기호를 사용하지 않고 액세스할 수 있습니다.그러나 let 또는 const 키워드 선언을 사용하는 변수는 글로벌 객체의 일부가 되지 않고 액세스할 수 없는 환경에 저장됩니다.

var age = 29
console.log(age) // 29
console.log(this.age) // 29
console.log(window.age) // 29

function sayHi() {
  console.log("Hi")
}
sayHi() // Hi
this.sayHi() // Hi
window.sayHi() // Hi

const sayHello = function() {
  console.log("Hello")
}
sayHello() // Hello
this.sayHello() // Uncaught TypeError: this.sayHello is not a function
window.sayHello() // Uncaught TypeError: window.sayHello is not a function

 
this 함수에서this 정규 함수에서도 전체 대상을 가리킨다.또는, 우리도 이 함수들의 상하문이 전체적인 대상이라고 말할 수 있다.Context는 자바스크립트 엔진이 코드를 실행할 때this가 주어진 시간에 대한 값('실행 상하문'이라고도 부른다)을 가리킨다.

var whatIsThis = function() {
  console.log(this)
}

whatIsThis() // window

경고:use strict 모드를 사용할 때 this 대상에 대한 기본 연결을 허용하지 않습니다.따라서 window의 값이 정의되지 않을 수 있습니다.

"use strict"

var whatIsThis = function() {
  console.log(this)
}

whatIsThis() // undefined

 
 
this 방법
방법은 그것이 대상 내부의 함수라는 것을 의미한다.this 메소드 내부의 키워드는 상위 객체로 설정됩니다.이것은 은식 귀속이라고 하는데 this 그것이 속한 대상에 간접적으로 귀속되기 때문이다.

var obj = {
  getThis: function() {
    return this
  },
}

// equivalent ES6 method
var obj = {
  getThis() {
    return this
  },
}

console.log(obj.getThis()) // obj
console.log(obj === obj.getThis()) // true

접근 방법의 대상의 속성은 현식으로 사용해야 한다this.그렇지 않으면, 같은 함수 범위 내에서 같은 이름의 변수를 찾을 것이다.

var me = {
  name: "Phillip",
  getName() {
    const name = "Sunnie"
    console.log("My name is " + this.name)
    console.log("My name is " + name)
  },
}

me.getName() // My name is Phillip
// My name is Sunnie

 this 예상 문자열을 보여 줍니다.만약 우리가 getName 방법의 정의를 이 방법 이외의 변수에 분배한다면 어떻게 될까요?새 getName 함수가 'me' 대상에 연결되지 않기 때문에 me.getName() 은밀한 연결을 잃어버릴 것입니다.반대로 새 getName은 this 키워드로 설명되어 있기 때문에 전역 창 대상에 연결되고 전역 대상의 속성 검색 var 을 시도합니다.다음은 MDN 공식 문서에 대한 견해입니다.

In most cases, the value of this is determined by how a function is called. It can't be set by assignment during execution, and it may be different each time the function is called.

var me = {
  name: "Phillip",
  getName: function() {
    console.log("My name is " + this.name)
  },
}

var getName = me.getName
me.getName() // My name is Phillip
getName() // My name is undefined

'내 이름은 정의되지 않은 것이다'가 아니라'내 이름은'을 볼 수 있다.이것은 우리가 이전에 전역적으로 사용했기 때문에 this.name 키는 거기에 있지만, 값은 빈 문자열로 설정되어 있습니다.
"me"대상에서 getName 방법을 추출하여 독립된 함수로 만드는 것이 어떻습니까?그리고 'me' 대상에 같은 이름의 getName 속성을 만들고 독립된 getName 함수를 인용으로 지정합니다.우리 각각 그들에게 전화를 걸어 봅시다.독립된 함수를 단독으로 호출하면, this.name 전역 대상을 인용하고 this 대상에서 이름을 검색합니다.함수를 'me' 대상의 속성으로 호출하면 window 상하문은 'me' 대상이 됩니다.

function getName() {
  console.log("My name is " + this.name)
}

var me = {
  name: "Phillip",
  getName: getName,
}

getName() // My name is undefined
me.getName() // My name is Phillip

경험의 법칙: 방법의 왼쪽을 보면 this라고 불리며 이 대상에 속한다.없으면 this 글로벌 객체에 속합니다.
 
thiscall,apply,bind를 사용합니다.
"getName"함수를 다시 사용할 수 있도록 하려고 합니다.콜, apply,bind 함수를 사용하여 코드를 개선합시다.이것들은 함수 정의에 추가되어 그것들을 직접 호출하는 특수 함수들이다.this와 call는 대상을 첫 번째 매개 변수로 하기 때문에 방법은 어떻게 처리하는지 이해할 것이다apply.전달된 매개 변수가 없는 경우 컨텍스트는 글로벌 객체가 됩니다.

function getName() {
    console.log("My name is " + this.name)
}

var me = {
  name: "Phillip",
}

var you = {
  name: "Sunnie"
}

getName.call(me) // My name is Phillip
getName.apply(you) // My name is Sunnie
getName.call() // My name is undefined

this와 call 사이의 차이는 첫 번째 매개 변수 다음에 여러 개의 매개 변수를 방법에 전달하는 데 있다.apply는 쉼표로 값을 구분하고 call도 쉼표로 값을 구분하지만 그룹 내에 있습니다.

function getInfo(age, hobby) {
    console.log(`My name is ${this.name}, I am ${age} and my hobby is ${hobby}`)
}

var me = {
  name: "Phillip",
}

var you = {
  name: "Sunnie"
}

getInfo.call(me, 29, "coding") // My name is Phillip, I am 29 and my hobby is coding
getInfo.apply(you, [28, "floral design"]) // My name is Sunnie, I am 28 and my hobby is floral design

유용한 팁: 쉼표는 쉼표를 받고, 수락 배열을 적용합니다.
일반적으로, 우리는 단지 어떤 방법을 어떤 대상과 연관시키려고 한다.apply 특정 방법을 특정 대상에 연결하여 bind의 값을 예측할 수 있도록 도와주고 그 정의를 조사하는 것이 아니라 그 호출 방식을 조사하는 것을 통해 발견할 수 있습니다.콜과 apply와 달리bind는 추가 함수를 즉시 호출하지 않습니다.이것은 현식 귀속이라고 한다

function getName() {
  console.log("My name is " + this.name)
}

var me = {
  name: "Phillip",
}

getName = getName.bind(me)
getName() // My name is Phillip

bind를 사용한 후에 이 방법에 다시 분배하는 것을 잊지 마세요!
bind의 실제 용도는 함수를 리셋으로 전달하는 것이다.bind를 사용하지 않는 예를 보여 줍니다.

var me = {
  name: "Phillip",
  getName: function() {
    console.log("My name is " + this.name)
  },
}

function calleMeMaybe(callback) {
  callback()
}

calleMeMaybe(me.getName) // My name is undefined

getName은 엔진 뚜껑 아래에서 일어나는 일이기 때문에 정의되지 않았습니다.

callback = me.getName

이제 getName을 "me"대상에 연결합니다.

var me = {
  name: "Phillip",
  getName: function() {
    console.log("My name is " + this.name)
  },
}
me.getName = me.getName.bind(me)

function calleMeMaybe(callback) {
  callback()
}

calleMeMaybe(me.getName) // My name Phillip

 
this함수 내구조 함수
JavaScript에서 함수는 구조 함수로 사용할 수 있으며'new'키워드를 사용하여 새 객체를 구성할 수 있습니다.this는 함수 구조 함수로 만들어진 실례(또는 대상)로 설정합니다.

function Song(author) {
  this.author = author
  this.song = "Let it go"
  this.getInfo = function() {
    console.log(`${this.author} sang ${this.song}`)
  }
}

var song = new Song("Idina Menzel")
song.getInfo() // Idina Menzel sang Let it go

var song1 = new Song("Demi Lovato")
song1.getInfo() // Demi Lovato sang Let it go

// change of context
var getInfo = song1.getInfo 
getInfo() // undefined is sung by undefined

 
this학급대행
클래스는 현대 함수 구조 함수다.클래스 내부에서this의 행위는 함수 구조 함수와 같고 클래스가 만든 특정한 대상을 인용한다.'엄격 모드' 는 기본적으로 클래스에 적용됩니다.

class Song {
  constructor(author) {
    this.author = author
    this.song = "Let it go"
  }

  getInfo() {
    console.log(`${this.song} is sung by ${this.author}`)
  }
}

const song = new Song("Idina Menzel")
song.getInfo() // Idina Menzel sang Let it go

const song1 = new Song("Demi Lovato")
song1.getInfo() // Demi Lovato sang Let it go

// change of context
const getInfo = song1.getInfo
getInfo() // Uncaught TypeError: Cannot read property 'song' of undefined

React에 익숙하다면, 이벤트 처리 프로그램을 클래스 자체에 현저하게 연결하는 것을 알 수 있습니다.이것은 일부 이벤트 탐지기(예를 들어 onClick, onSubmit 등)가 이벤트 처리 프로그램 방법을 리셋으로 전달하기 때문이다.리셋 함수는 상하문을 잃게 된다는 것을 명심해라.

class Form extends React.Component {
  constructor(props) {
    super(props)
    this.handleClick = this.handleClick.bind(this) // necessary
  }

  handleSubmit(event) {
    // Handle logic
  }

  render() {
    return <button onClick={this.handleSubmit}>Submit</button>
  }
}

 
this 화살표 기능
JavaScript가 이상해지고 예기치 않은 행동을 할 수 있습니다.당신은 this의 값이 방법 내부의 함수 중 얼마라고 생각합니까?우리의 직감은 그 방법이 속한 아버지의 대상을 여전히 인용할 것이라고 말한다.그러나 this는 사실상 this 대상을 가리키는 것이 아니다.우리는 앞의 예시를 예로 삼아 그것을 수정합시다.

var me = {
  name: "Phillip",
  getName: function () {
    function innerFunction() {
      console.log("My name is " + this.name)
    }
    innerFunction();
  },
}

me.getName() // My name is undefined

이 문제를 해결할 수 있는 여러 가지 방법이 있다.

우리는 window를 변수에 저장하고 내부 함수에서 이 변수를 인용할 수 있다.관례에 따르면 이 변수를'self'라고 부른다.

우리는 방법 내부에서 this를 사용하여 내부 함수를 방법의 상하문에 연결할 수 있다.

또는 화살표 기능을 사용합니다.

In arrow functions, this retains the value of the enclosing lexical context's this. - MDN

이것은 bind의 값이 화살표 함수를 포함하는 함수로 설정되었다는 것을 의미한다.

// 1
var me = {
  name: "Phillip",
  getName: function () {
    var self = this;
    function innerFunction() {
      console.log("My name is " + self.name)
    }
    innerFunction();
  },
}

me.getName()

// 2
var me = {
  name: "Phillip",
  getName: function () {
    function innerFunction() {
      console.log("My name is " + this.name)
    }
    innerFunction = innerFunction.bind(this);
    innerFunction();
  },
}

me.getName()

//3
var me = {
  name: "Phillip",
  getName: function () {
    const innerFunction = () => {
      console.log("My name is " + this.name)
    }
    innerFunction();
  },
}

me.getName()

 

HTML 포함 this이벤트가 트리거되면 JavaScript 이벤트 탐지기가 액세스할 수 있습니다this.this 그런 다음 HTML 요소를 참조합니다.이벤트 탐지기 리셋 함수가 화살표 함수로 성명되면 this 창 대상과 폐쇄된 상하문을 인용합니다.

<h1 class="h1">Hello World</h1>
<h2 class="h2">Hi World</h2>

const h1 = document.querySelector(".h1")
const h2 = document.querySelector(".h2")

h1.addEventListener("click", function(e) {
  console.log(e.target) // <h1 class="h1">Hello World</h1>
  console.log(this) // <h1 class="h1">Hello World</h1>
})

h2.addEventListener("click", e => {
  console.log(e.target) // <h2 class="h2">Hi World</h2>
  console.log(this) // window
})

 

요약
내 글을 읽어줘서 고마워!👏👏 나는 진심으로 이것이 유용한 내용으로 네가 this 키워드에 대한 곤혹을 풀 수 있기를 바란다.나는 나의 그 장편 문장의 요점을 가지고 떠날 것이다.다시 한 번 감사합니다!

this는 일반적으로 기본적인 전역 대상을 가리키며 일반 함수에서는 기본적으로 귀속된다.

엄격한 모드에서 this는 정의되지 않았다.

방법 내부에서this는 이 방법을 가진 대상이지만 호출this의 방식에 달려 있다.값을 확인하려면 this의 왼쪽을 확인합니다.

call을 사용하여 apply현식으로 필요한 대상을 가진 방법을 호출합니다.바인딩을 사용하여 특정 객체에 this를 붙여 넣습니다.

화살표 함수에서 닫힌 상하문을 보고 this의 값을 확정한다.