JavaScript_javascript 기술에서 이 포인터에 대한 유연한 이해

자바스크립트에서 자주 사용되는 키워드 중 하나입니다. 특히 this 키워드를 정확하게 이해하고 사용하는 것이 중요합니다. 우선 this의 포인트는 함수가 정의된 시점에서 판단할 수 없습니다. 함수가 실행되어야만 this가 가리키는 대상이 누구인지 판단할 수 있습니다. 이 문장은 좀 문제가 있는 것 같은데, 왜 문제가 있는지 나중에 설명하겠습니다. 인터넷에 있는 대부분의 기사에서는 이렇게 말하고 있지만, 그렇게 이해하면 문제가 없을 경우가 많지만, 실제로는 그렇게 이해하는 것이 정확하지 않습니다. 그런 식으로 이해하기 전에는 알 수 없다는 느낌이 들 수 있으므로 다음에는 이 문제에 대해 자세히 살펴보겠습니다.

이것을 왜 배워야 할까요? 함수형 프로그래밍이나 객체지향 프로그래밍을 공부했다면 그것이 무엇에 사용되는지 확실히 아실 겁니다. 공부하지 않았다면 당분간 이 글을 읽을 필요는 없습니다. 관심이 있다면 그것은 js입니다.

예제 1:

function a(){
var user = "追梦子";
console.log(this.user); //undefined
console.log(this); //Window
}
a();

위에서 말했듯이 이는 궁극적으로 자신을 호출하는 개체를 가리킵니다. , 다음 코드에서 증명할 수 있듯이 여기서 함수 a는 실제로 Window 개체에 의해 지적됩니다.

function a(){
var user = "追梦子";
console.log(this.user); //undefined
console.log(this);　　//Window
}
window.a();

사실 Alert도 윈도우의 속성이고, 윈도우에서도 클릭되는 것과 같습니다.

예 2:

var o = {
user:"追梦子",
fn:function(){
console.log(this.user); //追梦子
}
}
o.fn();

여기서는 fn이라고 부르기 때문에 객체 o를 가리킵니다. o.fn()을 통해 실행되므로 자연스러운 점은 함수가 생성될 때 결정될 수 없다는 점을 다시 강조하겠습니다. 이것을 알아내기 위해.

사실 예시 1과 예시 2는 충분히 정확하지 않습니다. 다음 예시는 위의 이론을 뒤집을 수 있습니다.

이것을 완전히 이해하려면 다음 몇 가지 예를 읽어야 합니다.

예 3:

var o = {
user:"追梦子",
fn:function(){
console.log(this.user); //追梦子
}
}
window.o.fn();

이 코드는 위의 코드와 거의 동일하지만 왜 여기서는 창을 가리키지 않는 걸까요? 위 이론에 따르면 궁극적으로 이 코드는 이를 호출하는 개체를 가리킵니다. 추가로 말씀드리자면 Window는 js의 전역 객체입니다. 우리가 만드는 변수는 실제로 window에 속성을 추가하므로 여기서는 window dot o 객체를 사용할 수 있습니다.

위 코드에서 이것이 왜 창을 가리키지 않는지는 설명하지 않겠습니다.

var o = {
a:10,
b:{
a:12,
fn:function(){
console.log(this.a); //12
}
}
}
o.b.fn();

여기에서도 o 개체를 클릭했지만 이것도 실행되지 않습니다. 처음부터 그거 다 틀린거 아니야? 사실은 그렇지 않습니다. 단지 제가 처음에 말한 내용이 정확하지 않았을 뿐입니다. 다음에는 이 내용이 지적하는 문제를 충분히 이해하셨으리라 믿습니다.

사례 1: 함수에 이것이 있지만 상위 개체에서 호출되지 않는 경우, 여기서 설명해야 할 것은 엄격한 기준에 있다는 것입니다. js 버전은 창을 가리키지는 않지만 여기서는 엄격한 버전에 대해 논의하지 않습니다. 더 알고 싶다면 온라인으로 검색할 수 있습니다.

사례 2: 함수에 this가 있고 이 함수가 상위 개체에 의해 호출되면 this는 상위 개체를 가리킵니다.

사례 3: 함수에 이것이 있으면 이 함수에는 여러 개체가 포함됩니다. 비록 이 함수가 가장 바깥쪽 개체에 의해 호출되지만 이는 상위 수준 개체만 가리킨다는 것을 예 3에서 증명할 수 있습니다. 믿을 수 없다면 계속해서 몇 가지 예를 살펴보겠습니다.

var o = {
a:10,
b:{
// a:12,
fn:function(){
console.log(this.a); //undefined
}
}
}
o.b.fn();

객체 b에 a 속성이 없지만 이 속성도 객체 b를 가리킵니다. 왜냐하면 상위 항목만 가리키기 때문입니다. 이 객체에 원하는 것이 있는지 여부에 관계없이 수준 객체입니다.

또 다른 특별한 경우가 있습니다. 예 4:

var o = {
a:10,
b:{
a:12,
fn:function(){
console.log(this.a); //undefined
console.log(this); //window
}
}
}
var j = o.b.fn;
j();

여기서 이것은 window 를 가리킵니다. 조금 혼란스러워? 사실, 문장을 이해하지 못했기 때문이기도 하고, 이것도 중요합니다.

이는 항상 마지막으로 호출한 개체, 즉 실행 시 호출한 사람을 가리킵니다. 예제 4에서는 fn에 값이 할당되면 함수 fn이 개체 b에 의해 참조됩니다. 변수 j가 주어지면 실행되지 않으므로 최종적으로 window를 가리킨다. 이는 fn을 직접 실행하는 예제 3과 다르다.

사실은 똑같지만 상황에 따라 다른 점을 지적하게 됩니다. 위의 요약에는 약간의 오류가 있어 오류라고 할 수는 없습니다. 상황은 환경에 따라 다르기 때문에 한 번에 명확하게 설명할 수 없고 천천히 경험할 수밖에 없습니다.

이것의 생성자 버전:

function Fn(){
this.user = "追梦子";
}
var a = new Fn();
console.log(a.user); //追梦子

객체 a가 함수 Fn에서 사용자를 지적할 수 있는 이유는 new 키워드가 this의 요점을 변경하고 이것을 객체 a를 가리킬 수 있기 때문입니다. 왜 a가 객체라고 말하는 걸까요? 객체 인스턴스 이 문장을 이해하려면 예제 3을 생각하면 됩니다. 여기서는 변수 a를 사용하여 Fn의 인스턴스를 생성합니다(이때 Fn의 복사본을 객체 a에 복사하는 것과 같습니다). 이 함수 Fn을 호출하는 객체는 객체 a이므로 당연히 객체를 가리키는데 Fn 객체에 사용자가 있는 이유는 무엇입니까? new 키워드는 주문한 키워드를 복사하는 것과 같습니다.

위 내용 외에도 this의 point를 직접 변경할 수도 있습니다. this의 point를 변경하는 방법에 대한 자세한 내용은 JavaScript의 호출, 적용, 바인딩 메소드 요약을 참조하세요. 이 문서에서는 포인터를 수동으로 변경하는 방법을 자세히 설명합니다.

위 내용은 자바스크립트에서 _javascript 스킬을 가리키는 것을 유연하게 이해한 내용이며, 더 많은 관련 내용은 PHP 중국어 홈페이지(m.sbmmt.com)를 참고해주세요!