JavaScript 학습 노트--this 포괄적 해석

4122 단어

this 전면 해석


1. this가 뭐예요?

this는 우리가 실행할 때 함수를 호출하는 대상을 가리키는 지침이다.
 

2.this를 사용하는 이유


this는 은밀하게 대상을 인용하는 우아한 방식을 제공하기 때문에 API를 더욱 간결하고 복용하기 쉽게 설계할 수 있다.
 

3. 바인딩this


3.1 기본 바인딩


먼저 가장 자주 사용하는 함수 호출 유형을 소개합니다. 독립 함수 호출입니다.이 규칙을 다른 규칙을 적용할 수 없을 때의 기본 규칙으로 볼 수 있다.이 경우,this는 전역 대상을 가리킨다.
function foo() {
　　console.log( this.a );
}

var a = 2;
foo(); // 2

 

3.2 암시적 바인딩


또 하나 고려해야 할 규칙은 호출 위치에 상하문 대상이 있는지, 아니면 어떤 대상에게 보유되거나 포함되었는지이다.
function foo() {
　　console.log( this.a );
}

var obj = {
　　a: 2,
　　foo: foo
};

obj.foo(); // 2

 

3.3 명시적 바인딩

call(..)와 apply(..) 방법을 사용합니다.첫 번째 인자는 대상입니다. 이 대상을this에 연결하고 함수를 호출할 때 이this를 지정합니다.
function foo() {
　　console.log( this.a );
}

var obj = {
　　a:2
};

foo.call( obj ); // 2

 

3.4 new 바인딩

new를 사용하여 함수를 호출하면 다음 동작이 자동으로 실행됩니다.
새로운 대상을 만듭니다.
이 새 대상은 원형 연결을 실행합니다.
이 새 대상은 함수 호출에 귀속됩니다 this.
만약 함수가 다른 대상을 되돌려주지 않는다면, new 표현식의 함수 호출은 자동으로 이 새 대상을 되돌려줍니다. 
function foo(a) {
　　this.a = a;
}

var bar = new foo(2);
console.log( bar.a ); // 2

 

4.this 바인딩 우선 순위


기본 바인딩<암시적 바인딩<명시적 바인딩 

5. 화살표 함수의this 귀속


화살표 함수는this의 네 가지 표준 규칙을 사용하지 않고 외층(함수 또는 전역)에 따라 1functionfoo() {
function foo() {
　　//  
　　return (a) => {
　　　　//this   foo()
　　　　console.log( this.a );
　　};
}

var obj1 = {
　　a:2
};

var obj2 = {
　　a:3
};

var bar = foo.call( obj1 ); bar.call( obj2 ); // 2,   3 ！

 
 
주: 본문은 실제로this에 관한 독서 노트입니다.
[Jemalloc] 루비의 메모리 사용률 상승을 막으려고요.
How to Embed an Online Compiler into a Website

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage