클로저 스타일의 차이점은 무엇입니까?

StackOverflow https://stackoverflow.com/questions/6373

  •  08-06-2019
  •  | 
  •  

문제

자바스크립트에는 두 가지 인기 있는 클로저 스타일이 있습니다.내가 처음으로 전화한 건 익명 생성자:

new function() { 
  var code...
}

그리고 인라인 실행 함수:

(function() {
  var code...
})();

그 둘 사이에 행동에 차이가 있습니까?하나가 다른 것보다 "더 나은"가요?

도움이 되었습니까?

해결책

두 경우 모두 함수를 실행하며 유일한 실제 차이점은 표현식의 반환 값과 함수 내부의 "this" 값이 무엇인지입니다.

기본적으로 행동

new expression

사실상 다음과 같습니다.

var tempObject = {};
var result = expression.call(tempObject);
if (result is not an object)
    result = tempObject;

물론 tempObject와 result는 결코 볼 수 없는 임시 값이고(인터프리터의 구현 세부 정보임) "객체가 아님" 검사를 수행하는 JS 메커니즘이 없습니다.

광범위하게 말하면 "new function() { ..}" 메소드는 생성자에 대해 this 객체를 생성해야 하기 때문에 속도가 느려집니다.

즉, 객체 할당이 느리지 않기 때문에 이는 실제적인 차이가 되어서는 안 되며, 핫 코드에서 이러한 코드를 사용해서는 안 됩니다(함수 객체 및 관련 클로저 생성 비용으로 인해).

편집하다:내가 이 일을 하면서 깨달은 한 가지는 tempObject 얻을 것이다 expression의 프로토타입, 예를 들어.(이전에 expression.call) tempObject.__proto__ = expression.prototype

다른 팁

@창:첫 번째도 실행 중입니다.명명된 생성자와 비교해보세요:

function Blah() {
    alert('blah');
}
new Bla();

이것은 실제로 코드를 실행하는 것이기도 합니다.익명 생성자도 마찬가지입니다.

그러나 그것은 질문이 아니었습니다 ;-)

둘 다 코드 블록을 실행하여 클로저를 생성합니다.스타일의 문제로 나는 몇 가지 이유로 두 번째를 훨씬 선호합니다.

처음에는 코드가 실제로 실행될지 즉시 알 수 없습니다.라인 처럼 보인다 그것은 창조 생성자로 실행하는 대신 새 함수를 생성하지만 실제로는 그런 일이 일어나지 않습니다.보이는 대로 작동하지 않는 코드는 피하세요!

또한 (function(){ ... })(); 클로저 범위에 들어가고 나가는 것을 즉시 확인할 수 있도록 멋진 북엔드 토큰을 만드세요.이는 프로그래머에게 범위 변경을 경고하기 때문에 좋으며, 축소 등을 위해 파일의 일부 후처리를 수행하는 경우 특히 유용합니다.

자, 저는 다음과 같은 페이지를 만들었습니다.

<html>
<body>
<script type="text/javascript">
var a = new function() { 
  alert("method 1");

  return "test";
};

var b = (function() {
  alert("method 2");

  return "test";
})();

alert(a);  //a is a function
alert(b);  //b is a string containing "test"

</script>
</body>
</html>

놀랍게도 (어쨌든 나에게는) "방법 1"과 방법 2 모두에 대해 경고했습니다."방법 1"이 경고될 것이라고는 예상하지 못했습니다.차이점은 a와 b의 값이 무엇인지였습니다.a는 함수 자체이고, b는 함수가 반환한 문자열입니다.

두 번째 예에서는 함수를 만든 후 실행합니다.

편집하다:이것은 실제로 사실이 아닙니다.

예, 둘 사이에는 차이점이 있습니다.

둘 다 익명 함수이며 정확히 동일한 방식으로 실행됩니다.그러나 둘 사이의 차이점은 두 번째 경우 변수의 범위가 익명 함수 자체로 제한된다는 것입니다.실수로 전역 범위에 변수를 추가할 가능성은 없습니다.

이는 두 번째 방법을 사용하면 전역 변수 범위를 어수선하게 만들지 않는다는 것을 의미합니다. 이는 이러한 전역 변수 값이 다른 라이브러리에서 사용할 수 있거나 타사 라이브러리에서 사용 중인 다른 전역 변수를 방해할 수 있기 때문입니다. .

예:

<html>
<body>
<script type="text/javascript">

new function() { 
a = "Hello";
alert(a + " Inside Function");
};

alert(a + " Outside Function");

(function() { 
var b = "World";
alert(b + " Inside Function");
})();

alert(b + " Outside Function");
</script>
</body>
</html>

위 코드의 출력은 다음과 같습니다.

안녕하세요 내부 기능
안녕하세요 외부 기능
월드 인사이드 함수

...그러면 'b'가 함수 외부에 정의되지 않았기 때문에 오류가 발생합니다!

따라서 나는 두 번째 방법이 더 좋다고 생각합니다 ...더 안전해!

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top