JavaScript: "this"키워드 이해

'this'는 JavaScript에서 가장 중요한 개념 중 하나입니다.이것은 기초의 일부분이다. 네가 그것에 빨리 적응할수록, 너의 인코딩 생활은 더욱 쉬워질 것이다.
본문을 읽는 것을 통해'this'의 용법을 이해할 수 있습니다.
먼저, 간단한 5-yo 설명:
 

The use of 'this' in programming is like what you do in plain English. For example, when you say "I got a job! This is great!". We know 'this' is referring to the fact you got the job. In other words, 'this' gives context to the second sentence.

읊다, 읊조리다
 
그러니 이해'this'를 하려면 언어 환경이 무엇인지 알아야 한다.
 

어경 해석
 
컨텍스트는 객체와 연관됩니다.메서드나 속성이 속한 객체를 나타냅니다.코드는 전역 상하문에서 실행되기 시작했고 브라우저에서는 window(노드에서는 전역 대상을 global라고 부른다).다음 예를 참조하십시오.
 

var name ='Beyonce'  

console.log(this.name)  // Beyonce 
console.log(window.name)  // Beyonce 

 
이 예에서 'this' 는 window 과 같다. 왜냐하면 나는 브라우저에서 그것을 실행하기 때문에 전역 대상은 창이다.그래서 창문.성명 = 잿더미.지금까지 컨텍스트는 창입니다.그래.
현재 코드가 실행되는 과정에서 상하문이 바뀔 것이다.대상을 호출할 때마다 'this' 이 방법을 호출할 대상으로 설정합니다.
다음 예제를 참조하십시오.4행과 10행은 같지만 'this'의 값에 따라 다른 결과를 기록한다.
 

var name = 'Beyonce' 

function sayMyName(){ 
  console.log(`Your name is ${this.name}.`) //  'this' is  window 
}  

var heisenberg = { 
  name: 'Heisenberg', 
  sayMyName: function () { 
    console.log(`Your name is ${this.name}.`) //  'this' is heisenberg 
  }  
}  

sayMyName()   // Your name is Beyonce. 
heisenberg.sayMyName() // Your name is Heisenberg. 

 
위의 코드는 잘 작동하지만, 우리는 네 번째 줄을 반복했다. 이것은 멋있지 않다. (기억해라: DRY는 자신을 반복하지 마라.)
한 번만 작성하고 다시 사용할 수 있는 방법이 있다.이를 위해 우리는 함수console.log()를 사용한다.
 

"이거"랑 bind.
 bind는 주어진 Bind (대상) 을 호출 함수에 적용합니다.함수에 귀속할 대상은 귀속할 매개 변수로 전달됩니다.
예제 참조:
 

function sayMyName(){ 
  console.log(`Your name is ${this.name}.`)  
}  

var beyonce = { 
  name: 'Beyonce', 
} 

var heisenberg = { 
  name: 'Heisenberg', 
} 

let sayBeyonce= sayMyName.bind(beyonce)    
let sayHeisenberg= sayMyName.bind(heisenberg) 

sayBeyonce() // Your name is Beyonce. 
sayHeisenberg() // Your name is Heisenberg. 

 
좋아요!현재, 우리가 새로운 함수를 만들고 싶지 않다면, 모든 사람의 이름을 말해 보세요.sayMyName()만 사용하려고 합니다.
우리는 'this' 함수와 범형person 대상을 통해 실현할 수 있다.
 

"이거"랑 전화.
 
bind와 마찬가지로 call도 사용자 정의 값을 call로 설정할 수 있습니다.
예제 참조:
 

var person = { 
  sayMyName: function(){ console.log(`Your name is ${this.name}.`)}; 
} 

var beyonce = { 
  name: 'Beyonce', 

};   

var heisenberg = { 
  name: 'Heisenberg', 
}; 

person.sayMyName.call(beyonce); // Your name is Beyonce. 
person.sayMyName.call(heisenberg); // Your name is Heisenberg. 

 

화살표 기능이 있는 "this"
 
화살표 기능 주의🏹
화살표 함수를 사용할 경우 새 값이 'this'로 설정되지 않습니다.반대로 그것은 부작용역에서 하나를 계승했다.
이 예는 이전 예와 같지만 일반 함수 대신 화살표 함수를 사용합니다.
Ash는 콘솔에 두 번 기록합니다.이상하죠?
 

var name = 'Ash'; 

var person = { 
  sayMyName: () => console.log(`Your name is ${this.name}.`) 
}; 

var beyonce = { 
  name: 'Beyonce', 
};  

var heisenberg = { 
  name: 'Heisenberg', 
}; 

person.sayMyName.call(beyonce); // Your name is Ash. 
person.sayMyName.call(heisenberg); // Your name is Ash. 

 
콜/bind를 사용해도 작동하지 않습니다.그것은 여전히 잿더미를 기록하고 있다.왜?
 

"this"는 일반 vs-arrow 함수를 가지고 있다
 
일반 함수는 호출자에게 자신의 'this' 대상을 설정합니다.
그러나 화살표 함수는 없습니다. 화살표 함수는 'this' 이전의 상하문, 즉 그것이 있는 범위를 계승했습니다.이 경우 창에서이것은 어휘 범위라고 불린다.
따라서 우리가arrow 함수를 사용할 때'this'는 함수의 호출자와 무관하다.그것은 여전히 'this'와 같고 변하지 않았으며 결과는'재'로 기록되었다.
만약 우리가 정규 함수로 화살표 함수를 포장한다면?
일반 함수가 호출되고 window 호출자로 설정됩니다.
arrow 함수는 일반 함수 내부에서 호출됩니다.arrow 함수의'this'값은 외부(일반) 함수의'this'값을 계승합니다.그래서 얘가 작용했어!

var name = 'Ash'; 

var person = { 
  sayMyName: function () { 
    const arrowFunction = () => console.log(`Your name is ${this.name}.`); 
    arrowFunction(); 
  }, 
};  

var beyonce = { 
  name: 'Beyonce', 
}; 

var heisenberg = { 
  name: 'Heisenberg', 
};  

person.sayMyName.call(beyonce); // Your name is Beyonce. 
person.sayMyName.call(heisenberg); // Your name is Heisenberg. 

 
쿨하다그러면 화살표 함수를 사용하면 안 돼요?하나도 안 그래.당신이 정말로 주위의 환경에서'this'를 계승하고 싶을 때, 많은 용례가 있다.이러한 상황에서 화살표 함수는 매우 유용하다.
 

화살표 함수가 있는 "this"의 유용한 예
 
우리 예를 하나 봅시다.여기서, 우리는 명칭 그룹을 사용하여 2초마다 다른 명칭을 기록하기를 희망한다.이 코드를 실행하면 오류가 발생합니다. [Uncaught TypeError: 정의되지 않은 속성'forEach'를 읽을 수 없습니다.
 

var people = { 
  names: ['Ash', 'Beyonce', 'Heisenberg'], 

  sayNames: function () { 

    // log each name after 1 second 
    setTimeout(function () { 
      console.log(this); 
      this.names.forEach(function (name) { 
        console.log('your name is' + name); 
      }); 
    }, 2000); 
  }, 
}; 

people.sayNames(); 

 
왜?
sayNames를 호출하면 this가 people 객체로 설정됩니다.그러나 setTimeout을 호출할 때'this' 를 창으로 설정합니다.창에 속성이 없습니다'this'.우리는 어떻게 이 문제를 해결합니까?
너 맞혔어!외부 상하문에서'this'를 계승하는 arrow 함수를 사용합니다.다시 말하면, 이것은sayNames 상하문에서 계승될 것이다.
 

var people = { 
  names: ['Ash', 'Beyonce', 'Heisenberg'], 

  sayNames: function () { 
    console.log(this); 

    // log each name after 1 second 
    setTimeout( ()=> { 
      console.log(this); 
      this.names.forEach(function (name) { 
        console.log('your name is ' + name); 
      }); 
    }, 2000); 
  }, 
}; 

people.sayNames(); 

 

저에 대해서 연락 주세요!👋👩‍💻
 
읽어주셔서 감사합니다!나는 열광적인 학습자이다. 나는 내가 아는 것을 공유하는 것을 좋아한다.나는 무료로 프로그래밍을 가르친다👉 here와 나는 인코딩 기술을 좀 공유했다.네가 원한다면 채팅방에 와서 인사해도 된다😁