javascript 자체 실행 기능의 목적은 무엇입니까?
javascript에서는 언제 사용하시겠습니까?
(function(){
//Bunch of code...
})();
이 부분에 대해서:
//Bunch of code...
이 모든 것은 가변 범위 지정에 관한 것입니다.자체 실행 함수로 선언된 변수는 기본적으로 자체 실행 함수 내에서만 코드화할 수 있습니다.이를 통해 JavaScript 코드의 다른 블록에서 변수가 어떻게 명명되는지에 대한 우려 없이 코드를 작성할 수 있습니다.
예를 들어, Alexander의 코멘트에서 언급되었듯이:
(function() {
var foo = 3;
console.log(foo);
})();
console.log(foo); 로그가 남습니다.3.console.logfoo정의되어 있지 않습니다.
심플.매우 평범해 보여 위안이 됩니다.
var userName = "Sean";
console.log(name());
function name() {
return userName;
}
그러나 고급 문자를 기본 레벨로 변환하는 매우 편리한 Javascript 라이브러리를 페이지에 포함시키면 어떻게 됩니까?
잠깐... 뭐라고요?
내 말은, 만약 누군가가 어떤 악센트가 있는 문자를 입력한다면, 내 프로그램에 영어 문자 A-Z만 입력하길 바란다면?뭐...스페인어 '''와 프랑스어 'é' 문자는 'n'과 'e'의 기본 문자로 변환할 수 있습니다.
그래서 어떤 좋은 사람이 포괄적인 문자 변환기를 써놨어. 내 사이트에 포함시킬 수 있어.나도 끼워줘.
한 가지 문제점은 내 기능과 같은 '이름'이라는 기능이 들어 있다는 것입니다.
이게 바로 충돌입니다.두 함수가 동일한 범위에서 동일한 이름으로 선언되었습니다.우리는 이것을 피하고 싶다.
그래서 어떻게든 코드를 조사해야 합니다.
javascript에서 코드를 스코프하는 유일한 방법은 함수를 랩하는 것입니다.
function main() {
// We are now in our own sound-proofed room and the
// character-converter library's name() function can exist at the
// same time as ours.
var userName = "Sean";
console.log(name());
function name() {
return userName;
}
}
그러면 우리 문제가 해결될지도 몰라.이제 모든 것이 봉인되었으며 개폐 교정기 안에서만 접근할 수 있습니다.
함수에 함수가 있는데...보기엔 이상하지만 완전히 합법적이죠
아, 아, 네.우리 코드가 작동하지 않아요. ★★★★★★★★★★★★★★★★★★userName변수는 콘솔에 에코되지 않습니다.
기존 코드 블록 뒤에 호출을 추가하여 이 문제를 해결할 수 있습니다.
function main() {
// We are now in our own sound-proofed room and the
// character-converter libarary's name() function can exist at the
// same time as ours.
var userName = "Sean";
console.log(name());
function name() {
return userName;
}
}
main();
아니면 전에!
main();
function main() {
// We are now in our own sound-proofed room and the
// character-converter libarary's name() function can exist at the
// same time as ours.
var userName = "Sean";
console.log(name());
function name() {
return userName;
}
}
두 번째 우려 사항:'메인'이라는 이름이 아직 사용되지 않았을 확률이 얼마나 됩니까?
범위를 좀 더 넓혀야겠어또한 main() 함수를 자동으로 실행할 수 있습니다.
이제 자동 실행 기능(또는 자가 실행, 자가 실행 등)에 대해 살펴보겠습니다.
((){})();
그 구문은 매우 어색하다.하지만 효과가 있다.
함수 정의를 괄호로 감싸고 파라미터 목록(다른 세트 또는 괄호!)을 포함하면 함수 호출로 기능합니다.
그럼 코드를 몇 가지 자체 실행 구문과 함께 다시 살펴보겠습니다.
(function main() {
var userName = "Sean";
console.log(name());
function name() {
return userName;
}
}
)();
따라서 대부분의 튜토리얼에서 '익명의 자가 실행' 또는 이와 유사한 용어가 쏟아져 나올 것입니다.
다년간의 전문 개발 후 디버깅을 위해 작성하는 모든 함수에 이름을 붙일 것을 강력히 권장합니다.
문제가 발생했을 때(그리고 문제가 발생할 경우), 브라우저의 역추적을 확인합니다.스택 트레이스내의 엔트리에 이름이 붙어 있는 경우는, 코드의 문제를 좁히는 것이 항상 간단합니다.
엄청 장황하고 도움이 됐으면 좋겠네요!
자기 호출(자동 호출이라고도 함)은 함수가 정의 즉시 실행되는 경우입니다.이것은 핵심 패턴이며 다른 많은 자바스크립트 개발 패턴의 기초가 됩니다.
저는 그 팬입니다.이유는 다음과 같습니다.
- 코드를 최소한으로 유지합니다.
- 행동과 프레젠테이션의 분리를 강요한다.
- 이름 충돌을 방지하는 폐쇄 기능을 제공합니다.
엄청나게 – (왜 좋다고 해야 하나요?)
- 함수의 정의와 실행을 동시에 하는 것입니다.
- 자체 실행 함수가 값을 반환하고 함수를 매개 변수로 다른 함수에 전달하도록 할 수 있습니다.
- 캡슐화에 좋습니다.
- 블록 스코핑에도 적합합니다.
- 네, 모든 .js 파일을 자체 실행 기능으로 묶을 수 있으며 글로벌 네임스페이스 오염을 방지할 수 있습니다.;)
여기 더 있어요.
네임스페이스JavaScript의 스코프는 함수 레벨입니다.
어떤 대답도 암시적인 지구상에 대해 언급하지 않았다니 믿을 수 없다.
(function(){})()constructure는 암묵적인 글로벌로부터 보호되지 않습니다.이것이 저에게 더 큰 관심사입니다.http://yuiblog.com/blog/2006/06/01/global-domination/를 참조하십시오.
기본적으로 함수 블록은 정의한 모든 종속적인 "글로벌 변수"가 프로그램으로 제한되도록 하며 암묵적인 글로벌 정의로부터 사용자를 보호하지 않습니다.JSHint 등은 이 동작으로부터 방어하는 방법에 대한 권장사항을 제공할 수 있습니다.
간결한 【결 the】var App = {}구문은 유사한 수준의 보호를 제공하며 'public' 페이지에 있을 때 기능 블록으로 묶일 수 있습니다.(이 구조를 사용하는 라이브러리의 실제 예는 Ember.js 또는 SproutCore를 참조하십시오.)
private속성은 퍼블릭 프레임워크나 라이브러리를 작성하지 않는 한 다소 과대평가되지만, 구현이 필요한 경우에는 더글라스 크록포드가 좋은 아이디어를 가지고 있습니다.
답을 다 읽었는데 중요한 게 빠졌어, 키스할게자기실행형 어나니머스 함수가 필요한 이유는 크게 2가지입니다.즉, "IIFE(Imediate-Invoked Function Expression)"라고 하면 다음과 같습니다.
- 네임스페이스 관리 향상 (네임스페이스 오염 방지 -> JS 모듈)
- 폐쇄(OOP에서 알려진 사설 클래스 멤버 시뮬레이션)
첫 번째 것은 잘 설명되었습니다.두 번째 예는 다음과 같습니다.
var MyClosureObject = (function (){
var MyName = 'Michael Jackson RIP';
return {
getMyName: function () { return MyName;},
setMyName: function (name) { MyName = name}
}
}());
주의 1: 기능을 할당하지 않았습니다.MyClosureObject게다가 그 함수를 기동했을 때의 결과도 한층 더 커집니다.알다()마지막 줄에
주의 2: Javascript의 함수에 대해 추가로 알아야 할 것은 내부 함수가 함수의 파라미터와 변수에 접근할 수 있다는 것입니다.
몇 가지 실험을 해보겠습니다.
수 MyName를 사용합니다.getMyName과가있있 있있있다다
console.log(MyClosureObject.getMyName());
// Michael Jackson RIP
다음의 순진한 어프로치는 기능하지 않습니다.
console.log(MyClosureObject.MyName);
// undefined
그러나 다른 이름을 설정하여 예상 결과를 얻을 수 있습니다.
MyClosureObject.setMyName('George Michael RIP');
console.log(MyClosureObject.getMyName());
// George Michael RIP
편집: 위의 예에서MyClosureObject 、 is is the the the the the the the the the the the the the the the the the the the the the the the the the the 를 사용하지 않도록 .new는 안 됩니다.
스코프 격리일 수도 있습니다.함수 선언 내부의 변수가 외부 네임스페이스를 오염시키지 않도록 합니다.
물론, JS 구현의 절반에 대해서는 어쨌든 그렇게 될 것입니다.
파라미터가 있고 Bunch of code가 함수를 반환합니까?
var a = function(x) { return function() { document.write(x); } }(something);
. 치의 something, 는 에 되어 있는 에 의해 사용됩니다.asomething는 (루프의 경우) 값이 다양할 수 있으며,a에 새로운 기능이 추가될 때마다 항상 다릅니다.
다음은 익명의 함수를 스스로 호출하는 것이 얼마나 유용한지를 보여주는 확실한 예입니다.
for( var i = 0; i < 10; i++ ) {
setTimeout(function(){
console.log(i)
})
}
★★★★★10, 10, 10, 10, 10...
for( var i = 0; i < 10; i++ ) {
(function(num){
setTimeout(function(){
console.log(num)
})
})(i)
}
★★★★★0, 1, 2, 3, 4...
한 가지 차이점은 함수로 선언한 변수는 로컬이기 때문에 함수를 종료하면 사라지며 다른 코드 또는 동일한 코드의 다른 변수와 충돌하지 않는다는 것입니다.
간단히 말하면: 글로벌(또는 그 이상) 범위의 오염을 방지하는 것입니다.
IIFE(Imediate Regived Function Expressions)는 플러그인, 애드온, 사용자 스크립트 또는 다른 사용자의 스크립트로 동작할 것으로 예상되는 모든 스크립트로 스크립트를 작성하기 위한 베스트 프랙티스입니다.이렇게 하면 정의한 변수가 다른 스크립트에 바람직하지 않은 영향을 미치지 않습니다.
이것은 IIFE 식을 쓰는 다른 방법입니다.저는 개인적으로 다음과 같은 방법을 선호합니다.
void function() {
console.log('boo!');
// expected output: "boo!"
}();
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/void
위의 예에서 IIFE는 효율과 퍼포먼스에도 영향을 미칠 수 있습니다.이는 1회만 실행할 것으로 예상되는 기능이 1회 실행되어 완전히 무효화되기 때문입니다.즉, 함수 또는 메서드 선언이 메모리에 남아 있지 않습니다.
먼저 MDN IIFE에 접속해야 합니다.이것에 관한 몇 가지 포인트는 다음과 같습니다.
- 이는 즉시 호출된 함수 표현입니다.따라서 HTML에서 javascript 파일이 호출되면 이 함수가 즉시 호출됩니다.
- 이것에 의해, IIPE 의 관용어내의 변수에의 액세스나 글로벌 스코프의 오염을 방지할 수 있습니다.
자체 실행 기능은 변수의 범위를 관리하는 데 사용됩니다.
변수의 범위는 변수가 정의되어 있는 프로그램의 영역입니다.
전역 변수는 전역 범위를 가집니다. 전역 변수는 JavaScript 코드의 모든 곳에서 정의되며 스크립트 내의 모든 곳에서, 심지어 함수에서도 액세스할 수 있습니다.반면 함수 내에서 선언된 변수는 함수 본문 내에서만 정의됩니다.로컬 변수이며 로컬 범위를 가지며 해당 기능 내에서만 액세스할 수 있습니다.함수 파라미터도 로컬변수로 카운트되며 함수 본문 내에서만 정의됩니다.
다음과 같이 함수 내부의 글로벌 변수에 액세스할 수 있습니다.또한 함수 본문 내에서는 로컬 변수가 같은 이름의 글로벌 변수보다 우선합니다.
var globalvar = "globalvar"; // this var can be accessed anywhere within the script
function scope() {
alert(globalvar);
var localvar = "localvar"; //can only be accessed within the function scope
}
scope();
따라서 기본적으로 자체 실행 기능을 통해 자바스크립트 코드의 다른 블록에서 변수가 어떻게 명명되는지에 대한 우려 없이 코드를 작성할 수 있습니다.
Javascript의 함수는 1등급 객체이기 때문에 그렇게 정의함으로써 C++나 C#과 같은 "클래스"를 효과적으로 정의할 수 있습니다.
이 함수는 로컬 변수를 정의할 수 있으며 그 안에 함수를 포함할 수 있습니다.내부 함수(효과적인 인스턴스 방식)는 로컬 변수(효과적인 인스턴스 변수)에 액세스할 수 있지만 스크립트의 나머지 부분에서는 분리됩니다.
javascript에서 자체 호출된 함수:
자기 호출 표현은 호출되지 않고 자동으로 호출(시작)됩니다.자기 호출 표현식은 생성된 직후에 호출됩니다.이는 기본적으로 이름 경합을 피하고 캡슐화를 실현하기 위해 사용됩니다.변수 또는 선언된 개체는 이 함수 외부에서 액세스할 수 없습니다.최소화(filename.min) 문제를 피하기 위해 항상 자체 실행 기능을 사용합니다.
(function(){
var foo = {
name: 'bob'
};
console.log(foo.name); // bob
})();
console.log(foo.name); // Reference error
실제로 위의 함수는 이름이 없는 함수식으로 처리됩니다.
함수를 닫거나 열린 괄호로 감싸는 주된 목적은 글로벌 공간이 오염되지 않도록 하는 것입니다.
함수 표현식 내의 변수와 함수는 비공개(즉, 함수 외부에서는 사용할 수 없습니다)가 되었습니다.
간단한 질문: "javascript에서는 언제 사용하시겠습니까?."
저는 @ken_browning과 @sean_holding의 답변을 좋아하지만, 여기에 언급되지 않은 다른 사용 사례가 있습니다.
let red_tree = new Node(10);
(async function () {
for (let i = 0; i < 1000; i++) {
await red_tree.insert(i);
}
})();
console.log('----->red_tree.printInOrder():', red_tree.printInOrder());
여기서 Node.insert는 비동기 작업입니다.
함수 선언 시 async 키워드를 지정하지 않고 wait를 호출할 수 없습니다.나중에 사용하기 위해서 이름 붙여진 함수는 필요 없습니다만, 삽입 호출을 기다릴 필요가 있거나, 그 외의 보다 풍부한 기능(누가 알겠습니까?)이 필요합니다.
이 질문에 대한 답변은 모두 끝난 것 같습니다만, 어쨌든 제 의견을 올리겠습니다.
나는 내가 언제 자기 실행 기능을 사용하는 것을 좋아하는지 안다.
var myObject = {
childObject: new function(){
// bunch of code
},
objVar1: <value>,
objVar2: <value>
}
함수를 사용하면 cleaner 코드의 childObjects 속성 및 속성을 정의할 수 있습니다.예를 들어 일반적으로 사용되는 변수 설정이나 수학 방정식 실행, Oh! 또는 오류 검사 등입니다.이 경우 중첩된 객체 인스턴스화 구문에 한정되지 않습니다.
object: {
childObject: {
childObject: {<value>, <value>, <value>}
},
objVar1: <value>,
objVar2: <value>
}
일반적으로 코딩은 같은 일을 많이 하는 애매한 방법들을 많이 가지고 있는데, "왜 귀찮아?"라는 의문이 들게 한다.그러나 더 이상 기본/핵심 원칙에만 의존할 수 없는 새로운 상황이 계속 발생하고 있습니다.
다음 함수를 사용하여 값을 반환할 수 있습니다.
var Test = (function (){
const alternative = function(){ return 'Error Get Function '},
methods = {
GetName: alternative,
GetAge:alternative
}
// If the condition is not met, the default text will be returned
// replace to 55 < 44
if( 55 > 44){
// Function one
methods.GetName = function (name) {
return name;
};
// Function Two
methods.GetAge = function (age) {
return age;
};
}
return methods;
}());
// Call
console.log( Test.GetName("Yehia") );
console.log( Test.GetAge(66) );IIRC를 사용하면 개인 속성 및 메서드를 만들 수 있습니다.
언급URL : https://stackoverflow.com/questions/592396/what-is-the-purpose-of-a-self-executing-function-in-javascript
'source' 카테고리의 다른 글
| ClipData를 통해 앱을 넘어 노출됩니다.Item.getUri (0) | 2022.09.05 |
|---|---|
| Maven 빌드 컴파일 오류 : goal org.apache.maven을 실행하지 못했습니다.플러그인: maven-compiler-plugin: 3.1: 프로젝트 Maven의 컴파일(기본 컴파일) (0) | 2022.09.05 |
| MySQL 데이터베이스에 안전하게 연결하는 방법 (0) | 2022.09.05 |
| MySQL/MariaDB - 쿼리의 HAVING 부분 내에서 SELECT 쿼리의 필드 값을 덮어씁니다. (0) | 2022.09.05 |
| Java Lombok:@AllArgsConstructor에서 필드 하나를 생략하시겠습니까? (0) | 2022.09.04 |