> 웹 프론트엔드 > JS 튜토리얼 > JavaScript의 익명 함수란 무엇입니까? 애플리케이션 시나리오에 대한 간략한 분석

JavaScript의 익명 함수란 무엇입니까? 애플리케이션 시나리오에 대한 간략한 분석

青灯夜游
풀어 주다: 2022-08-04 13:10:36
앞으로
2382명이 탐색했습니다.

익명함수는 이름 그대로 이름이 없는 함수를 의미하며, 실제 개발에서도 매우 자주 사용되며, JS를 잘 배우는 데에도 중점을 두고 있습니다. 다음 글에서는 JavaScript의 익명 함수에 대해 자세히 소개하겠습니다. 도움이 되기를 바랍니다.

JavaScript의 익명 함수란 무엇입니까? 애플리케이션 시나리오에 대한 간략한 분석

익명함수: 실제 이름이 없는 함수.

먼저 일반 함수를 선언합니다:

//声明一个普通函数,函数的名字叫fn
function fn(){
    console.log("web-chubby");
}
로그인 후 복사

그런 다음 함수 이름을 제거하여 익명 함수가 됩니다.

//匿名函数,咦,运行时,你会发现报错啦!
function (){
    console.log("web-chubby");
}
로그인 후 복사

이 시점에서 익명 함수만 실행하면 오류가 보고된다는 것을 알 수 있습니다. 문법 요구 사항을 충족하지 않습니다!

JavaScript의 익명 함수란 무엇입니까? 애플리케이션 시나리오에 대한 간략한 분석

해결책: 익명 함수를 괄호로 묶어 표현식으로 만드세요.

//匿名函数在其它应用场景括号可以省略
(function (){
    //由于没有执行该匿名函数,所以不会执行匿名函数体内的语句。
    console.log("web-chubby");
})
로그인 후 복사

익명 함수를 실행하고 사용하는 방법은 무엇인가요?

1. 익명 함수 실행

익명 함수를 실행해야 하는 경우 익명 함수 뒤에 괄호만 추가하면 됩니다. 즉, 즉시 함수를 실행합니다.

  • 괄호는 익명 함수만 감싸고 다음을 따릅니다. 실행 괄호(일반적으로 사용됨)

(function () {
      alert('匿名函数执行方式一')
})();
로그인 후 복사
  • 괄호는 익명 함수와 익명 함수를 실행하는 괄호를 래핑하여 전체 표현식을 형성합니다

2 익명 함수 매개변수 전달

및 기타 일반 함수 전달 매개변수 매개변수 방법은 동일합니다. 괄호 안에 매개변수를 직접 작성하면 됩니다.

 (function (m) {
      alert(m)
    }('这是匿名函数传进来的参数'));
로그인 후 복사

익명 함수의 적용

  • 이벤트 바인딩 시 방법

<input type="button" value="点我啊!" id="sub">
<script>
    //获得按钮元素
    var sub=document.querySelector("#sub");
    //给按钮增加点击事件。
    sub.onclick=function(){
        alert("当点击按钮时会执行到我哦!");
    }
</script>
로그인 후 복사
  • 함수 표현식은 익명 함수를 다음에 할당합니다. 변수

//将匿名函数赋值给变量fn。
var fn=function(){
    return "我是一只小小小小留下,怎么飞也飞不高!"
}
//调用方式与调用普通函数一样
console.log(fn());//我是一只小小小小留下,怎么飞也飞不高!
로그인 후 복사
  • object

var obj={
    name:"web-chubby",
    age:18,
    fn:function(){
        return "我叫"+this.name+"今年"+this.age+"岁了!";
    }
};
console.log(obj.fn());//我叫web-chubby今年18岁了!
로그인 후 복사
  • 콜백 함수의 함수 속성, 익명 함수를 매개변수 중 하나로 사용

 //过滤出值为9的值
    let numArr = [1, 5, 9, 10]
    let newArr = numArr.filter(function (item) {
      if (item !== 9) {
        return item
      }
    });
로그인 후 복사
  • 함수는 값을 반환합니다. 함수가 반환 값으로 사용됩니다

//将匿名函数作为返回值
function fn(){
    //返回匿名函数
    return function(){
        return "web-chubby";
    }
}
//调用匿名函数
console.log(fn()());//web-chubby
//或
var box=fn();
console.log(box());//web-chubby
로그인 후 복사

블록 수준 범위를 모방합니다

일부에서는 프라이빗 범위라고도 불리는 블록 수준 범위입니다. JavaScript에는 블록 수준 범위가 없습니다. 예:

if(1==1){//条件成立,执行if代码块语句。
    var a=12;//a为全局变量
}
console.log(a);//12
for(var i=0;i<3;i++){
    console.log(i);
}
console.log(i);//4
로그인 후 복사

if(){}for(){} 등에는 자체 범위가 없습니다. 자신의 범위를 벗어나면 선언된 변수는 즉시 삭제됩니다. 하지만 익명 함수를 통해 블록 수준 범위를 시뮬레이션할 수 있습니다.

(function(){
    //这里是我们的块级作用域(私有作用域)
})();
로그인 후 복사

블록 수준 범위를 사용해 보세요.

function fn(){
    (function(){
        var la="啦啦啦!";
    })();
    console.log(la);//报错---la is not defined
}
fn();
로그인 후 복사

익명 함수의 역할:

1 클로저는 나중에 익명 함수를 통해 구현할 수 있습니다. 설명에 집중하세요. 여기서 간단히 소개하자면, 클로저는 함수 범위 내에 정의된 변수에 액세스할 수 있는 함수입니다. 클로저를 생성하려면 익명 함수를 사용해야 하는 경우가 많습니다.

2. 블록 수준 범위를 시뮬레이션하고 전역 변수를 줄입니다. 익명 함수를 실행한 후에는 메모리에 저장된 해당 변수가 소멸되어 메모리가 절약됩니다. 또한 대규모 다중 사용자 개발 프로젝트에서 블록 수준 범위를 사용하면 이름 충돌 문제가 크게 줄어들어 치명적인 결과를 피할 수 있습니다. 개발자는 더 이상 전역 범위를 망칠까 봐 걱정할 필요가 없습니다.

【관련 권장 사항: javascript 학습 튜토리얼

위 내용은 JavaScript의 익명 함수란 무엇입니까? 애플리케이션 시나리오에 대한 간략한 분석의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:csdn.net
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿