\'with\' 문은 JavaScript에서 유용한 도구인가요, 아니면 문제의 원인인가요?

논란의 여지가 있는 "with" 문: 과연 좋은 일을 할 수 있을까?

Alan Storm의 "with" 문에 대한 발언은 호기심을 불러일으켰습니다. 우리 안에. 그 유용성은 거의 탐구되지 않았지만 잠재적인 함정은 여전히 ​​불분명합니다. 우리는 위험을 피하면서 그 사용법을 조사하고 몇 가지 합법적인 응용 프로그램을 발견했습니다.

"with" 문이 빛나는 곳

"with" 문이 사용되는 한 가지 주목할 만한 용도는 다음과 같습니다. 블록 범위 내에서 변수를 정의합니다. JavaScript에는 블록 범위 변수가 없기 때문에 루프 및 클로저 내에서 범위 지정 문제가 발생하기 쉽습니다.

For 루프 및 "with" 문

다음 코드를 고려하세요.

for (var i = 0; i < 3; ++i) {
  setTimeout(function() {
    alert(num);
  }, 10);
}

이 코드는 루프 카운터 "i"를 비동기적으로 표시하려고 합니다. 그러나 JavaScript는 각 반복마다 새로운 범위를 도입하지 않고 변수 "num"이 세 클로저 모두에서 공유되기 때문에 실패합니다.

"with"를 사용하여 블록 범위 시뮬레이션

ES6가 널리 보급될 때까지 "with" 문을 사용하여 블록을 시뮬레이션할 수 있습니다. 범위:

for (var i = 0; i < 3; ++i) {
  with ({num: i}) {
    setTimeout(function() {
      alert(num);
    }, 10);
  }
}

이 코드는 각 반복에 대해 "num" 속성을 사용하여 별도의 객체를 생성하여 블록 범위 내에서 변수를 효과적으로 격리합니다.

다른 용도 "with"

블록 범위를 시뮬레이션하는 것 외에 "with" 문도 사용할 수 있습니다. for:

• 객체 속성에 편리하게 액세스:

  with (object) {
  property = value;
  }

  로그인 후 복사

• 객체를 통해 반복 속성:

  with (object) {
  for (property in this) {
    // Do something with the property
  }
  }

  로그인 후 복사

피해야 할 함정

"with" 문은 유용할 수 있지만 잠재적인 함정도 있습니다. :

• 우연한 전역 변수 수정: "with" 블록 내에서 "this"를 사용하면 실수로 전역 변수가 수정될 수 있습니다.
• 코드 복잡성 증가: "with"를 과도하게 사용하면 코드를 읽기가 더 어려워지고 유지하세요.
• 브라우저 호환성: 일부 브라우저는 "with"를 완전히 지원하지 않을 수 있습니다.

결론

"with" 문은 블록 범위를 시뮬레이션하고 객체 속성에 편리하게 액세스하는 등 특정 시나리오에서 유용한 도구가 될 수 있습니다. 그러나 코드에 사용하기 전에 잠재적인 단점을 신중하게 고려해야 합니다.

위 내용은 \'with\' 문은 JavaScript에서 유용한 도구인가요, 아니면 문제의 원인인가요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!