집 >웹 프론트엔드 >JS 튜토리얼 >JS 익명 함수의 개념과 사용법 공유

JS 익명 함수의 개념과 사용법 공유

小云云원래의: 2018-03-19 09:16:481404검색

이 글에서는 주로 JS 익명 함수와 익명 자체 실행 함수의 개념과 사용법을 소개하고, 익명 함수와 익명 자체 실행 함수의 개념, 기능, 응용 시나리오 및 관련 사용 기술을 예제 형식으로 분석해 보기를 바랍니다. 그것은 모두에게 도움이 될 수 있습니다.

1. 익명 함수의 일반적인 시나리오

js의 익명 함수는 매우 일반적인 함수 유형이며 더 일반적인 시나리오는 다음과 같습니다.

<input type="button" value="点击" id="btn">
<script type="text/javascript">
  //匿名函数的第一种情形
  var btn=document.querySelector("#btn");
  btn.onclick=function(){
    // alert("aaaaa");
  }
  //匿名函数的第二种情形
  setInterval(function(){
    // alert("bbbbb");
  }, 1000);
  //匿名函数的第三种情形
  var fun=function(){
    alert("ccccc");
  }
  // fun();
  //匿名函数的第四种情形
  var obj={
    name:"dddd",
    say:function(){
      alert(this.name);
    }
  }
  obj.say();
</script>

위는 익명 함수의 일반적인 사용 시나리오를 보여줍니다. (참고: querySelector는 H5에서 DOM 요소를 찾는 새로운 방법입니다.)

2. 익명 자체 실행 함수

이름에서 알 수 있듯이 익명 자체 실행 함수는 원래 익명 함수이지만 이 함수는 자동으로 다른 요소의 도움 없이 실행됩니다.

<input type="button" value="点击" id="btn">
<script type="text/javascript">
//1，匿名函数的第一种实现方式
(function(data){
  // alert(data);
})("eee");
//2.匿名自执行函数的第二种实现方式
(function(){
  // alert("fff");
}());
//3.匿名自执行函数的第三种实现方式
!function(data){
  // alert(data);
}("hhh");
//4.匿名自执行函数的第四种实现方式
var fun=function(data){
  alert(data);
}("iii");

위의 코드 블록에서 익명 자체 실행 기능을 구현하는 방법에는 일반적으로 네 가지가 있다는 것을 요약할 수 있습니다.

3. 익명 자체 실행 함수의 역할

① 익명 자체 실행 함수의 가장 일반적인 역할은 클로저를 구현하는 것입니다. 클로저의 개념에 대해서는 이후 글에서 자세히 소개하겠습니다. 클로저에 대한 간략한 설명은 다음과 같습니다. 클로저: 클로저는 js의 기능입니다. 클로저를 통해 함수 내부와 외부의 연결을 실현할 수 있으며, 함수의 로컬 변수가 메모리에 항상 존재하도록 할 수 있습니다.

②. 익명 자체 실행 함수를 사용하여 js에서 블록 수준 범위 생성을 시뮬레이션할 수도 있습니다. 즉, 익명 자체 실행 함수를 사용하여 일부 코드를 래핑하면 블록 효과를 얻을 수 있습니다. -레벨 범위를 지정하고 전역 변수의 수를 줄이면 익명 자체 실행 함수의 실행이 완료된 후 변수가 메모리에서 해제되어 메모리가 절약됩니다.

4. 익명 함수 및 익명 자체 실행 함수 요약

익명 함수는 간단히 이름이 없는 함수로 이해될 수 있습니다. 총 4가지 일반적인 시나리오가 있습니다.

익명 자체 실행 함수는 단순히 스스로 실행할 수 있는 익명 함수로 이해하면 됩니다. 익명 자체 실행 함수를 구현하는 방법에는 4가지가 있습니다.

익명의 자체 실행 함수의 역할은 클로저를 사용하고 독립적인 네임스페이스를 만드는 것입니다.

JS 익명 함수의 개념과 사용법 공유

관련 기사