JS에서 이 변수에 대한 간략한 소개

JavaScript에서 이 변수는 매우 강력합니다. 이 기사에서는 JavaScript에서 이 변수의 사용법을 자세히 소개합니다.

JavaScript의 사용법은

JavaScript의 이해하기 어려운 키워드입니다. 이에 대한 관련 지식을 완전히 이해하면
객체 지향 JavaScript 프로그램을 쉽게 작성하는 데 도움이 됩니다.
이 변수의 가장 중요한 점은 이것이 어떤 개체를 참조하는지 명확히 할 수 있다는 것입니다. 어쩌면 많은 정보에는 나름대로 설명이 있지만 일부 개념은 다소 복잡합니다. 내 이해는 다음과 같습니다. 먼저 이것이 위치한 함수가 메소드로 호출되는 객체를 분석한 다음 객체가 참조되는 객체입니다.

예제 1,

코드는 다음과 같습니다.

var obj = {}; 

obj.x = 100; 

obj.y = function(){ alert( this.x ); }; 

obj.y(); //弹出 100

이 코드는 obj.y()가 실행되면 obj 객체의 메소드로 함수가 호출되므로 이 코드는 다음과 같습니다. 함수 본문은 obj 객체를 가리키므로 100이 나타납니다.

예제 2,

코드는 다음과 같습니다.

var checkThis = function(){ 

alert( this.x); 

}; 

var x = 'this is a property of window'; 

var obj = {}; 

obj.x = 100; 

obj.y = function(){ alert( this.x ); }; 

obj.y(); //弹出 100 

checkThis(); //弹出 'this is a property of window'

여기서 '이것은 윈도우의 속성입니다'라는 메시지가 나타나는 이유는 다소 혼란스러울 수 있습니다. JavaScript 변수 범위에는 "전역 변수는

window 개체의 속성입니다"라는 규칙이 있습니다. checkThis()가 실행되면 window.checkThis()와 동일합니다. 따라서 이때 checkThis 함수에서 this 키워드의 지점이 window 객체가 되고, window 객체에는 또 다른 x 속성('thisis')이 있기 때문입니다. a property of window' ), '이것은 window의 속성입니다'라는 팝업이 나타납니다.
위의 두 예는 상대적으로 이해하기 쉽습니다. 현재 함수가 어떤 개체에 의해 호출되는지(어떤 개체에 의해 호출되는) 메소드로 호출되는지만 결정하면 현재 이 변수의 지점을 쉽게 결정할 수 있기 때문입니다.

this.x 및 apply(), call()

call 및 Apply를 통해 함수
의 실행 환경을 다시 정의할 수 있습니다. 즉, 일부 응용 프로그램에서 매우 일반적으로 사용되는 점입니다. 예제 3: call()


코드는 다음과 같습니다.

function changeStyle( type , value ){ 

this.style[ type ] = value; 

} 

var one = document.getElementByIdx( 'one' ); 

changeStyle.call( one , 'fontSize' , '100px' ); 

changeStyle('fontSize' , '300px'); //出现错误，因为此时changeStyle中this引用的是window对象，而window并无style属性。

changeStyle.call()에는 세 가지 매개변수가 있다는 점에 유의하세요. 첫 번째 매개변수는 함수가 호출될 개체를 지정하는 데 사용됩니다. 여기에 하나가 지정되어 있는데, 이는 ChangeStyle 함수가 하나씩 호출된다는 의미이므로 함수 본문의 이 지점이 하나의 개체입니다. 두 번째 및 세 번째 매개변수는changeStyle 함수의 두 가지 형식 매개변수 유형 및 값에 해당합니다. 우리가 보는 가장 일반적인 효과는 Dom 요소 1의 글꼴이 20px이 된다는 것입니다.

예제 4: apply()


코드는 다음과 같습니다.

function changeStyle( type , value ){ 

this.style[ type ] = value; 

} 

var one = document.getElementByIdx( 'one' ); 

changeStyle.apply( one , ['fontSize' , '100px' ]); 

changeStyle('fontSize' , '300px'); //出现错误，原因同示例三

Apply의 사용법은 call과 거의 동일하지만 한 가지 차이점은 apply가 두 개의 매개변수만 허용한다는 것입니다. 호출하고 두 번째 매개변수는 배열이어야 하며 배열의 요소는 함수의 형식 매개변수에 해당합니다.

이것을 의미 없는(이상한) 사용

예 5:


코드는 다음과 같습니다.

var obj = { 

x : 100, 

y : function(){ 

setTimeout( 

function(){ alert(this.x); } //这里的this指向的是window对象，并不是我们期待的obj,所以会弹出undefined 

, 2000); 

} 

}; 

obj.y();

원하는 효과를 얻는 방법

코드는 다음과 같습니다.

var obj = { 
x : 100, 
y : function(){ 
var that = this; 
setTimeout( 
function(){ alert(that.x); } 
, 2000); 
} 
}; 
obj.y(); //弹出100

이것은 이벤트 청취 함수에 있습니다.

코드는 다음과 같습니다.

var one = document.getElementByIdx( 'one' ); 

one.onclick = function(){ 

alert( this.innerHTML ); //this指向的是one元素，这点十分简单.. 

};

참고: js의 전역 변수는 Window의 인스턴스 창에 속성으로 동적으로 추가됩니다.

이것은 js의 키워드입니다. 함수가 다양한 상황에서 사용됨에 따라 이 값이 변경됩니다. 그러나 항상 원칙이 있습니다. 즉, 함수를 호출하는 객체를 참조한다는 것입니다.

1. 순수 함수 호출.


코드는 다음과 같습니다.

function test() { 
this.x = 1; 
alert(x); 
} 
test();

사실 여기는 전역 변수입니다. 다음 예를 보면 실제로 이것이 글로벌 객체인 Global이라는 것을 명확하게 이해할 수 있습니다.

코드는 다음과 같습니다.

var x = 1; 
function test() { 
alert(this.x); 
} 
test();//1 

var x = 1; 
function test() { 
this.x = 0; 
} 
test(); 
alert(x);//0

2. 메소드 호출로 상위 객체를 참조합니다.

코드는 다음과 같습니다.

function test() { 
alert(this.x); 
} 

var o = {}; 
o.x = 1; 
o.m = test; 
o.m(); //1

3.

constructor
라고 합니다. 소위 생성자 함수는 새로운 객체를 생성하는 것입니다. 이때 this는 이 객체를 가리킵니다.
코드는 다음과 같습니다.

function test() { 
this.x = 1; 
} 
var o = new test(); 
alert(o.x);//1

4. 적용 호출

이것은 적용의 첫 번째 매개변수를 가리킵니다.


코드는 다음과 같습니다.

var x = 0; 
function test() { 
alert(this.x); 
} 

var o = {}; 
o.x = 1; 
o.m = test; 
o.m.apply(); //0 
o.m.apply(o);//1

apply에 매개변수가 없으면 전역 객체로 표현됩니다. 따라서 값은 0입니다.

위 내용은 JS에서 이 변수에 대한 간략한 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!