JavaScript 함수 식 프로 그래 밍 - 포인트 찍 었 어!!
7399 단어 자바 script함수 식 프로 그래 밍전단
함수 식 프로 그래 밍 에 대해 서 는 '함 수 는 1 등 시민' 이라는 말 을 많이 듣는다.그럼 우 리 는 이 말 을 어떻게 이해 합 니까?
'1 등' 이라는 용 어 는 일반적으로 값 을 묘사 하 는 데 쓰 인 다.그래서 우리 가 '함 수 는 일등 공민' 이 라 고 말 할 때, 즉 함 수 는 값 의 모든 특성 을 가지 고 있 기 때문에, 당신 은 한 값 을 보 는 것 처럼 함 수 를 볼 수 있다.예 를 들 어 숫자 는 JavaScript 에서 1 등 시민 이 고 숫자 가 가 진 특성 도 함수 에 의 해 가지 고 있 습 니 다.
const num = 10;
const fun = function() {
return 10;
}
const a = [10, function() { return 20; } ]
const b = {
name: 'Tony',
age: function() {
return 20;
}
}
10 + (function() { return 20; })(); // 30
const well = function() {
return 10;
}
const good = function() {
return function() {
return 10;
};
}
const fun = function(value) {
return value;
}
const happy = function(func) {
return func(5) * 10;
}
happy(fun); // 50
마지막 두 가 지 는 바로
의 정의 이다. 만약 당신 이 지금 이해 하지 못 해도 상관없다 면 우 리 는 뒷부분 에서 그것 을 이야기 할 것 이다.변수 역할 영역 과 패 킷 닫 기
변수 역할 영역
변수의 역할 영역 과 패 키 지 는 자 바스 크 립 트 의 기초 로 서 함수 식 프로 그래 밍 을 배 우 는 데 매우 중요 하 다. 그것들 을 이해 해야만 우리 가 뒤에 말 하고 자 하 는 고급 함수 와 부분 응용 등 을 더욱 잘 이해 할 수 있다.
변수의 역할 영역 에 대해 알 아야 합 니 다:
: JavaScript 에서 가장 긴 수명 주기 (한 변수의 시간 내 에 일정한 값 을 유지 하 는 지) 의 변 수 를 가지 고 있 으 며 그 변수의 생명 주 기 는 전체 프로그램 을 뛰 어 넘 을 것 입 니 다.globalVariable = 'This is a global variable!';
: 어법 작용 역 은 한 변수의 가시 성과 그 텍스트 표현의 시 뮬 레이 션 값 을 가리킨다.a = 'outter a';
function good() {
a = 'middle a';
return function() {
a = 'inner a';
return 'I am ' + a;
}
}
good(); // I am inner a
PS: 이곳 의 예제 코드 는 단지 공 부 를 위해 서 입 니 다. 코드 를 이해 하기 어렵 게 만 들 기 때문에 이렇게 쓰 지 않 는 것 이 좋 습 니 다.
위의 예 에서 우 리 는 각각 a 변수 에 대해 세 번 의 할당 을 했 습 니 다. 그러면 왜 마지막 으로 우리 가 a 의 값 을 받 은 것 은 'inner a' 이지 다른 것 이 아 닙 니까?
우리 가 성명
a = 'outter a'
을 할 때 프로그램 은 창고 에 a 를 저장 할 공간 을 열 고 good()
함 수 를 실행 할 때 a = 'middle a'
를 성명 했다. 이때 창고 에 있 는 a 의 값 을 수정 하여 'middle a'
로 바 꾸 고 마지막 에 return 문 구 를 실행 할 때 우 리 는 다시 a = 'inner a'
창고 에 있 는 a 의 값 을 수정 하여 'inner a'
로 바 꿀 것 이다.그래서 위의 결 과 를 얻 었 다.같은 변수 에 여러 번 할당 할 때 마지막 으로 얻 은 값 은 사용 할 때 가장 가 까 운 할당 입 니 다.사용 할 때 가장 가 까 운 할당 값 을 찾 으 면 마지막 결 과 를 빠르게 얻 을 수 있 습 니 다.
자 바스 크 립 트 의 동적 역할 영역 을 언급 하면 언급 할 수 밖 에 없다
this
.this
관련 지식 이 많 으 니 나중에 시간 이 있 으 면 다시 자세히 말씀 드 리 겠 습 니 다.지금 우 리 는 this
가 가리 키 는 값 을 호출 자 에 의 해 확정 한 다 는 것 을 기억 합 니 다. 다음 코드 는 다음 과 같 습 니 다.function globalThis() { return this; }
globalThis.call('APPLE'); //=> 'APPLE'
globalThis.call('ORANGE'); //=> 'ORANGE'
폐쇄 하 다
폐쇄 적 이 라 고 하면 많은 사람들 이 골 치 아 플 것 이다. 이것 은 확실히 이해 하기 어 려 운 개념 이지 만 두려워 하지 마라. 그것 은 사실 그렇게 이해 하기 어렵 지 않다.
패키지 정의
패 킷 을 닫 는 것 은 함수 와 이 함 수 를 설명 하 는 문법 환경의 조합 입 니 다.
패 킷 을 닫 는 것 은 사용 할 때 역할 영역 에 의 해 폐쇄 된 변수 와 함수 라 는 것 이다.패 킷 을 닫 으 면 함수 의 인자 와 변 수 를 캡 처 할 수 있 습 니 다.
예 를 들 어:
const fun = function() {
const a = 10;
return function(b) {
return a + b;
}
}
const myFunc = fun(); // myFunc , fun a ,b 。
패 키 지 는 만 들 때 가 아니 라 사용 할 때 만 생 성 됩 니 다.위의 예 와 같이 fun 함수 만 만 만 들 고 마지막 fun () 을 실행 하지 않 으 면 fun 은 폐쇄 라 고 할 수 없습니다.이곳 의 패 키 지 는 fun 이 실 행 될 때 발생 하 는 역할 영역 이 어야 합 니 다. 이 역할 영역 은 fun 안의 변수 와 파 라 메 터 를 캡 처 했 습 니 다.
폐쇄 적 특징
const fun = function() {
return function() {
return 10;
}
}
const myFunc = fun(); // myFunc
const fun2 = function(value) {
return function() {
return value;
}
}
const myFunc2 = fun2('AWESOME'); // myFunc2
myFunc2(); // AWESOME
myFunc2(); // AWESOME myFunc2 ,
const myFunc3 = fun2('HAPPY'); // myFunc3
myFunc3(); // HAPPY
여기 서 my Func 는 엄격 한 의미 에서 하나의 패 킷 이 라 고 할 수 없습니다. 왜냐하면 fun 의 어떠한 변수 나 함수 의 전 삼 도 포착 하지 않 았 기 때 문 입 니 다.한편, my Func 2 는 fun 2 의 전 삼 을 잡 았 기 때문에 닫 힌 가방 입 니 다.
폐쇄 적 소각
패 킷 은 변수의 생명 주 기 를 지속 합 니 다. 수 동 으로 소각 하지 않 으 면 패 킷 안의 변 수 는 메모리 에 계속 존재 합 니 다.예 를 들 어 우리 가 수 동 으로 my Func = null 을 사용 할 때 가방 안의 변 수 를 쓰레기 로 회수 합 니 다.
실 용적 인 폐쇄
이렇게 많은 말 을 했 는데, 너 는 이런 의문 이 있 을 수 있다. 가방 을 닫 는 것 이 정말 유용 하 니?폐쇄 는 일반적으로 어떤 곳 에 사용 합 니까?
* 1. 패 킷 을 닫 고 개인 적 인 방법 을 모 의 하여 공공 함수 가 개인 함수 와 변 수 를 방문 하여 데이터 의 숨 김 과 패 키 징 을 실현 할 수 있 도록 합 니 다.개인 적 인 방법 은 코드 에 대한 접근 을 제한 하고 네 임 스페이스 를 관리 하 는 강력 한 능력 을 제공 하여 비 핵심 코드 가 공공 인터페이스 에 대한 방 해 를 피 할 수 있다.
const Counter = () => {
let count = 0;
const change = (a) => {
count = count + a;
}
return {
increase: () => {
change(1);
},
decrease: () => {
change(- 1);
},
value: () => {
return count;
}
}
}
const func1 = new Counter();
func1.value(); // 0
func1.increase();
func1.value(); // 1
func1.decrease();
func1.value(); // 0
* 2. 하나의 고급 함 수 를 통 해 서로 다른 패 킷 을 생 성하 여 서로 다른 환경 을 저장 하 는 새로운 함 수 를 얻 을 수 있 습 니 다.
아래 의 예 와 같이:
const makeAdder = function(x) {
return function(y) {
return x + y;
}
}
const add5 = makeAdder(5);
const add10 = makeAdder(10);
MakeAdder 는 함수 공장 으로 제 정 된 값 과 그 매개 변 수 를 합 친 함 수 를 만 드 는 데 사 용 됩 니 다.그것 을 통 해 우 리 는 두 개의 새로운 함수 add 5 와 add 10 을 만 들 었 다.add 5 와 add 10 은 모두 폐쇄 입 니 다.그들 은 같은 함수 정 의 를 공유 하고 있 지만 서로 다른 환경 을 저장 하고 있다.add 5 의 환경 에서 x 는 5 이지 만 add 10 에서 x 는 10 이다.
고급 함수
정의.
아래 의 임의의 조건 중 하 나 를 만족 시 키 면 고급 함수 라 고 할 수 있다.
함수
함 수 를 함수 의 매개 변수 로 사용 하면 더욱 유연 한 함 수 를 만 들 수 있 습 니 다.매개 변 수 를 값 에서 함수 로 바 꾸 면 우 리 는 더 많은 가능성 을 얻 을 수 있다.호출 할 때, 우 리 는 서로 다른 함 수 를 전달 함으로써 서로 다른 수 요 를 완성 할 수 있 기 때문이다.
아래 의 예 와 같다.
const finder = function(val, func) {
return val.reduce(function(prev, current) {
return func(prev, current);
});
}
const a = [1, 2, 3, 5, 8];
finder(a, Math.max); // 8
finder(a, Math.min); // 1
finder 함 수 를 사용 할 때 서로 다른 함수 가 들 어 와 서 완전히 다른 결 과 를 얻 었 습 니 다.이것 도 우리 가 '값 이 아니 라 함 수 를 사용 하 라' 고 강조 하 는 이유 다.
함수 로 결 과 를 되 돌려 주 는 함수
함수 로 결 과 를 되 돌려 주 는 함수 로 강력 한 함 수 를 구축 할 수 있 습 니 다.앞에서 말씀 드 렸 던 폐쇄 기억 나 세 요?고급 함수 MakeAdder 를 통 해 우 리 는 add 5 와 add 10 두 개의 새로운 함 수 를 생 성 했 습 니 다.패 킷 을 닫 을 수 있 는 함 수 를 만 들 수 있 습 니 다. 사실은 모두 고급 함수 입 니 다.
여기까지, 첫 번 째 부분의 중점 내용 은 다 말 했다.다음 부분 에서 우 리 는 함수 식 프로 그래 밍 에 남 은 몇 가지 중요 한 부분 을 이야기 할 것 이다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
Thymeleaf 의 일반 양식 제출 과 AJAX 제출텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.