Javascript 클로저 및 함수 커링에 대한 간략한 분석(그래픽 튜토리얼)
- 亚连원래의
- 2018-05-21 09:38:141031검색
이 글은 주로 자바스크립트 클로저와 커링을 소개하고 있어 이해하기 쉽고 도움이 필요한 친구들이 참고할 수 있습니다.
클로저와 커링은 JavaScript에서 일반적으로 사용되는 비교적 고급 기술입니다. 모든 함수형 프로그래밍 언어는 이 두 가지 개념을 지원합니다. 따라서 JavaScript의 함수형 프로그래밍 기능을 최대한 활용하려면 다음 사항을 이해해야 합니다. 실제로 클로저(closure)는 커링에 없어서는 안 될 기초입니다.
1. 커링의 개념
컴퓨터 과학에서 커링은 여러 매개변수를 받는 함수를 단일 매개변수(원래 함수의 첫 번째 매개변수)를 받는 함수로 변환하고, 받은 함수를 반환하는 것입니다. 나머지 매개변수를 사용하여 결과를 반환하는 새로운 함수의 기술입니다. 이 기술은 Moses Schnfinkel과 Gottlob Frege가 발명했지만 논리학자 Haskell Curry의 이름을 따서 Christopher Strachey가 명명했습니다. 직관적으로 커링은 "일부 매개변수를 수정하면 나머지 매개변수를 허용하는 함수를 얻게 된다"고 말합니다. 따라서 두 개의 변수가 있는 함수 yx의 경우 y = 2가 고정되어 있으면 하나의 변수가 있는 함수 2x를 얻습니다.
커링이란 간단한 함수를 얻기 위해 함수의 일부 매개변수를 미리 전달하는 것입니다. 하지만 미리 전달된 매개변수는 클로저에 저장되기 때문에 몇 가지 특이한 특징이 있을 것입니다. 예를 들면 다음과 같습니다.
var adder = function(num){
return function(y){
return num + y;
}
}
var inc = adder(1);
var dec = adder(-1)
여기의 inc/dec 변수는 실제로 다음 예의 사용법과 같이 대괄호를 통해 호출할 수 있는 두 개의 새로운 함수입니다.
//inc, dec现在是两个新的函数，作用是将传入的参数值(+/-)1 print(inc(99));//100 print(dec(101));//100 print(adder(100)(2));//102 print(adder(2)(100));//102
2. 카레잉 적용
카레링의 특성을 바탕으로 좀 더 흥미로운 코드를 작성할 수 있습니다. 예를 들어 프런트엔드 개발에서 서버에서 요청이 반환되면 특정 페이지를 업데이트해야 하는 경우가 종종 있습니다. 요소, 즉 부분 새로 고침의 개념입니다. 부분 새로 고침을 사용하는 것은 매우 간단하지만 코드가 쉽게 엉망이 될 수 있습니다. 그리고 카레링을 사용하면 코드를 훨씬 더 아름답게 만들고 유지 관리를 더 쉽게 만들 수 있습니다. 예를 살펴보겠습니다.
//update会返回一个函数，这个函数可以设置id属性为item的web元素的内容
function update(item){
return function(text){
$("p#"+item).html(text);
}
}
//Ajax请求，当成功是调用参数callback
function refresh(url, callback){
var params = {
type : "echo",
data : ""
};
$.ajax({
type:"post",
url:url,
cache:false,
async:true,
dataType:"json",
data:params,
//当异步请求成功时调用
success: function(data, status){
callback(data);
},
//当请求出现错误时调用
error: function(err){
alert("error : "+err);
}
});
}
refresh("action.do?target=news", update("newsPanel"));
refresh("action.do?target=articles", update("articlePanel"));
refresh("action.do?target=pictures", update("picturePanel"));
其中，update函数即为柯里化的一个实例，它会返回一个函数，即：
update("newsPanel") = function(text){
$("p#newsPanel").html(text);
}
update("newsPanel")의 반환 값은 함수이고 필수 매개변수는 문자열이므로 새로 고침 Ajax 호출에서 성공하면 콜백 newsPanel 패널을 새로 고치기 위해 서버에서 반환된 데이터 정보를 전달합니다. 다른 기사 패널 articlePanel 및 그림 패널 picturePanel은 이러한 방식으로 새로 고쳐지며 코드의 가독성과 유지 관리성이 향상됩니다.
위 내용은 모두를 위해 제가 정리한 내용입니다. 앞으로 모든 사람에게 도움이 되기를 바랍니다.
관련 기사:
php가 파일에서 로컬 js을 읽는 방법은 무엇입니까?
php 읽기, 쓰기 및 수정 js파일 단계에 대한 자세한 설명
문자열에 대하여( )와 .toString()의 차이점(코드와 결합하면 한눈에 알 수 있음)
위 내용은 Javascript 클로저 및 함수 커링에 대한 간략한 분석(그래픽 튜토리얼)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!