알 기 쉬 운 this 수치 규칙

The Simple Rules to 'this' in Javascript.
무엇이 this 인지 확인 하 는 것 은 결코 어 려 운 일이 아니다.전체적으로 말 하면 함수 가 호출 될 때의 위치 (방법) 를 찾 으 면 결정 할 수 있다.다음 규칙 에 따라 우선 순위 에 따라 배열 합 니 다.
규칙.

키 워드 를 통 해 구조 함 수 를 호출 하고 함수 내 new 는 새로운 대상 이다.

function ConstructorExample() {
    console.log(this);
    this.value = 10;
    console.log(this);
}
new ConstructorExample();
// -> {}
// -> { value: 10 }

this, apply 또는 call 을 통 해 함 수 를 호출 하면 함수 내 bind 가 들 어 오 는 매개 변수 입 니 다.

function fn() {
    console.log(this);
}
var obj = {
    value: 5
};
var boundFn = fn.bind(obj);
boundFn();     // -> { value: 5 }
fn.call(obj);  // -> { value: 5 }
fn.apply(obj); // -> { value: 5 }

함수 가 대상 이 되 는 방법 으로 호출 되면 this 기 호 를 사용 하여 이 함 수 를 호출 합 니 다. . 은 이 함 수 를 호출 하 는 대상 입 니 다.다시 말 하면 this 호출 된 함수 의 왼쪽 에 있 으 면 . 이 왼쪽 의 대상 이다.

var obj = {
    value: 5,
    printThis: function() {
        console.log(this);
    }
};
obj.printThis(); // -> { value: 5, printThis: ƒ }

함수 가 일반 함수 로 호출 되면 호출 방식 이 상기 임 의 한 가지 에 부합 되 지 않 음 을 의미 하 며 this 는 전체 대상 이다.브 라 우 저 에서 바로 this 입 니 다.

function fn() {
    console.log(this);
}
// If called in browser:
fn(); // -> Window {stop: ƒ, open: ƒ, alert: ƒ, ...}

* 이 규칙 은 규칙 3 과 유사 합 니 다. 다른 점 은 이 함수 가 window 대상 에 자동 으로 마 운 트 되 었 기 때문에 이렇게 이해 할 수 있 습 니 다. 우리 가 window 를 호출 할 때 실제 호출 된 일 fn() 이기 때문에 window.fn() 은 this 입 니 다.

console.log(fn === window.fn); // -> true

상기 여러 규칙 에 부합 하면 앞의 규칙 보다 window 의 값 을 결정 한다.

함수 가 this 화살표 함수 라면 상기 모든 규칙 을 무시 하고 ES2015 생 성 된 컨 텍스트 로 설정 합 니 다.this 의 값 을 찾기 위해 서 는 함수 가 만 들 어 졌 을 때의 환경 this 의 값 을 찾 아야 합 니 다.

const obj = {
    value: 'abc',
    createArrowFn: function() {
        return () => console.log(this);
    }
};
const arrowFn = obj.createArrowFn();
arrowFn(); // -> { value: 'abc', createArrowFn: ƒ }

우 리 는 규칙 3 을 되 돌려 보 았 다. 우리 가 호출 this 할 때 obj.createArrowFn() 중의 createArrowFn 대상 이 바로 this 대상 이 고 우 리 는 obj 기호 로 호출 했다.만약 우리 가 전체 국면 에서 화살표 함 수 를 만 들 면 . 은 this 입 니 다.

응용 규칙
다음은 몇 가지 예 에서 우리 의 규칙 을 응용 해 보 자.두 가지 다른 방식 으로 함 수 를 호출 할 때 window 의 값 을 시험 해 보 세 요.
적용 규칙 찾기

var obj = {
    value: 'hi',
    printThis: function() {
        console.log(this);
    }
};
var print = obj.printThis;
obj.printThis(); // -> {value: "hi", printThis: ƒ}
print(); // -> Window {stop: ƒ, open: ƒ, alert: ƒ, ...}

this 규칙 3 - 사용 obj.printThis() 기 호 를 사용 한 것 이 분명 하 다.. 규칙 4 를 응용 하여 호출 print() 할 때 우 리 는 print(), new 또는 bind/call/apply 기 호 를 사용 하지 않 았 기 때문에 이곳 의 . 은 전체 대상 this 이다.
다 중 규칙 적용
앞에서 언급 한 바 와 같이 여러 규칙 을 적용 할 때 앞의 규칙 을 우선 적용 합 니 다.

var obj1 = {
    value: 'hi',
    print: function() {
        console.log(this);
    },
};
var obj2 = { value: 17 };

규칙 2 와 3 을 동시에 적용 하면 규칙 2 가 우선 입 니 다.

obj1.print.call(obj2); // -> { value: 17 }

규칙 1 과 3 을 동시에 적용 하면 규칙 1 이 우선 합 니 다.

new obj1.print(); // -> {}

도구 모음
일부 window 라 이브 러 리 는 함수 에서 가장 유용 하 다 고 생각 하 는 내용 을 JavaScript 에 주동 적 으로 연결 하기 도 한다.예 를 들 어 JQuery 에서 이 벤트 를 촉발 할 때 DOM 요소 가 this 에 연결 되 었 습 니 다.도구 라 이브 러 리 를 사용 할 때 위 규칙 에 맞지 않 는 값 을 찾 았 을 때 라 이브 러 리 문 서 를 보십시오.문법 을 사 용 했 을 가능성 이 높다.
이 글 은 나의 개인 사이트 에서 처음으로 발표 되 었 다.

이 내용에 흥미가 있습니까?

현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:

Thymeleaf 의 일반 양식 제출 과 AJAX 제출

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.

알 기 쉬 운 this 수치 규칙

좋은 웹페이지 즐겨찾기