Javascript 클로저 및 함수 커링에 대한 간략한 분석(그래픽 튜토리얼)-JS 튜토리얼-php.cn

Javascript 클로저 및 함수 커링에 대한 간략한 분석(그래픽 튜토리얼)

亚连

풀어 주다： 2018-05-21 09:38:14

원래의

1052명이 탐색했습니다.

이 글은 주로 자바스크립트 클로저와 커링을 소개하고 있어 이해하기 쉽고 도움이 필요한 친구들이 참고할 수 있습니다.

클로저와 커링은 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은 이러한 방식으로 새로 고쳐지며 코드의 가독성과 유지 관리성이 향상됩니다.

위 내용은 모두를 위해 제가 정리한 내용입니다. 앞으로 모든 사람에게 도움이 되기를 바랍니다.