자바스크립트 작동 메커니즘에 대한 자세한 소개_기본지식

WBOY
풀어 주다: 2016-05-16 17:01:18
원래의
1312명이 탐색했습니다.

이것은 객체 지향 언어에서 중요한 키워드입니다. 이 키워드의 사용법을 이해하고 숙달하는 것은 코드의 견고성과 아름다움에 매우 중요합니다. JavaScript의 이것이 Java 및 C#과 같은 순수 객체지향 언어와 다르기 때문에 더욱 혼란스럽고 혼란스럽습니다.

다음 상황에서 사용됩니다:
1. 순수 함수
2. 객체 메서드 호출
3. 생성자 호출에 new 사용
4. 호출/적용
6. 이벤트 바인딩

1. 순수 기능

코드 복사 코드는 다음과 같습니다.
var name = 'this is window'; //정의 창의 이름 속성
function getName(){
console.log(this); //콘솔 출력: Window //이것은 전역 객체-창 객체를 가리킵니다
console.log( this.name); //콘솔 출력: 이것은 window /


getName()


실행 결과 분석: 순수 함수에서는 모두 전역 개체, 즉 창을 가리킵니다.

2.객체 메소드 호출


var name = 'this is window'; //this.name이 호출되는지 확인하기 위해 window의 name 속성을 정의합니다.
var testObj = {
name:'this is testObj',
getName: function(){
console.log(this); //콘솔 출력: testObj //this는 testObj 객체를 가리킵니다.
console.log(this.name) //콘솔 출력: this testObj입니다
}
}

testObj.getName()


실행 결과 분석: 호출된 메서드에서 이는 모두 메서드를 호출한 개체를 가리킵니다.

3. 생성자를 호출하려면 new를 사용하세요.

function getObj(){
console .log( this); //콘솔 출력: getObj{} //이
}

new getObj()


가 가리키는 새로 생성된 getObj 객체
실행 결과 분석: 새 생성자의 이는 새로 생성된 개체를 가리킵니다.

4. 내부 기능

var name = "this is window"; //정의 윈도우의 name 속성, this.name이 호출되는지 확인하세요.
var testObj = {
name: "this is testObj",
getName:function(){
//var self = this; //이 개체를 임시로 저장
var handler = function(){
console.log(this) //콘솔 출력: Window //이것은 전역 개체를 가리킵니다.-window 개체
console.log(this.name); //콘솔 출력: 이것은 window
//console.log(self); //testObj 객체에 대한 포인트를 얻을 수 있습니다.
🎜> }
}

testObj.getName()



실행 결과 분석: 내부 함수의 이 항목은 여전히 ​​전역 개체, 즉 창을 가리킵니다. 이는 일반적으로 JavaScript 언어의 설계 오류로 간주됩니다. 왜냐하면 아무도 내부 함수에서 이것이 전역 객체를 가리키는 것을 원하지 않기 때문입니다. 일반적인 처리 방법은 위 코드와 같이 일반적으로 that 또는 self로 합의된 변수로 저장하는 것입니다.
5. 통화/신청 이용


코드 복사

코드는 다음과 같습니다

var name = 'this is window'; //this.name이 호출되는지 확인하기 위해 window의 name 속성을 정의합니다.
var testObj1 = {
name : 'this is testObj1',
getName:function(){
console.log(this); //콘솔 출력: testObj2 //testObj2 객체를 가리킵니다.
console.log(this.name); 이것은 testObj2입니다
}
}

var testObj2 = {
name: 'this는 testObj2입니다'
}

testObj1.getName.apply(testObj2) ;
testObj1.getName.call(testObj2)

참고: apply는 두 번째 매개변수가 다르다는 점을 제외하면 call과 유사합니다.
[1] call( thisArg [, arg1, arg2,... ] ) // 두 번째 매개변수는 다음을 사용합니다. 매개변수 목록: arg1 , arg2,...
[2] apply(thisArg [, argArray] ); //두 번째 매개변수는 매개변수 배열을 사용합니다: argArray
실행 결과 분석: 호출을 사용하는 함수에서 / 바인딩 결정 개체에 포인트를 적용합니다.

6. 이벤트 바인딩
이벤트 메소드에서 가장 헷갈리는 부분이 바로 이 부분인데, 대부분의 오류가 여기서 발생합니다.

코드 복사 코드는 다음과 같습니다.

//페이지 요소에 바인딩
< ;script type="text/javascript">
function btClick(){
console.log(this); //콘솔 출력: Window //이것은 전역 객체를 가리킵니다. --window 객체
}  
 
   
  ;

코드 복사 코드는 다음과 같습니다.
//js의 바인딩 방법 (1)






코드 복사

코드는 다음과 같습니다.//js의 바인딩 방법(2)







코드 복사
코드는 다음과 같습니다.


//js의 바인딩 방법 (3)

>
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿
회사 소개 부인 성명 Sitemap
PHP 중국어 웹사이트:공공복지 온라인 PHP 교육,PHP 학습자의 빠른 성장을 도와주세요!