js 에서 this 지향 에 대한 이해
2036 단어 javascript 기초 지식
상황 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 를 호출 하 는 사람 은 누 구 를 가리 킵 니 다.