이것은 객체 지향 언어에서 중요한 키워드입니다.이 키워드의 사용을 이해하고 마스터하는 것은 코드의 견고성과 아름다움에 필수적입니다. JavaScript의 이것은 Java 및 C#과 같은 객관적인 지향 언어와 다르므로 더 혼란스럽고 혼란 스럽습니다.
이것이 사용하는 것 :
1. 순수한 기능
2. 객체 메소드 호출
3. 새로운 것을 사용하여 생성자를 호출하십시오
4. 내부 기능
5. 전화 / 신청을 사용하십시오
6. 이벤트 바인딩
1. 순수한 기능
다음과 같이 코드 코드를 복사하십시오.
var name = '이것은 창입니다. // 창의 이름을 정의합니다
함수 getName () {
Console.log (this); // 콘솔 출력 //이 점은 글로벌 오브젝트 객체 객체입니다.
Console.log (this.name); // 콘솔 출력 : 이것은 창입니다.
}
getName ();
실행 결과 분석 : 순수한 기능으로는 글로벌 객체, 창을 가리 킵니다.
2. 객체 메소드 호출
다음과 같이 코드 코드를 복사하십시오.
var name = '이것은 창입니다. // 창의 이름 속성을 정의하십시오.
var testobj = {
이름 : '이것은 testobj입니다',
getName : function () {
Console.log (this); // 콘솔 출력 : TestObj // TestObj 개체
Console.log (this.name);
}
}
testobj.getName ();
실행 결과 분석 : 이것은 메소드를 호출하는 객체를 가리 킵니다.
3. 새로운 것을 사용하여 생성자를 호출하십시오
다음과 같이 코드 코드를 복사하십시오.
함수 getObj () {
Console.log (this); // 콘솔 출력 : getobj {} //
}
새로운 getobj ();
실행 결과 분석 : 이것은 새로운 생성자에서 새로 생성 된 객체를 가리 킵니다.
4. 내부 기능
다음과 같이 코드 코드를 복사하십시오.
var name = "이것은 창입니다"; // 창의 이름 속성을 정의하십시오.
var testobj = {
이름 : "이것은 testobj입니다",
getName : function () {
// var seelf = this; //이 개체를 일시적으로 저장합니다
var ahandle = function () {{)
Console.log (this); // 콘솔 출력 //이 점은 글로벌 오브젝트 객체 객체입니다.
Console.log (this.name); // 콘솔 출력 : 이것은 창입니다
//console.log (set); //이 방법으로 얻을 수 있습니다.
}
핸들 ();
}
}
testobj.getName ();
실행 결과 분석 : 이것은 내부 기능에서 여전히 전역 객체 인 창을 가리 킵니다. 그것은 일반적으로 JavaScript 언어에서 설계 오류로 간주됩니다. 왜냐하면 아무도 내부 기능에서 글로벌 객체에이를 가리키고 싶지 않기 때문입니다. 일반적인 처리 방법은 이것을 변수로 저장하는 것이며, 위의 코드에 표시된 것처럼 일반적으로 그 또는 자아에 동의합니다.
5. 전화 / 신청을 사용하십시오
다음과 같이 코드 코드를 복사하십시오.
var name = '이것은 창입니다. // 창의 이름 속성을 정의하십시오.
var testobj1 = {
이름 : '이것은 testobj1입니다',
getName : function () {
Console.log (this); // 콘솔 출력 : testobj2 // testobj2 객체
Console.log (this.name); // 콘솔 출력 : TestObj2입니다
}
}
var testobj2 = {
이름 : '이것은 testobj2입니다'
}
testobj1.getname.apply (testobj2);
testobj1.getname.call (testobj2);
참고 : 적용 및 호출은 비슷하지만이 둘의 두 번째 매개 변수는 다릅니다.
[1] Call (thisarg [, arg1, arg2, ...]);
[2] 적용 (thisarg [, argarray]); // 두 번째 매개 변수는 매개 변수 배열을 사용합니다
실행 결과 분석 : 이것은 통화 / 적용 기능에서 바인딩 객체를 가리키기 위해 사용합니다.
6. 이벤트 바인딩
이벤트 방법 의이 방법은 가장 의심스러운 장소 여야하며, 대부분의 오류는 이것에서 비롯되었습니다.
다음과 같이 코드 코드를 복사하십시오.
// 요소의 바인딩을위한 페이지
<script type = "text/javaScript">
함수 btclick () {
Console.log (this); // 콘솔 출력 //이 점은 글로벌 오브젝트 객체 객체입니다.
}
</스크립트>
<body>
<button id = "btn"onclick = "btclick ();"> 클릭 </button>
</body>
다음과 같이 코드 코드를 복사하십시오.
// JS 바인딩 방법 (1)
<body>
<button id = "btn"> 클릭 </button>
</body>
<script type = "text/javaScript">
함수 btclick () {
console.log (this); // 콘솔 출력 : <버튼 id = "btn"> 클릭 </button> // 요소 버튼 객체
}
getElementById ( "btn").
getElementById ( "btn");
</스크립트>
다음과 같이 코드 코드를 복사하십시오.
// JS 바인딩 방법 (2)
<body>
<button id = "btn"> 클릭 </button>
</body>
<script type = "text/javaScript">
getElementById ( "btn").
console.log (this); // 콘솔 출력 : <버튼 id = "btn"> 클릭 </button> // 요소 버튼 객체
}
getElementById ( "btn");
</스크립트>
다음과 같이 코드 코드를 복사하십시오.
// JS 바인딩 방법 (3)
<body>
<button id = "btn"> 클릭 </button>
</body>
<script type = "text/javaScript">
함수 btclick () {
Console.log (this);
}
getElementById ( "btn"). 메소드 (메소드 메소드) 이벤트 처리에 사용되는 경우.
getElementById ( "btn").
</스크립트>
실행 결과 분석 : 위의 두 가지 일반적인 이벤트 바인딩 방법, 페이지 요소의 이벤트 바인딩 이벤트 방법 외에도 바인딩 이벤트의 ELMENT 요소를 가리 킵니다.