js 애플 리 케 이 션/caller/collee/bid 사용 방법 및 차이 분석

1.콜 방법 은 한 대상 을 호출 하 는 방법 으로 다른 대상 으로 현재 대상 을 교체 합 니 다(사실은 대상 의 내부 지침,즉 대상 의 this 가 가리 키 는 내용 을 바 꾸 는 것 입 니 다).Js 코드 콜([thisObj[,arg 1[,arg 2[,[,.argn]]]]]])인자 thisObj 를 선택 할 수 있 습 니 다.현재 대상 의 대상 으로 사 용 됩 니 다.arg 1,arg 2,argN 옵션 이 있 습 니 다.전달 되 는 방법 매개 변수 시퀀스 입 니 다.콜 방법 을 설명 하면 다른 대상 을 대체 하여 하나의 방법 을 호출 할 수 있다.call 방법 은 함수 의 대상 컨 텍스트 를 초기 컨 텍스트 에서 thisObj 가 지정 한 새로운 대상 으로 변경 할 수 있 습 니 다.thisObj 인 자 를 제공 하지 않 으 면 Global 대상 은 thisObj 로 사 용 됩 니 다.Js 코드

 
<input type="text" id="myText" value="input text"> Code 
function Obj(){this.value="  ！";} 
var value="global   "; 
function Fun1(){alert(this.value);} 
window.Fun1(); //global    
Fun1.call(window); //global    
Fun1.call(document.getElementById('myText')); //input text 
Fun1.call(new Obj()); //  ！ 

Js 코드 코드

 
var first_object = { 
num: 42 
}; 
var second_object = { 
num: 24 
}; 
function multiply(mult) { 
return this.num * mult; 
} 
multiply.call(first_object, 5); // returns 42 * 5 
multiply.call(second_object, 5); // returns 24 * 5 

2.apply 방법 apply 방법의 첫 번 째 매개 변수 도 현재 대상 에 게 전달 해 야 하 는 대상,즉 함수 내부 의 this 입 니 다.뒤의 매개 변 수 는 현재 대상 에 게 전달 되 는 매개 변수 입 니 다.apply 와 call 두 가 지 는 작용 에 있어 서 같 지만 두 가 지 는 매개 변수 에 있어 서 차이 가 있다.첫 번 째 매개 변수 에 대한 의 미 는 같 지만 두 번 째 매개 변수:apply 는 하나의 매개 변수 배열,즉 여러 개의 매개 변 수 를 하나의 배열 로 조합 하여 들 어 오 는 것 이 고,call 은 call 의 매개 변수 로 들 어 오 는 것 입 니 다(두 번 째 매개 변수 부터).예 를 들 어 func.call(func 1,var 1,var 2,var 3)에 대응 하 는 apply 표기 법 은 func.application(func 1,[var 1,var 2,var 3])과 함께 apply 를 사용 하 는 장점 은 현재 함수 의 arguments 대상 을 apply 의 두 번 째 매개 변수 로 직접 전송 할 수 있다 는 것 이다.Js 코드

 
var func=new function(){this.a="func"} 
var myfunc=function(x,y){ 
var a="myfunc"; 
alert(this.a); 
alert(x + y); 
} 
myfunc.call(func,"var"," fun");// "func" "var fun" 
myfunc.apply(func,["var"," fun"]);// "func" "var fun" 

3.caller 속성 은 함수 에 대한 인용 을 되 돌려 줍 니 다.즉,현재 함수 의 함수 체 를 호출 했 습 니 다.functionname.caler:functionName 대상 은 실행 함수 의 이름 입 니 다.설명:함수 에 있어 서 caller 속성 은 함수 가 실 행 될 때 만 정 의 됩 니 다.함수 가 JScript 프로그램의 맨 위 에서 호출 된다 면,caller 에 포 함 된 것 은 null 입 니 다.문자열 컨 텍스트 에 caller 속성 을 사용 하면 결 과 는 functionName.toString 과 마찬가지 로 함수 의 역 컴 파일 텍스트 를 보 여 줍 니 다.Js 코드

 
function CallLevel(){ 
if (CallLevel.caller == null) 
alert("CallLevel was called from the top level."); 
else 
alert("CallLevel was called by another function:
"+CallLevel.caller); 
} 
function funCaller(){ 
CallLevel(); 
} 
CallLevel(); 
funCaller() 

4.callee 속성 은 실행 중인 Function 대상,즉 지정 한 Function 대상 의 본문 을 되 돌려 줍 니 다.[function.]arguments.callee:옵션 function 인 자 는 현재 실행 중인 Function 대상 의 이름 입 니 다.설명:callee 속성의 초기 값 은 실행 중인 Function 대상 입 니 다.callee 속성 은 arguments 대상 의 한 구성원 으로 함수 대상 자체 에 대한 인용 을 표시 합 니 다.이것 은 함수 의 재 귀 또는 함수 의 패 키 징 성 을 확보 하 는 데 유리 합 니 다.예 를 들 어 아래 예제 의 재 귀 는 1 에서 n 의 자연수 의 합 을 계산 합 니 다.이 속성 은 관련 함수 가 실행 중 일 때 만 사용 할 수 있 습 니 다.그리고 주의해 야 할 것 은 callee 가 length 속성 을 가지 고 있 습 니 다.이 속성 은 때때로 검증 에 사용 하 는 것 이 좋 습 니 다.arguments.length 는 실제 인삼 길이 이 고 arguments.callee.length 는 형 삼 길이 이 므 로 호출 시 형 삼 길이 가 실제 인삼 길이 와 일치 하 는 지 판단 할 수 있 습 니 다.Js 코드

 
//callee        
function calleeDemo() { 
alert(arguments.callee); 
} 
//       
function calleeLengthDemo(arg1, arg2) { 
if (arguments.length==arguments.callee.length) { 
window.alert("           ！"); 
return; 
} else { 
alert("    ：" +arguments.length); 
alert("    ： " +arguments.callee.length); 
} 
} 
//     
var sum = function(n){ 
if (n <= 0) 
return 1; 
else 
return n ＋arguments.callee(n - 1) 
} 

5.bind Js 코드

 
var first_object = { 
num: 42 
}; 
var second_object = { 
num: 24 
}; 
function multiply(mult) { 
return this.num * mult; 
} 
Function.prototype.bind = function(obj) { 
var method = this, 
temp = function() { 
return method.apply(obj, arguments); 
}; 
return temp; 
} 
var first_multiply = multiply.bind(first_object); 
first_multiply(5); // returns 42 * 5 
var second_multiply = multiply.bind(second_object); 
second_multiply(5); // returns 24 * 5 

6.JS 클 로 저(Closure)는 이른바'클 로 저'로 많은 변수 와 이 변 수 를 연결 하 는 환경 을 가 진 표현 식(보통 하나의 함수)을 말 하기 때문에 이 변 수 는 이 표현 식 의 일부분 입 니 다.패 킷 에 대해 가장 간단 한 설명 은 ECMAScript 가 내부 함수-즉 함수 정의 와 함수 표현 식 을 다른 함수 의 함수 에 사용 할 수 있 도록 하 는 것 입 니 다.그리고 이 내부 함수 들 은 외부 함수 에서 설명 한 모든 부분 변수,파라미터 와 성명 의 다른 내부 함수 에 접근 할 수 있 습 니 다.이러한 내부 함수 중 하나 가 외부 함 수 를 포함 하 는 것 외 에 호출 되면 패 킷 이 됩 니 다.즉,내부 함 수 는 외부 함수 가 돌아 온 후에 실 행 될 것 이다.이 내부 함수 가 실 행 될 때 외부 함수 의 부분 변수,파라미터 와 다른 내부 함수 에 접근해 야 합 니 다.이러한 부분 변수,파라미터 와 함수 성명(최초)의 값 은 외부 함수 가 돌아 올 때의 값 이지 만 내부 함수 의 영향 을 받 을 수 있 습 니 다.한 마디 로 하면 패 킷 을 닫 는 역할 은 out function 이 실행 되 고 돌아 온 후에 패 킷 을 닫 아서 자 바스 크 립 트 의 쓰레기 회수 메커니즘 인 GC 가 out function 이 차지 하 는 자원 을 회수 하지 않 는 것 이다.out function 의 내부 함수 인 inner function 의 실행 은 out function 의 변 량 에 의존 해 야 하기 때문이다.패 킷 을 닫 는 두 가지 특징:1.함수 변수의 인용-함수 가 돌아 올 때 활성화 상태 에 있 습 니 다.2.하나의 패 킷 은 함수 가 돌아 올 때 자원 을 방출 하지 않 은 스 택 입 니 다.예 1:Html 코드

 
<script type="text/javascript"> 
function setupSomeGlobals() { 
// Local variable that ends up within closure 
var num = 666; 
// Store some references to functions as global variables 
gAlertNumber = function() { alert(num); } 
gIncreaseNumber = function() { num++; } 
gSetNumber = function(x) { num = x; } 
} 
</script> 
<button onclick="setupSomeGlobals()">   - setupSomeGlobals()</button> 
<button onclick="gAlertNumber()">    - gAlertNumber()</button> 
<button onclick="gIncreaseNumber()">   - gIncreaseNumber()</button> 
<button onclick="gSetNumber(5)">  5 - gSetNumber(5)</button> 

예 2:Html 코드

 
<script type="text/javascript"> 
function newClosure(someNum, someRef) { 
// Local variables that end up within closure 
var num = someNum; 
var anArray = [1,2,3]; 
var ref = someRef; 
return function(x) { 
num += x; 
anArray.push(num); 
alert('num: ' + num + 
' nanArray ' + anArray.toString() + 
' nref.someVar ' + ref.someVar); 
} 
} 
var closure1 = newClosure(40, {someVar:' never-online'}) 
var closure2 = newClosure(99, {someVar:' BlueDestiny'}) 
closure1(4) 
closure2(3) 
</script> 

예 3:Js 코드

 
<script language="javascript"> 
/*          - getImgInPositionedDivHtml -                          。 
                     DIV         IMG      HTML    ，    ， 
                     ： 
*/ 
var getImgInPositionedDivHtml = (function(){ 
/*              - buffAr -        。           ，                     
  ，               。 
              ，      
              ： 
*/ 
var buffAr = [ 
'<div id="', 
'', //index 1, DIV ID    
'" style="position:absolute;top:', 
'', //index 3, DIV      
'px;left:', 
'', //index 5, DIV      
'px;width:', 
'', //index 7, DIV    
'px;height:', 
'', //index 9, DIV    
'px;overflow:hidden;\"><img src=\"', 
'', //index 11, IMG URL 
'\" width=\"', 
'', //index 13, IMG    
'\" height=\"', 
'', //index 15, IMG    
'\" alt=\"', 
'', //index 17, IMG alt      
'\"><\/div>' 
]; 
/*                       。 
                  
- getImgInPositionedDivHtml( ... ) - 
*/ 
return (function(url, id, width, height, top, left, altText){ 
/*                   ： 
*/ 
buffAr[1] = id; 
buffAr[3] = top; 
buffAr[5] = left; 
buffAr[13] = (buffAr[7] = width); 
buffAr[15] = (buffAr[9] = height); 
buffAr[11] = url; 
buffAr[17] = altText; 
/*           （            ） 
               ： 
*/ 
return buffAr.join(''); 
}); //:         。 
})();//    
alert(getImgInPositionedDivHtml);//        
alert(getImgInPositionedDivHtml("img.gif","img",100,50,0,0,"Test")); 
</script> 

설명:그 중의 관건 적 인 기 교 는 한 줄(in-line)함수 표현 식 을 실행 하여 추가 적 인 실행 환경 을 만 드 는 것 이 고 이 함수 표현 식 이 되 돌아 오 는 내부 함 수 를 외부 코드 에서 사용 하 는 함수 로 하 는 것 이다.이 때 버퍼 배열 은 함수 표현 식 의 부분 변수 로 정의 된다.이 함수 표현 식 은 한 번 만 실행 하고 배열 도 한 번 만 만 들 면 함수 에 의존 하여 중복 사용 할 수 있 습 니 다.7.프로 토 타 입 체인 ECMAScript 는 Object 형식 으로 내부[prototype]속성 을 정의 합 니 다.이 속성 은 스 크 립 트 를 통 해 직접 접근 할 수 없 지만 속성 접근 기 를 분석 하 는 과정 에서 이 내부[prototype]속성 이 인용 한 대상 체인-즉 원형 체인 을 사용 해 야 합 니 다.하나의 공공 prototype 속성 을 통 해 내부 의[prototype]속성 에 대응 하 는 원형 대상 을 할당 하거나 정의 할 수 있 습 니 다.예 1:Js 코드