E.D.I.N 개념으로'this'를 이해하세요.
19428 단어 showdevwebdevbeginnersjavascript
이것은 자바스크립트에서 무엇입니까?
this
키워드는 자바스크립트 코드의 현재 부분을 실행하는 대상을 가리킨다.왜 이해가 이렇게 복잡합니까?
우리는 서로 다른 상하문을 제공함으로써 조종할 수 있는 방법이 많기 때문에 당황스러울 수도 있다
this
.this
귀속은 함수의 성명 위치와 무관하지만 함수의 호출 방식과 관련이 있다.우리는 네 가지 주요 규칙을 이용하여 코드 중
this
이 대표하는 내용을 확정할 수 있다.E, D.I.N - 현식 바인딩, 기본 바인딩, 은식 바인딩 및 새 바인딩을 나타냅니다.
(EDIN 개념이 없는 것은 단지 내가 이 개념들을 기억하는 방식일 뿐이다)
규칙 1.암시적 바인딩:
위아래 문장을 사용하여 실행된 함수를 호출할 때 은밀한 귀속을 실현합니다.
예:
const obj = {
name: 'Dev',
getName : function() {
console.log(this.name);
}
}
obj.getName(); // Dev
obj。getName()
getName()
상하문으로 대상obj
의 obj
함수를 호출한다.obj
속성이 있기 때문에name
dev를 출력합니다.만약 당신의 함수가 대상에 박혀 있다면?
예:
const obj = {
name: 'Dev Child',
getName : function() {
console.log(this.name);
}
}
const parentObj = {
childObj: obj,
name: 'Dev Parent'
};
parentObj.childObj.getName(); // Dev Child
this.name
는 obj
의 this
for getName()
함수이다.Fat Arrow 함수 catch:
var name = 'Global Dev';
const obj = {
name: 'Local Dev',
getName : () => {
console.log(this.name);
}
};
obj.getName() // Global Dev 😈 😈 😈
this
이 getName
arrow 함수에 귀속되었고 어휘this
를 사용했는데 이 예에서 Gloabl입니다.2. 기본 바인딩:
기본 귀속은 상하문이 없는 상황에서 함수를 호출하는 것입니다.
this
컨텍스트가 포함된 객체에서 함수를 재구성하는 동안 자주 발생하는 오류가 발생합니다.
var name = 'Global Dev';
const obj = {
name: 'Local Dev',
getName : function() {
console.log(this.name);
}
};
const { getName } = obj;
getName(); // Global Dev 🤔🤔🤔
getName
에서 obj
함수를 해구했다.this
을 만났을 때 창 대상을 검사하여 값을 해석하려고 시도합니다.name
대상에서 window
에'전역 편차'값을 분배했기 때문에 this.name
는 window.name
, 즉'전역 편차'로 해석된다.undefined
모드에서 strict
로 돌아갑니다.명시적 바인딩 사용
3. 명확한 구속:
현식 귀속은 함수를 호출할 때
this
대상을 지정하는 과정입니다.이것은 보통 유명한 Js삼중주call
, apply
, bind
의 도움으로 완성된다.var name = 'Global Dev';
const obj = {
name: 'Local Dev',
getName: function() {
console.log(this.name);
};
};
const { getName } = obj;
const newContext = {
name: 'New Dev'
};
// Explicit binding takes priority over Default binding
getName.call(newContext); // New Dev
// Explicit binding takes priority over Implicit binding
obj.getName.call(newContext); // New Dev
위에서 똑똑히 볼 수 있듯이 현식 귀속은 은식 또는 기본 귀속보다 우선합니다.그러나 우선 순위가 Arrow 함수의
this
귀속보다 높은지 여부입니다.아니오
var name = 'Global Dev';
const obj = {
name: 'Local Dev',
getName: () => {
console.log(this.name);
}
};
const newContext = {
name: 'New Dev'
};
//Arrow function's bind took priority over Explicit binding.
obj.getName.call(newContext); // Global Dev
우선 순위 정렬:
화살표 함수 > 명시적 바인딩 > 암시적 바인딩 > 기본 바인딩
4, 새 제본:
접두사에서
new
연산자를 사용하여 함수를 호출하면 새 구조의 대상은 여기 this
참조입니다. function MyName() {
this.name = "Local Dev";
}
MyName.prototype.getName = function() {
console.log(this.name);
}
// `new` binding
const name_instance = new MyName();
console.log(name_instance.name); // Local Dev
// Implicit Binding
name_instance.getName(); // Local Dev
name_instance
를 정의했는데 이것은 new
조작 공장 함수MyName
의 연산자에 의해 형성된 것이다.this
함수에서 MyName
에 대한 모든 인용은 새로 만든 대상 실례를 가리킨다name_instance
name_instance
. // Default Binding
var name = "Global Dev"
const {getName} = name_instance;
getName(); // Global Dev
// Implicit Binding
name_instance.getName(); // Local Dev
// Explicit Binding
name_instance.getName.call({ name: 'New Dev'}); // New Dev
// Arrow Binding
MyName.prototype.get_Arrow_Name = () => {
console.log(this.name);
}
name_instance.get_Arrow_Name(); // Global Dev
반응 클래스:
class App extends React.Component {
constructor() {
this.handle_three = this.handle_three.bind(this);
}
handle_one() {
console.log(this);
}
handle_two = () => {
console.log(this);
}
handle_three() {
console.log(this);
}
render() {
return (
<React.Fragment>
{/* Default binding */}
<div onClick={this.handle_one}></div>
{/* Arrow Function */}
<div onClick={this.handle_two}></div>
{/* Expicit Binding at constructor*/}
<div onClick={this.handle_three}></div>
</React.Fragment>
)
}
}
handle_one
첨부 파일은 상하문이 없는 상황에서 함수를 호출합니다 (기본 귀속).이로 인해 undefined
React가 기본 귀속 결과가 전역 귀속이 아닌 undefined
임을 확인했기 때문입니다.handle_two
첨부 파일은 새로 만든 Intsance(현재 응용 프로그램 클래스의 실례) 상하문 호출 함수를 사용합니다.handle_three
부속품은 구조 함수에서 this
값을 제공하기 위해 현식 귀속을 초래한다.이 글을 좋아해 주셨으면 좋겠어요.😄
참고 문헌: Kyle Simpsonthis & Object Prototypes
MyWebsite 및
이게 다야!!!
Reference
이 문제에 관하여(E.D.I.N 개념으로'this'를 이해하세요.), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/dhilipkmr/understanding-this-with-e-d-i-n-concepts-p00텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)