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

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

青灯夜游
青灯夜游앞으로
2022-08-04 13:10:362390검색

익명함수는 이름 그대로 이름이 없는 함수를 의미하며, 실제 개발에서도 매우 자주 사용되며, 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으로 문의하시기 바랍니다. 삭제