> 웹 프론트엔드 > JS 튜토리얼 > 이 변수는 자바스크립트에서 어떻게 사용되나요?

이 변수는 자바스크립트에서 어떻게 사용되나요?

伊谢尔伦
풀어 주다: 2017-07-18 09:43:46
원래의
1288명이 탐색했습니다.

이 변수는 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 변수 범위에는 "전역 변수는 창 개체의 속성"이라는 규칙이 있습니다. 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의 사용법은 호출과 거의 동일하지만 한 가지 차이점만 적용됩니다. 첫 번째 매개변수는 호출과 동일하고 두 번째 매개변수는 반드시 매개변수여야 합니다. 배열에서 요소는 함수의 형식 매개변수에 해당합니다.

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

var one = document.getElementByIdx( 'one' ); 
one.onclick = function(){ 
alert( this.innerHTML ); //this指向的是one元素,这点十分简单.. 
};
로그인 후 복사

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

위 내용은 이 변수는 자바스크립트에서 어떻게 사용되나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿