JavaScript 고급 프로그래밍(3판) 학습 노트 9 js 함수(2부)_기본 지식

그런 다음 기능, 즉 마법의 개체를 살펴보겠습니다.

9. 값으로서의 함수

일반적인 프로그래밍 언어에서는 함수를 값으로 사용하려면 함수 포인터나 프록시 구현을 사용해야 합니다. , 그러나 ECMAScript에서 함수는 일반 객체의 모든 특성을 갖는 객체이며, 자체 속성과 메서드를 갖는 함수 외에도 참조 유형 값으로 사용할 수도 있습니다. 이미 함수를 객체 속성의 값으로 사용했습니다. 예를 들어 함수는 다른 함수의 매개변수나 반환 값으로도 사용될 수 있습니다. 비동기 처리에서는 콜백 함수가 일반적인 사용법입니다.

코드 복사 코드는 다음과 같습니다.

var name = 'linjisong' ;
var person = {name:'oulinhai'};
function getName(){
return this.name;
}
function sum(){
var total = 0 ,
l = 인수.길이;
for(; l; l--)
{
total = 인수[l-1];
return total; >}

// 함수를 형식 매개변수로 사용하여 함수를 호출하는 함수를 정의합니다.
function callFn(fn,arguments,scope){
arguments = Argument []
scope = range || window;
return fn.apply(scope, 인수);
}
// 함수를 실제 매개변수로 사용하여 callFn을 호출합니다.
console.info(callFn( getName));//린지송
console.info(callFn(getName,'',person));//oulinhai
console.info(callFn(sum,[1,2,3,4])) ;//10


함수를 반환 값으로 사용하는 또 다른 일반적인 예를 살펴보세요. 이 예는 원본 책의 5장에 나오는 것입니다:

코드 복사 코드는 다음과 같습니다.

function createComparisonFunction(propertyName) {

return function(object1, object2){
var value1 = object1[propertyName];
var value2 = object2[ propertyName]

if (value1 < value2){
return -1
} else if (value1 > value2 ){
return 1;
} else {
return 0;
}
}

var data = [{이름: "재커리", 나이: 28}, {이름: "니콜라스", 나이: 29 }]

data.sort(createComparisonFunction("name"))
console.info(data[0].name) ; //니콜라스

data.sort(createComparisonFunction ("age"))
console.info(data[0].name) //재커리

10. 클로저(Closure)

클로저는 다른 함수의 범위에 있는 변수에 접근하는 함수입니다. 객체는 함수가 있는 데이터이고, 클로저는 데이터가 있는 함수입니다.

먼저 클로저는 함수이고, 다음으로 클로저는 데이터가 포함된 함수입니다. 반환 값으로 함수의 예를 살펴보겠습니다. 반환되는 것은 익명 함수입니다. 이 익명 함수가 반환되므로 이전 결론에 따라 외부 함수 실행 환경은 다음과 같습니다. 스택에서 튀어나와 소멸되었지만 후속 정렬에서는 createComparisonFunction() 범위의 propertyName이 반환된 익명 함수에서 계속 액세스할 수 있음을 알 수 있습니다. 이는 비록 createComparisonFunction()에 해당하는 실행 환경이 destroy 되지만 이 실행 환경에 해당하는 활성 객체는 소멸되지 않았지만 반환된 익명 함수의 범위 체인에서 객체로 사용됩니다. 즉, 반환된 익명 함수로 구성된 클로저에 포함된 데이터는 다음과 같습니다. 외부 함수의 해당 활동 개체입니다. 외부 함수의 코드가 실행됨에 따라 활성 객체의 속성(즉, 외부 함수에 정의된 변수, 함수 및 형식 매개 변수)이 변경되므로 클로저에 포함된 데이터는 최종적으로 익명 함수로 구성됩니다. 반환된 것은 외부 레이어입니다. 함수 코드 실행이 완료된 후의 활성 개체, 즉 최종 상태입니다.
위 문단을 잘 이해하시고, 또 이해하시길 바랍니다. 이해하기 쉽도록 최선을 다했지만 클로저의 개념은 여전히 ​​다소 추상적입니다. 이 예는 원본 책의 7장에 나와 있습니다.

코드 복사 코드는 다음과 같습니다. function createFunctions(){

var result = new Array()

for (var i=0 ; i < 10; i ){
result[i] = function(){
return i
}
결과 반환;
}

var funcs = createFunctions();
for (var i=0,l=funcs.length; i < l; i ){
console.info(funcs[ i]());// 각 함수는 10을 출력합니다.
}


여기서 클로저에 포함된 데이터는 createFunctions에 해당하는 활성 객체의 최종 상태이므로 createFunctions() 코드가 실행된 후 활성 객체의 속성 i가 10이 되므로 다음은 각각 호출은 모든 함수 출력 10을 반환합니다. 이 문제를 처리하려면 익명 함수 범위를 사용하여 상태를 저장할 수 있습니다.

코드 복사 코드는 다음과 같습니다.

function createFunctions(){
var result = new Array()
for (var i=0; i < 10; i ){
result[ i] = (function(num){
return function(){
return num;
};
})(i)
}
return result; 🎜> }

즉시 호출되는 익명 함수를 사용하여 각 상태를 저장하고(익명 함수에 해당하는 활성 개체에 저장됨) 최종 반환된 함수가 호출되면 닫힐 수 있습니다. through 패키지에 포함된 데이터(해당 익명 함수 활동 개체의 데이터)에 올바르게 액세스되고 출력 결과는 0,1,...9가 됩니다. 물론 이렇게 하면 10개의 클로저가 생성되므로 성능에 더 큰 영향을 미치게 되므로 클로저를 남용하지 않는 것이 좋습니다. 또한 클로저는 다른 실행 환경의 활성 개체를 자체의 일부로 저장하기 때문입니다. 스코프 체인 루프로 인해 메모리 누수가 발생할 수도 있습니다. 클로저에는 효율성과 메모리 측면에서 숨겨진 위험이 있지만 클로저의 기능은 너무 강력합니다. 클로저의 응용 프로그램을 살펴보겠습니다. 먼저 어제 언급한 함수 바인딩 메서드인 바인딩()으로 돌아가 보겠습니다.

(1) 함수 바인딩 및 커링

A. 먼저 다시 한 번 예를 살펴보세요(원본 22장):

코드 복사 코드는 다음과 같습니다.

Hello< ;

"Hello" 버튼을 클릭하면 콘솔에 무엇이 출력되나요? 예상된 이벤트가 아닌 버튼인 것으로 밝혀졌습니다. 그 이유는 버튼을 클릭할 때 핸들러 함수의 내부 속성 this가 버튼 객체를 가리키기 때문입니다. 클로저를 사용하여 이 문제를 해결할 수 있습니다.

코드 복사 코드는 다음과 같습니다.

btn.onclick = function(event){
handler.handleClick(event);//클로저를 형성하고, 객체 핸들러는 함수를 호출하는 사람이고, 함수의 내부 속성은 핸들러 객체를 가리킵니다. 이벤트가 출력됩니다.}

B. 위의 솔루션은 ES5에 새로운 함수 바인딩 메서드인

을 사용합니다.

코드 복사 코드는 다음과 같습니다.

if(!Function.prototype.bind){//bind는 ES5의 새로운 기능입니다. 브라우저에 이 메서드를 추가하면 지원되지 않습니다.
Function.prototype.bind = function(scope){
var that = this;//The function object that 바인딩() 메서드 호출
return function(){
that.apply(scope, 인수);//apply 메서드를 사용하여 해당 함수 개체의 내부 속성을 지정합니다.
}; >};
}
btn.onclick = handler.handleClick.bind( handler);//bind() 메서드를 사용할 때는 하나의 문만 사용하면 됩니다


여기에 추가된 bin() 메소드는 바인딩 중 매개변수를 저장하기 위해 클로저를 생성하는 것이 주요 기술이며, 실제로 함수가 호출될 때 this를 내부 속성으로 사용합니다. 브라우저 자체가 바인딩()을 지원하는지 또는 여기에서 바인딩()이 작동하는지 확실하지 않은 경우 기능 감지의 조건부 판단을 제거하고 메소드 이름을 변경해 볼 수 있습니다.

C. 위 함수에 대해 바인딩() 메소드를 사용할 경우, 바인딩() 호출 시 여러 개의 매개변수를 전달하고 실제로 함수 호출 시 두 번째 매개변수를 매개변수로 사용하는 경우 , 그런 다음 기본 매개변수를 함수에 바인딩할 수 있습니다.

코드 복사 코드는 다음과 같습니다.

if(!Function.prototype.bind){
Function.prototype.bind = function(scope){
var that = this;//bind() 메소드를 호출하는 함수 객체
var args = Array.prototype.slice.call(arguments,1);//두 번째 매개변수부터 시작하는 매개변수 배열
return function(){
var innerArgs = Array.prototype.slice.apply (인수);
that.apply(scope, args.concat(innerArgs));//apply 메소드를 사용하여 해당 함수 객체의 내부 속성 this를 지정하고 바인딩 시 전달된 매개변수를 입력합니다.
};
};
}

D. Currying: 위 바인딩 시 첫 번째 매개변수는 함수 호출 시 내부 속성을 설정하는 데 사용됩니다. 바인딩하는 동안 모두 미리 채워진 매개변수로 사용되는데, 이를 함수 커링이라고 합니다.

코드 복사 코드는 다음과 같습니다.

if(!Function.prototype.curry) {
Function.prototype.curry = function(){
var that = this;//curry() 메서드를 호출하는 함수 객체
var args = Array.prototype.slice.call(arguments) ;//미리 채워진 매개변수 배열
return function(){
var innerArgs = Array.prototype.slice.apply(arguments);//실제 호출 시 매개변수 배열
that.apply(this, args .concat(innerArgs)) ;//apply 메소드를 사용하고 미리 채워진 매개변수를 추가하세요
}
}
}

(2) 클로저 캐시 사용

피보나치 수열을 구현하기 위해 재귀를 사용한 함수도 기억하시나요? 클로저 캐시를 사용하여 다시 작성하세요.

코드 복사 코드는 다음과 같습니다.

var fibonacci = ( function(){//클로저 캐시 사용, 재귀
var 캐시 = [];
function f(n){
if(1 == n || 2 == n){
return 1;
}else{
cache[n] = 캐시[n] || (f(n-1) f(n-2))
return 캐시[n];
}
}
return f;
})();

var f2 = function(n){//클로저 캐시를 사용하지 말고 직접 재귀하세요.
(1 = = n || 2 == n){
return 1;
}else{
return f2(n-1) f2(n-2)
}
} ;

다음은 내 컴퓨터에서 테스트 코드와 실행 결과입니다.

코드 복사 코드는 다음과 같습니다.

var test = function(n){
var start = new Date().getTime()
console.info(fibonacci(n); );
console.info( new Date().getTime() - 시작)

start = new Date().getTime()
console.info(f2(n)) ;
console.info(new Date().getTime() - 시작)
test(10);//55,2,55,2
test(20); //6765,1,6765,7
test(30);//832040,2,832040,643

n 값이 클수록, 캐시 계산을 사용하는 이점. 연습으로 계승을 계산하는 함수를 직접 수정해 볼 수 있습니다.

(3) 블록 수준 범위 모방

ECMAScript에는 명령문 블록이 있지만 해당 블록 수준 범위는 없지만 클로저를 사용하여 블록 수준 범위를 모방할 수 있습니다. , 일반 형식은 다음과 같습니다.

코드 복사 코드는 다음과 같습니다.

(function( ){
//여기에 블록 문이 있습니다
})();

위 패턴은 즉시 호출 함수 표현식이라고도 합니다. jQuery 소스 코드는 이 방법을 사용하여 대규모로 인기를 얻었습니다.
클로저에는 프라이빗 변수와 프라이빗 함수, 모듈 패턴 등을 모방하는 등 흥미로운 응용 분야도 많이 있습니다. 지금은 객체에 대해 깊이 이해한 후에 이에 대한 내용을 살펴보겠습니다.

기능에 관해 먼저 이야기해 보겠습니다. 인터넷에 훌륭한 기사가 많이 있으니 관심이 있으시면 직접 검색해 읽어 보세요. 다음은 "JavaScript Advanced 프로그래밍(3판)" 번역가가 번역한 권장 기사입니다:
명명된 함수 표현식 탐색.

본 웹사이트의 성명

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