>  기사  >  웹 프론트엔드  >  JavaScript 함수 고급 학습 및 고급 함수 예제 코드에 대한 자세한 설명

JavaScript 함수 고급 학습 및 고급 함수 예제 코드에 대한 자세한 설명

伊谢尔伦
伊谢尔伦원래의
2017-07-25 13:35:051627검색

익명 함수 및 중첩 함수

JavaScript에서는 이름 없이 함수를 선언할 수 있는데 이를 익명 함수(Anonymouse Function)라고 합니다. 동시에 JavaScript에서는 중첩 함수라고 하는 함수 내부에서 함수를 선언할 수도 있습니다. 중첩 함수의 범위는 전체 상위 함수입니다.

이전 함수 선언 섹션에서는 익명 함수와 중첩 함수의 사용을 살펴보았습니다. 익명 함수에는 이름이 없으므로 컨텍스트를 오염시키는 새 변수를 도입하지 않고 새 변수 범위를 가져오므로 익명입니다. 지구 환경 오염을 방지하기 위해 기능이 자주 사용됩니다.

JavaScript 런타임에는 특별한 전역 환경(전역 객체)이 있습니다. 이 객체는 전역 함수와 변수를 저장하며, 실제 개발에서는 실수로 전역 객체를 사용하는 경우 여러 타사 라이브러리를 사용하는 경우가 많습니다. 변수나 함수 선언은 코드 실행에 혼란을 야기합니다. 예를 들어, 두 개의 js 파일이 차례로 도입되고 각각은 내부 사용을 위해 자체 함수 로그를 정의하며 두 번째로 도입된 함수는 첫 번째 정의를 덮어쓰며 후속 실행에서 로그 함수를 호출하면 문제가 발생하지 않을 수 있습니다. 오류를 유발합니다. 이때 익명 함수를 사용하여 전체 js에서 로직을 래핑하면 이 오류를 피할 수 있습니다. 이 방법은 대부분의 오픈 소스 js 라이브러리에서 사용되었습니다.

(function() { // 匿名函数 
   
 function log(msg) { 
     console.log(msg); 
 } 
   
 // 其他代码 
   
 }()); // 立即执行

위 코드는 간단한 예입니다. 로그 함수의 범위는 이 익명 함수로 제한되며, 익명 함수를 한 쌍의 괄호()로 묶어 함수 표현식을 구성합니다. , 함수가 즉시 실행됨을 나타내는 괄호 쌍이 따라오므로 원래 코드가 정상적으로 실행될 수 있습니다. 그러나 이렇게 선언된 함수, var를 통해 선언된 변수 등은 내부적이므로 익명 함수가 아닌 다른 코드에서는 접근할 수 없습니다. 일부 함수를 인터페이스로 노출해야 하는 경우 다음과 같은 여러 가지 방법이 있습니다.

 var mylib = (function(global) { 
   
 function log(msg) { 
   console.log(msg); 
 } 
   
 log1 = log;  // 法一:利用没有var的变量声明的默认行为,在log1成为全局变量(不推荐) 
   
 global.log2 = log;  // 法二:直接在全局对象上添加log2属性,赋值为log函数(推荐) 
   
 return {  // 法三:通过匿名函数返回值得到一系列接口函数集合对象,赋值给全局变量mylib(推荐) 
    log: log
 }; 
   
 }(window));

High-order Function

함수가 매개변수 또는 반환 값으로 사용되는 경우 이를 JavaScript에서는 상위 함수라고 합니다. 모든 함수는 고차 함수로 사용될 수 있으며, 이는 첫 번째 유형의 함수의 특징이기도 합니다. 아래에서는 이 두 가지 사용 방법을 각각 분석해 보겠습니다.

 function negative(n) { 
   return -n; // 取n的相反值 
 } 
   
 function square(n) { 
   return n*n; // n的平方 
 } 
   
 function process(nums, callback) { 
   var result = []; 
   
   for(var i = 0, length = nums.length; i < length; i++) { 
     result[i] = callback(nums[i]); // 对数组nums中的所有元素传递给callback进行处理,将返回值作为结果保存 
   } 
   
   return result; 
 } 
   
 var nums = [-3, -2, -1, 0, 1, 2, 3, 4]; 
 var n_neg = process(nums, negative); 
 // n_neg = [3, 2, 1, 0, -1, -2, -3, -4]; 
 var n_square = process(nums, square); 
 // n_square = [9, 4, 1, 0, 1, 4, 9, 16];

위 코드는 함수를 다른 함수 프로세스 호출에 매개변수로 전달하는 예를 보여줍니다. 프로세스 함수 구현에서 콜백은 매개변수를 전달한 다음 가져오는 블랙박스로 처리됩니다. 반환 값을 호출한 다음 콜백의 구체적인 구현이 이전에는 명확하지 않았습니다. 20행과 22행이 실행될 때만 콜백은 각각 음수 또는 제곱으로 표현되며, 각 요소에 대해 각각 반대값 또는 제곱값 연산이 수행됩니다.

 function generator() { 
   var i = 0; 
   return function() { 
     return i++; 
   }; 
 } 
   
 var gen1 = generator(); // 得到一个自然数生成器 
 var gen2 = generator(); // 得到另一个自然数生成器 
 var r1 = gen1(); // r1 = 0 
 var r2 = gen1(); // r2 = 1 
 var r3 = gen2(); // r3 = 0 
 var r4 = gen2(); // r4 = 1

위 코드는 함수를 반환값으로 사용하는 예를 보여줍니다. 생성기는 자연수 생성기 함수이고, 반환값은 자연수 생성기 함수입니다. 생성기가 호출될 때마다 익명 함수가 결과로 반환됩니다. 이 익명 함수는 실제로 호출될 때 각 자연수를 차례로 반환합니다.

위 내용은 JavaScript 함수 고급 학습 및 고급 함수 예제 코드에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.