JavaScript에서 이 키워드의 사용에 대한 자세한 설명

이 글에서는 자바스크립트를 시작하기 위한 기본 지식인 자바스크립트에서 이 키워드의 사용법을 주로 소개합니다. 필요한 친구들은 참고하면 됩니다.

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

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

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

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

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

함수

먼저 “함수”를 살펴보겠습니다.

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

이 함수는 이 Who입니다.

전체적으로 정의된 함수, 함수의 소유자는 현재 페이지, 즉 창 개체입니다.

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

따라서 함수 이름을 통해 직접 호출할 수도 있고, 이때는 윈도우 메소드 이름을 통해 호출할 수도 있습니다. 메소드에서 키워드는 소유자인 window 객체를 가리킵니다.

window의 도입 속성을 보면 다음과 같은 결과를 얻을 수 있습니다.

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

/**
* output:
* function introduce() {
* alert(this.name);
* }
*/

위 코드를 읽은 후 다음을 수행할 수 있습니다. 생각 글로벌 함수는 윈도우 객체의 메소드이고, 글로벌 변수는 윈도우 객체의 속성(이미 Javasript 범위에서 언급됨)이므로 전역 함수에서 this 키워드를 통해 전역 변수에 액세스할 수 있습니다. ?

답은 yes입니다. 소개 기능을 호출하면 저를 Laruence라고 알 수 있습니다.

이벤트 처리 기능

아마도 당신은 이 키워드에 대해 헷갈리시는 분들이 계시는데, 그 이유는 대부분 이벤트 처리 시 함수(메소드)를 사용하기 때문입니다.

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

예를 들어, 이제 이름 입력란의 값을 클릭하면 표시되도록 해야 합니다. "name" 입력 상자에 다음과 같은 코드를 작성하면 됩니다.

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

위 코드는 정상적으로 실행되는데 왜 함수의 this 포인터가 해당 함수를 가리키는 것이 아닌가요? owner? 전역 변수의 소유자가 window 객체라는 뜻 아닌가요?

ㅋㅋㅋ 이 질문이 생각난다면 제 글을 진지하게 읽고 있다는 뜻이겠죠. 처음부터 읽으시면 계속 헷갈리실 겁니다~

그럼요, 위 코드의 경우 showValue가 전역객체에 정의되어 있어서 다음과 같은 경우에만 문제가 발생할 수 있을 것 같습니다.

Js의 모든 것은 객체이고 함수와 메서드도 객체의 속성이라는 것을 알고 있지만 함수에는 실행 가능한 내부 속성이 있습니다. 따라서 위 코드의 경우 프로세서를 onclick에 바인딩할 때. , 이는 실제로 입력 상자 Dom 객체를 name 의 id와 바인딩합니다.

즉, name 입력 상자 객체의 onclick 속성에 showValue 복사 함수를 제공합니다. 이때 onclick을 살펴보겠습니다.

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

그래서 이벤트가 발생하면 이름 입력 상자의 onclick 메서드가 호출되며 이때 this 키워드는 자연스럽게 다음을 가리킵니다.

그런데 아래와 같이 헷갈리는 일이 생기네요. 이렇게 쓰면

function showValue() {
   alert(this.value);
}
<input id="name" type="text" name="name" value="Laruence" onclick="showValue()"/>

가 정상적으로 실행이 안되는데 왜 그럴까요? , 지금은 과제가 아니라 참조이기 때문입니다.

onclick을 작성하는 두 가지 방법에 주목하면 이전 방법에서 다음을 사용했다는 것을 알 수 있습니다.

이전 방법의 경우:

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

둘 사이의 차이점을 반영하여 옆으로 사용할 수도 있습니다. 전자의 경우 할당이고 후자의 경우 참조입니다. 이때 입력 상자의 onclick 속성을 확인하면 다음과 같습니다.

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

차이점이 보이시나요?

alert(dom.onclick);
/**
* output:
* function onclick() {
*  showValue();
* }
*/

이에 대해 말씀드리자면, 흥미로운 예를 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

예:

Function.call에 의해 호출되는 함수의 예:

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'

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

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'

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

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'

따라서 코드를 저장하기 위해 변수를 캐시하려는 경우 올바른 방법은 해당 함수를 호출하는 객체만 저장하는 것입니다.

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'

总之，有一个大原则：谁调用了那个函数，this 就指向谁。

以上就是本章的全部内容，更多相关教程请访问JavaScript视频教程！