JavaScript 에서 this 의 용법 및 this 가 서로 다른 응용 장면 에서 의 역할 분석

실행 기 바 인 딩 특성 상 자바 script 의 this 의 미 는 훨씬 풍부 합 니 다.전역 대상,현재 대상 또는 임 의 대상 일 수 있 습 니 다.이것 은 함수 호출 방식 에 달 려 있 습 니 다.
JavaScript 에서 함수 호출 은 다음 과 같은 몇 가지 방식 이 있 습 니 다.함수 호출,대상 방법 으로 호출,구조 함수 호출,apply 또는 call 호출 을 사용 합 니 다.다음은 호출 방식 에 따라 this 의 의 미 를 토론 하 겠 습 니 다.
상황 1:순수한 함수 호출
이것 은 함수 의 가장 일반적인 용법 으로 전역 적 호출 에 속 하기 때문에 this 는 전역 대상 글로벌 을 대표 합 니 다.
1.함수 도 직접 호출 될 수 있 습 니 다.이때 this 는 전체 대상 에 연결 되 어 있 습 니 다.

function makeNoSense(x) { 
  this.x = x; 
} 
makeNoSense(5); 
console.log(x);// x          5      
function test(){
　　this.x = 1;
　　alert(this.x);
}
test(); // 1

상황 2:대상 방법의 호출
함 수 는 또한 특정한 대상 의 방법 으로 호출 할 수 있 습 니 다.이때 this 는 대상 내부 속성 이 호출 되 었 습 니 다.

var myObject = {
　　value :0,
　　increment:function (inc){
　　　　this.value += typeof inc ==='number' ? inc:1;
　　}
};
myObject.increment();
console.log(myObject.value); //1
myObject.increment(2);
console.log(myObject.value); //3

상황 3:구조 함수 로 호출
javaScript 는 대상 지향 프로 그래 밍 을 지원 합 니 다.주류 대상 지향 프로 그래 밍 언어 와 달리 JavaScript 는 클래스(class)의 개념 이 아니 라 프로 토 타 입(prototype)기반 계승 방식 을 사용 합 니 다.
이에 따라 자 바스 크 립 트 의 구조 함수 도 매우 특수 하 며,new 호출 을 사용 하지 않 으 면 일반 함수 와 같 습 니 다.또 하나의 약 속 된 준칙 으로서 구조 함 수 는 대문자 로 시작 하여 호출 자 에 게 정확 한 방식 으로 호출 하 라 고 일 깨 워 준다.호출 이 올 바 르 면 this 는 새로 만 든 대상 에 연결 합 니 다.
구조 함수 란 이 함 수 를 통 해 새로운 대상(object)을 만 드 는 것 이다.이때 this 는 이 새로운 대상 을 가리킨다.

function Point(x, y){ 
  this.x = x; 
  this.y = y; 
 }
var p1 = new Point(3,2);
console.log(p1.x+","+p1.y);//3,2

이 때 this 가 전역 대상 이 아니 라 는 것 을 나타 내기 위해 코드 를 바 꾸 었 습 니 다.

var x = 4;
function Point(x, y){ 
  this.x = x; 
  this.y = y; 
 }
var p1 = new Point(3,2);
console.log(p1.x+","+p1.y);//3,2

상황 4:apply 또는 call 호출
자바 스 크 립 트 에서 함수 도 대상 이 고 대상 은 방법 이 있 습 니 다.apply 와 call 은 함수 대상 의 방법 입 니 다.이 두 가지 방법 은 매우 강력 합 니 다.함수 가 실행 하 는 컨 텍스트 환경(context),즉 this 바 인 딩 대상 을 전환 할 수 있 습 니 다.많은 자 바스 크 립 트 의 기교 와 라 이브 러 리 에서 이 방법 을 사용 했다.구체 적 인 예 를 보 여 주세요.

function Point(x, y){ 
  this.x = x; 
  this.y = y; 
  this.moveTo = function(x, y){ 
    this.x = x; 
    this.y = y; 
    console.log(this.x+","+this.y);
  } 
} 
var p1 = new Point(0, 0); 
var p2 = {x: 0, y: 0}; 
p1.moveTo(1, 1); //1,1
p1.moveTo.apply(p2, [10, 10]);//10,10

위의 예 에서 우 리 는 구조 함 수 를 사용 하여 대상 p1 을 생 성 했 는데 이 대상 은 moveto 방법 을 동시에 가지 고 있다.대상 글자 의 양 을 사용 하여 다른 대상 p2 를 만 들 었 습 니 다.apply 를 사용 하면 p1 의 방법 을 p2 에 적용 할 수 있 습 니 다.이때 this 도 대상 p2 에 연결 되 어 있 습 니 다.다른 방법 인 콜 도 같은 기능 을 가진다.다른 것 은 마지막 매개 변 수 는 하나의 배열 로 통일 적 으로 들 어 오 는 것 이 아니 라 분리 적 으로 들 어 오 는 것 이다.본 고 는 자바 스 크 립 트 에서 자주 헷 갈 리 는 this 가 4 중 응용 장면 에서 의 사용 방법 에 대해 설명 하 였 으 며,당신 에 게 도움 이 되 기 를 바 랍 니 다.마음 에 드 시 면 추천 해 주세요.
위 에서 말 한 것 은 소 편 이 여러분 에 게 소개 한 자 바스 크 립 트 에서 this 의 용법 과 this 가 서로 다른 응용 장면 에서 의 역할 분석 입 니 다.여러분 에 게 도움 이 되 기 를 바 랍 니 다.궁금 한 점 이 있 으 시 면 메 시 지 를 남 겨 주세요.소 편 은 제때에 답 해 드 리 겠 습 니 다.여기 서도 저희 사이트 에 대한 여러분 의 지지 에 감 사 드 립 니 다!