자바스크립트에서 이것의 사용에 대한 자세한 설명

다른 많은 객체 지향 언어와 마찬가지로 JavaScript에도 this 키워드가 있는데, 이 키워드는 함수에서 이 메서드를 호출하는 객체를 가리키는 데 사용됩니다. 실제 프로그래밍에서 이것이 누구를 가리키는지 결정하려면 일반적으로 다음 원칙을 따를 수 있습니다.

• 함수가 Function.call 또는 Function.apply에 의해 호출되는 경우 이는 call/apply의 첫 번째 매개변수를 가리킵니다. 매개변수가 null이거나 정의되지 않은 경우 이는 전역 객체를 가리킵니다(브라우저에서 전역 객체는 창 객체입니다).

• Function.bind에 의해 함수가 호출되면 이는 바인드의 첫 번째 매개변수(메서드가 생성될 때)를 가리킵니다.

• 함수가 개체에 의해 메서드로 호출되면 this는 이 개체를 가리킵니다.

• 함수가 단지 함수로 호출되고 어떤 개체에도 연결되지 않은 경우 이는 전역 변수 창을 가리킵니다.

Function

먼저 "함수"를 살펴보겠습니다:

function introduce() {
   alert("Hello, I am Laruence
");
}

이 함수에서 this 키워드는 누구를 가리키는가?

글로벌하게 정의된 함수의 경우 함수의 소유자는 현재 페이지, 즉 윈도우 객체입니다.

그래서 함수를 따옴표로 묶었습니다. 왜냐하면 전역적으로 정의된 함수는 실제로는 윈도우 객체의 메소드이기 때문입니다.

그래서 함수 이름을 통해 직접 호출하거나, 윈도우 메소드 이름을 통해 호출할 수 있습니다. 이때 메소드의 this 키워드는 소유자인 윈도우 객체를 가리킵니다.

윈도우의 도입 속성을 확인하면 다음과 같은 결과가 나옵니다:

var name = "I am Laruence";
function introduce() {
   alert(this.name);
}
alert(window.introduce);
/**
* output:
* function introduce() {
* alert(this.name);
* }
*/

After 위의 코드를 읽으면 아마도 전역 함수는 창 개체의 메서드이고 전역 변수는 창 개체의 속성(이미 Javasript 범위에서 언급됨)이므로 다음을 통해 전역 변수에 액세스할 수 있다고 생각할 것입니다. 전역 함수에 this 키워드가 있죠?

답은 yes 입니다. Introvert 함수를 호출하면 저를 Laruence라고 알 수 있을 겁니다.

이벤트 처리 함수

아마도 이것에 대해 혼란을 주는 대부분의 이유는 함수에서 가져온 키워드(메서드)는 이벤트 처리 중에 사용됩니다.

<input id="name" type="text" name="name" value="Laruence" />

예를 들어, 이제 "이름" 입력 상자를 클릭하면 이름 입력 상자의 값을 표시해야 합니다. 그러면 다음 코드를 작성할 수 있습니다. :

function showValue() {
   alert(this.value);
}
document.getElementById("name").onclick = showValue;

위 코드는 Normal로 실행되는데 왜 함수의 this 포인터가 항상 함수 소유자를 가리킨다는 뜻이 아닌가요?

하하, 이 질문이 생각난다면 나를 진지하게 바라보고 있다는 뜻입니다. 기사, 그렇지 않으면 처음부터 읽어보는 것이 좋습니다. 그렇지 않으면 읽고 나서도 여전히 혼란스러울 것입니다~

그렇습니다. 위 코드에서는 showValue가 전역 객체에 정의되어 있으므로 onclick 이벤트 바인딩에서만 문제가 발생할 수 있는 것으로 보입니다. 이제 결정해야 할 때입니다.

JS의 모든 것은 객체이고, 함수와 메소드도 속성이라는 것을 알고 있습니다. 그러나 함수에는 실행 가능한 내부 속성이 있습니다. 따라서 위 코드의 경우 onclick을 바인딩하기 전에 실제로는 name이라는 id를 가진 입력 상자 Dom 개체의 onclick 속성에 값을 할당합니다. showValue 함수를 이름 입력 상자 객체의 onclick 속성에 복사합니다. 이때 onclick을 보면:

function showValue() {
   alert(this.value);
}
document.getElementById("name").onclick = showValue;
alert(document.getElementById("name").onclick);
/**
* output
* function showValue() {
* alert(this.value);
* }
*/

그래서 이벤트가 트리거되면 이름 입력 상자의 onclick 메서드가 호출됩니다. 시간이 지나면 this 키워드는 자연스럽게 이름 입력란을 가리키게 됩니다.

그런데 다음과 같은 쓰기 방식이

<span class="kwd">function</span><span class="pln"> showValue</span><span class="pun">()</span><span class="pln"> </span><span class="pun">{</span><br/><span class="pln">   alert</span><span class="pun">(</span><span class="kwd">this</span><span class="pun">.</span><span class="pln">value</span><span class="pun">);</span><br/><span class="pun">}</span><br/><span class="pun"><</span><span class="pln">input id</span><span class="pun">=</span><span class="str">"name"</span><span class="pln"> type</span><span class="pun">=</span><span class="str">"text"</span><span class="pln"> name</span><span class="pun">=</span><span class="str">"name"</span><span class="pln"> value</span><span class="pun">=</span><span class="str">"Laruence"</span><span class="pln"> onclick</span><span class="pun">=</span><span class="str">"showValue()"</span><span class="pun">/></span>

정상적으로 실행되지 않는데 왜 그럴까요?

글쎄요. 과제가 아니라 참조입니다.

onclick을 작성하는 두 가지 방법에 주의를 기울이면 다음을 발견할 수 있습니다. 이전 방법에서는 다음을 사용했습니다.

dom.onclick = showvalue; //没有调用符

이전 방법에서는

onclick = "showvalue()" //有调用符

이 둘 사이의 차이점도 반영할 수 있습니다. 전자의 경우 할당이고 후자의 경우 참조입니다. 이렇게 하면 입력 상자의 onclick 속성을 확인하면 다음과 같은 결과를 얻습니다.

<span class="pln">alert</span><span class="pun">(</span><span class="pln">dom</span><span class="pun">.</span><span class="pln">onclick</span><span class="pun">);</span><br/><span class="com">/**</span><br/><span class="com">* output:</span><br/><span class="com">* function onclick() {</span><br/><span class="com">*  showValue();</span><br/><span class="com">* }</span><br/><span class="com">*/</span>

보시죠? 차이점이 무엇인지 이해가 되시나요?

이 시점에서 IE에서 시도해 볼 수 있는 매우 흥미로운 예가 있습니다.

<img src="xxx" onerror="alert(1);} function hi() { alert(2); " />

이것의 포인팅을 변경하세요

이제 이유를 알았으니 어떻게 할 수 있습니까? 우리가 가리키고 싶은 곳을 가리킨다고요?

위의 이벤트 처리 함수에 대해 다음과 같은 방법으로 작성할 수 있습니다.

dom.onclick = showValue();
dom.onclick = function() { alert(this.value) ;}
<input onclick="alert(this.value);" /> //想想刚才我们的引用,是如何把这句嵌入的.
dom.addEventListener(dom, showValue, false); //ff only

이벤트 처리 함수가 아닌 상황의 경우 적용 또는 호출을 사용하여 이 키워드의 포인터를 변경하세요.

예:

var laruence = {
   name : "laruence",
   age : 26,
   position : "Senior PHP Engineer",
   company : "Baidu.inc"
};
 
function introduce() {
   alert(this.name);
}
 
introduce.call(laruence);

Function.call에 의해 함수가 호출됩니다.

var myObject = {
  sayHello : function() {
    console.log("Hi! My name is " + this.myName);
  },
  myName : "Rebecca"
};
var secondObject = {
  myName : "Colin"
};
myObject.sayHello();         // logs "Hi! My name is Rebecca"
myObject.sayHello.call(secondObject); // logs "Hi! My name is Colin"

함수가 호출됩니다. Function.call이 호출되는 예:

var myName = "the global object",
  sayHello = function () {
    console.log("Hi! My name is " + this.myName);
  },
  myObject = {
    myName : "Rebecca"
  };
var myObjectHello = sayHello.bind(myObject);
sayHello();    // logs "Hi! My name is the global object"
myObjectHello(); // logs "Hi! My name is Rebecca"

객체에 의해 호출되는 함수의 예:

var myName = "the global object",
  sayHello = function() {
    console.log("Hi! My name is " + this.myName);
  },
  myObject = {
    myName : "Rebecca"
  },
  secondObject = {
    myName : "Colin"
  };
myObject.sayHello = sayHello;
secondObject.sayHello = sayHello;
sayHello();        // logs "Hi! My name is the global object"
myObject.sayHello();   // logs "Hi! My name is Rebecca"
secondObject.sayHello(); // logs "Hi! My name is Colin"

깊은 네임스페이스에서 함수를 호출할 때 일반적으로 코드 양을 줄이기 위해 호출할 함수를 가리키는 변수를 캐시합니다. 하지만 그렇게 하면 함수에서 this의 값이 변경되고 궁극적으로 잘못된 작업이 수행됩니다. 예:

var myNamespace = {
  myObject : {
    sayHello : function() {
      console.log("Hi! My name is " + this.myName);
    },
    myName : "Rebecca"
  }
};
var hello = myNamespace.myObject.sayHello;
hello(); // logs "Hi! My name is undefined"

그래서 코드 양을 절약하기 위해 변수를 캐시하려는 경우 올바른 방법은 해당 함수를 호출하는 객체까지만 저장하는 것입니다.

var myNamespace = {
  myObject : {
    sayHello : function() {
      console.log("Hi! My name is " + this.myName);
    },
    myName : "Rebecca"
  }
};
var obj = myNamespace.myObject;
obj.sayHello(); // logs "Hi! My name is Rebecca"

간단히 말하면 큰 원칙이 있습니다. 해당 함수를 호출하면 누구를 가리킬 것입니다.

위 내용은 자바스크립트에서 이것의 사용에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!