JavaScript 함수 범위와 이 포인터에 대한 자세한 소개

아래 편집기를 사용하면 js 기능의 범위와 포인터에 대한 심층적인 이해를 얻을 수 있습니다. 편집자님이 꽤 좋다고 생각하셔서 지금 공유하고 모두에게 참고용으로 드리고자 합니다. 편집기를 따라가서 살펴보겠습니다.

함수의 범위와 이 포인터는 js에서 매우 중요한 부분입니다. 이를 명확히 하려면 논리가 필요합니다. 내 논리가 어떻게 보이는지 살펴보겠습니다...

다음 개요는 관심있는 항목을 직접 선택하여 읽을 수 있습니다.

• 함수 정의 방식: 직접 정의(창 아래, 내부 정의), 객체 방식, 객체 프로토타입 방식

• 함수 호출 방식: 직접 호출, 호출/적용, with

• 직접 정의의 범위; 함수와 객체 메소드는 기본적으로 정의된 위치의 범위 체인입니다.

• 직접 정의된 함수의 경우 이는 창을 가리킵니다.

• 객체 메서드의 경우 이는 인스턴스화된 객체를 가리킵니다(인스턴스화된 객체가 기본적으로 이를 반환하는 경우에 해당).

• 메소드의 this 포인터를 변경하려면 call/apply를 사용하세요.

• 함수나 메소드를 정의할 때 with를 통해 범위 체인을 변경할 수 있습니다.

아래에서 자세히 이야기해보겠습니다.

함수 정의는 개요에서 언급한 것처럼 직접 정의(창 아래, 내부 정의), 객체 메서드(또는 객체 프로토타입) 두 가지 유형으로 나눌 수 있습니다. 방법) ). 아래 샘플 코드를 보면 fn1, fn2 함수와 객체의 메소드 doFunction이 사용되는 것을 볼 수 있습니다. 함수가 name을 사용하는 경우 name의 값은 해당 필드에서 가져옵니다.

var name = &#39;window下的name<br/>&#39;;
var resultCon;
function fn1() {
  resultCon.innerHTML += name;
}

function MyObj() {
  var name = &#39;MyObj下的name<br/>&#39;;
  this.doFunction = function() {
    resultCon.innerHTML += name;

name 값을 사용할 때 "name"이 "this.name"으로 바뀌면 어떻게 되나요? 다음 예를 참조하세요.

var name = &#39;window下的name<br/>&#39;;
var resultCon;
function fn1() {
  resultCon.innerHTML += this.name;
}

function MyObj() {
  var name = &#39;MyObj下的name<br/>&#39;;
  this.doFunction = function() {
    resultCon.innerHTML += this.name;

결과에서 개요를 확인할 수 있습니다. 4와 5를 보면, 이것과 범위가 각각의 가변 쿼리 로직을 따르는 두 개의 별도 체인 세트라는 것을 알 수 있습니다. 구체적인 쿼리 로직은 아래 성능 분석에서 언급될 것입니다. 초보자라면 읽어보는 것이 좋습니다. 먼저 "js 범위 체인"에 대한 기본 지식에 대해 이야기하겠습니다.

함수 호출 방법과 관련하여 다음 예를 사용하여 개요의 항목 2와 6을 설명합니다.

var name = &#39;window下的name<br/>&#39;;
var resultCon;
function fn1() {
  resultCon.innerHTML += this.name;
}

function MyObj() {
  var name = &#39;MyObj下的name<br/>&#39;;
  this.doFunction = function() {
    resultCon.innerHTML += this.name;

호출할 때 호출 및 적용을 사용하는 것은 호출된 함수의 this 포인터를 변경하는 것입니다. with를 사용하면 호출된 함수에서 변수의 쿼리 도메인을 변경할 수 있습니다. 위의 예에서는 호출 전에 이를 제거하고 with를 추가하여 with의 기능을 보여줍니다.

var name = &#39;window下的name<br/>&#39;;
var resultCon;
function fn1(myScope) {
  with (myScope) {
    resultCon.innerHTML += name;
  }
}

function MyObj(myScope) {
  var name = &#39;MyObj下的name<br/>&#39;;

with 사용이 불편하다고 보니까, 호출되는 함수에 with를 추가해야 하는데, 호출되는 함수를 변경하지 않고 변수 범위를 전체적으로 변경하려면 다음과 같이 호출할 수 있지 않을까 하는 분들도 계실 겁니다. ?

with (myScope) {
  fn1();
  fn2();
  var obj = new MyObj();
  obj.doFunction();
}

미안해요, 안돼요! 따라서 일부 성숙한 프레임워크에서는 호출 및 적용을 사용할 수 있지만 with는 거의 사용되지 않습니다. JSHint를 사용하여 js 구문을 감지하는 경우 일부 js 코딩 지침에서는 with를 사용하는 것이 좋습니다. 변수의 기본 쿼리 체인을 변경하면 나중에 관리자에게 혼란을 줄 수 있고 일부 성능 고려 사항이 있으므로 주의해서 사용하세요.

위 내용은 JavaScript 함수 범위와 이 포인터에 대한 자세한 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!