js 에서 this 지향 에 대한 이해

JavaScript 에서 this 가 가리 키 는 문 제 를 이해 하기 전에 먼저 "this 의 최종 지향 은 항상 호출 된 대상" 이라는 말 을 기억 해 야 합 니 다.
상황 1: 함수 의 직접 호출
function hi(){
    alert(this)
}

hi()//    this    window

이 코드 를 이해 합 니 다. 일반적으로 전역 변 수 는 window 에 속성 을 추가 하 는 것 이 라 고 정의 합 니 다. 예 를 들 어
         var a=1;  =>>window.a = 1;
위의 코드 는 다음 과 같이 쓸 수 있다.   window.hi()       그 진실 을 참조 하 세 요. 이때 this 의 지향 은 window 대상 입 니 다.
상황 2: 대상 중 함수
var obj = {
    a: "hi",
    fn: function(){
        alert(this)
    }
}

obj.fn()//  this obj

이러한 상황 은 비교적 직관 적 이 고 진언 에 따 르 면 obj 호출 함수 fn 이기 때문에 함수 중의 this 지향 은 obj 입 니 다.
상황 3: 이 상황 은 설명 하기 어렵 고 코드 를 직접 올 립 니 다.
var obj = {
    a: {
       fn: function(){
          alert(this)
        }
    }
}

obj.a.fn();//   this   a,   obj

이런 상황 은 복잡 해 보이 지만 진언 과 충돌 하지 않 습 니 다. 함 수 는 두 개의 대상 이 점 을 찍 었 지만 진정 으로 함 수 를 호출 하 는 대상 은 a 입 니 다. 그래서 이때 fn 의 this 가 가리 키 는 것 은 바로 상급 대상 입 니 다. 즉, 그 와 가장 가 까 운 대상 입 니 다.
그리고 세 번 째 상황 과 유사 한 코드 도 있 습 니 다. 예 를 들 어:
var obj = {
    fn:function(){
        alert(this)
    }

}

window.obj.fn();

this 지향 은 obj 입 니 다.
다음은 제 가 전에 만난 면접 문제 입 니 다.
다음 실행 결 과 를 설명 합 니 다:
function doSomething(){
    alert(this)
}

element.onclick = doSomething(); //  element 
element.onclick = function(){ doSomething()}  //  element 
doSomething()  //    

세 가지 상황 의 출력 결 과 는 각각   element 대상, window 대상, window 대상
이 유 는 글 이 시 작 된 진언 이다. this 의 최종 지향 은 항상 호출 된 대상 이다.
방금 만난 문제 중 하 나 는 참고 가치 가 있 습 니 다. 다음 과 같 습 니 다.
var person = {
	fullname: function{
		console.log(this);
	},
	printAge: function(){
		console.log(this);
	}
}
person.fullname();		//this  person
var age = person.printAge;
age();					//this  window(    )

코드 에서 먼저 person. printAge 의 값 을 age 에 부여 한 다음 age () 를 호출 할 때 window. age () 를 호출 합 니 다. age 를 호출 하 는 대상 은 window 입 니 다. 상기 진언 의 이치 와 마찬가지 로 함수 this 를 호출 하 는 사람 은 누 구 를 가리 킵 니 다.

좋은 웹페이지 즐겨찾기