js 적용/호출/호출자/호출자/바인드 사용법 및 차이점 분석_javascript 기술

1. 호출 메소드
현재 객체를 다른 객체로 대체하기 위해 객체의 메소드를 호출합니다(실제로 객체의 내부 포인터를 변경하는 것, 즉 객체의 this가 가리키는 내용을 변경하는 것) ).
Js 코드
call([thisObj[,arg1[, arg2[, [,.argN]]]]])
매개변수
thisObj
선택 사항. 현재 객체로 사용될 객체입니다.
arg1, arg2, , argN
선택 사항. 일련의 메소드 매개변수가 전달됩니다.
설명
call 메서드는 다른 개체 대신 메서드를 호출하는 데 사용할 수 있습니다. call 메소드는 함수의 객체 컨텍스트를 초기 컨텍스트에서 thisObj가 지정한 새 객체로 변경합니다. thisObj 매개변수가 제공되지 않으면 전역 개체가 thisObj로 사용됩니다.
Js 코드

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

코드
function Obj(){this.value="Object! ";}
var value="전역 변수"; function Fun1( ){alert(this.value);}
window.Fun1(); //전역 변수
Fun1.call(window); //전역 변수
Fun1.call(document.getElementById ('myText')); //텍스트 입력
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); // 42 * 5를 반환합니다.
multiply.call(second_object, 5) // 24 * 5를 반환합니다. >

2. 적용 메소드
적용 메소드의 첫 번째 매개변수도 현재 객체에 전달할 객체, 즉 함수 내부의 this입니다. 다음 매개변수는 현재 객체에 전달되는 매개변수입니다. Apply와 Call은 동일한 기능을 갖고 있지만, 매개변수에 차이가 있습니다. 첫 번째 매개변수의 의미는 동일하지만 두 번째 매개변수의 경우 apply는 매개변수 배열로 전달됩니다. 즉, 여러 매개변수가 배열로 결합되어 전달되는 반면 call은 call의 매개변수로 전달됩니다( 두 개의 매개변수로 시작).
예를 들어 func.call(func1,var1,var2,var3)의 해당 Apply 작성 방법은 func.apply(func1,[var1,var2,var3])입니다. Apply의 두 번째 매개변수로 전달되는 현재 함수의 인수 객체를 직접 추가할 수 있다는 것입니다.
Js 코드

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

var func=new function() {this.a="func"}

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



3. 호출자 속성

은 호출하는 함수 본문인 함수에 대한 참조를 반환합니다. 현재 기능. functionName.caller: functionName 개체는 실행 중인 함수의 이름입니다.
참고: 함수의 경우 호출자 속성은 함수가 실행될 때만 정의됩니다. 함수가 JScript 프로그램의 최상위 수준에서 호출되는 경우 호출자에는 null 이 포함됩니다. 호출자 속성이 문자열 컨텍스트에서 사용되는 경우 결과는 functionName.toString과 동일합니다. 즉, 함수의 디컴파일된 텍스트가 표시됩니다.
Js 코드

코드 복사 코드는 다음과 같습니다. 함수 CallLevel() {

if (CallLevel.caller == null)

alert("CallLevel이 최상위 수준에서 호출되었습니다.")
else
alert("CallLevel이 다른 함수에 의해 호출되었습니다:n" CallLevel .caller) ;
}
function funCaller(){
CallLevel()
}
CallLevel()
funCaller()


4. 호출 수신자 속성
지정된 Function 개체의 본문인 실행 중인 Function 개체를 반환합니다.
[function.]arguments.callee: 선택적 함수 매개변수는 현재 실행 중인 함수 개체의 이름입니다.
참고:
호출자 속성의 초기 값은 실행 중인 Function 개체입니다.
callee 속성은 인수 객체의 멤버입니다. 이는 함수 객체 자체에 대한 참조를 나타냅니다. 이는
함수의 재귀를 숨기거나 함수의 캡슐화를 보장하는 데 도움이 됩니다. 예제는 1부터 n까지의 자연수를 재귀적으로 계산합니다. 그리고 이 속성
은 해당 기능이 실행 중일 때만 사용할 수 있습니다. 피호출자에게는 때때로 확인을 위해
사용되는 길이 속성이 있다는 점에 유의해야 합니다. args.length는 실제 매개변수 길이이고,args.callee.length는
형식 매개변수 길이를 통해 호출 시 형식 매개변수 길이가 실제 매개변수 길이와 일치하는지 확인할 수 있습니다.
Js 코드

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

//callee can 자체 인쇄
function calleeDemo() {
alert(arguments.callee);
}
//매개변수 확인에 사용됨
function calleeLengthDemo(arg1, arg2) {
if(인수 .length ==arguments.callee.length) {
window.alert("형식 및 실제 매개변수 길이가 올바른지 확인하세요!")
return;
} else {
alert(" 실제 매개변수 길이: "args.length);
alert("공식 매개변수 길이: "args.callee.length);
}
}
//재귀 계산
var sum = function(n){
if (n return 1;
else
return n ＋arguments.callee(n - 1)
}

5. 바인딩
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 메서드. apply(obj, 인수);
return temp;
}
var first_multiply = Multiplier.bind(first_object); //first_multiply(5); 🎜>var second_multiply = Multiply.bind(second_object);
second_multiply(5); // 24 * 5를 반환합니다.



6. JS 클로저(Closure)

소위 "클로저"는 다수의 변수와 이러한 변수가 바인딩되는 환경을 포함하여 이러한 변수가 표현식의 일부가 되는 표현식(일반적으로 함수)을 의미합니다. 클로저에 관해 가장 간단한 설명은 ECMAScript가 내부 함수의 사용을 허용한다는 것입니다. 즉, 함수 정의와 함수 표현식이 다른 함수의 함수 본문에 위치합니다. 또한 이러한 내부 함수는 모든 지역 변수, 매개변수 및 해당 함수가 존재하는 외부 함수에 선언된 기타 내부 함수에 액세스할 수 있습니다. 이러한 내부 함수 중 하나가 이를 포함하는 외부 함수 외부에서 호출되면 클로저가 형성됩니다. 즉, 외부 함수가 반환된 후에 내부 함수가 실행됩니다. 이 내부 함수가 실행되면 여전히 외부 함수의 지역 변수, 매개변수 및 기타 내부 함수에 액세스해야 합니다. 이러한 지역 변수, 매개변수, 함수 선언(초기)의 값은 외부 함수가 반환될 때의 값이지만 내부 함수의 영향도 받습니다. 간단히 말해서 클로저의 기능은 out 함수가 실행되고 반환된 후 Javascript의 가비지 수집 메커니즘인 GC가 out 함수가 점유한 리소스를 회수하는 것을 방지하는 것입니다. 실행은 out 함수의 변수에 따라 달라집니다.
클로저의 두 가지 특징:
1. 함수 변수에 대한 참조로서 - 함수가 반환될 때 활성화됩니다.
2. 클로저는 함수가 반환될 때 리소스를 해제하지 않는 스택 영역입니다.
예시 1:
HTML 코드

코드 복사 코드는 다음과 같습니다. < ;script type="text/javascript">

function setupSomeGlobals() {

// 클로저 내에서 끝나는 지역 변수
var num = 666>// 일부 참조 저장 함수를 전역 변수로 사용
gAlertNumber = function() { Alert(num) }
gIncreaseNumber = function() { num }
gSetNumber = function(x) { num = x }; }

생성 - setupSomeGlobals()
출력 value - gAlertNumber()
증가 - gIncreaseNumber()

예시 2:
HTML 코드

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

< ;script type="text/javascript">
function newClosure(someNum, someRef) {
// 클로저 내에서 끝나는 지역 변수
var num = someNum; = [1 ,2,3];
var ref = someRef;
return function(x) {
num = x
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)
>
예제 3:
Js 코드

코드 복사

코드는 다음과 같습니다. <script> </script>/* 전역 변수(getImgInPositionedDivHtml)를 선언하고 외부 함수 표현식을 호출하여 반환되는 내부 함수를 한 번에 할당합니다.

이 내부 함수는 IMG 요소 주변의 절대 위치에 있는 DIV 요소를 나타내는 HTML 문자열을 반환합니다.

이 함수를 호출할 때 모든 변경 가능한 속성 값이 매개변수에 의해 제공됩니다.
*/
var getImgInPositionedDivHtml = (function(){
/* 외부 함수 표현식의 로컬 변수인 buffAr은 버퍼 배열을 보유합니다. 이 배열은 한 번만 생성되며 생성된 배열 인스턴스는 내부적으로 사용됩니다.
은 항상 사용 가능하므로 이 내부 함수가 호출될 때마다 사용할 수 있습니다.
의 빈 문자열은 데이터 자리 표시자로 사용되며 해당 데이터
는 내부 함수에 의해 여기에 삽입됩니다. 배열:
*/
var buffAr = [
'

'', //인덱스 13, IMG 너비
'" height="',
'', //인덱스 15, IMG 대체 텍스트 콘텐츠
'" alt="',
'', //인덱스 17, IMG 대체 텍스트 콘텐츠
'">

'
];
/* 함수 표현식을 평가한 결과인 내부 함수 객체를 반환합니다.
이 내부 함수는 매번 실행되는 함수입니다.
- getImgInPositionedDivHtml( ... ) -
*/
return (function(url, id, width, height, top, left, altText){
/* 다른 매개변수 삽입 그에 따라 버퍼 배열 위치:
*/
buffAr[1] = id
buffAr[3] = top;
buffAr[5] =
buffAr[13] = ( buffAr[7 ] = 너비);
buffAr[15] = (buffAr[9] = 높이);
buffAr[11] = url;
buffAr[17] = altText; 빈 문자열을 사용하여 반환됨(배열 요소 연결과 동일)
배열의 각 요소를 연결하여 형성된 문자열:
*/
return buffAr.join('')
}); /: 내부 함수 표현의 끝입니다.
})();//자체 호출
alert(getImgInPositionedDivHtml);//반환된 함수 표시
alert(getImgInPositionedDivHtml("img.gif","img",100,50,0, 0 ,"Test"));



설명: 핵심 요령은 인라인 함수 표현식을 실행하여 추가 실행 환경을 만드는 것입니다. 외부 코드에 사용된 함수로 함수 표현식에 의해 반환된 내부 함수입니다. 이때 버퍼배열은 함수식의 지역변수로 정의된다. 함수 표현식은 한 번만 실행하면 되며, 배열은 한 번 생성되고 이에 의존하는 함수에서 재사용될 수 있습니다.
7. 프로토타입 체인
ECMAScript는 객체 유형에 대한 내부 [[prototype]] 속성을 정의합니다. 이 속성은 스크립트를 통해 직접 액세스할 수 없지만 속성 접근자의 구문 분석 프로세스 중에 이 내부 [[prototype]] 속성이 참조하는 개체 체인(프로토타입 체인)이 필요합니다. 내부 [[prototype]] 속성에 해당하는 프로토타입 객체는 공개 프로토타입 속성을 통해 할당하거나 정의할 수 있습니다.
예시 1:

Js 코드




코드 복사

코드는 다음과 같습니다.

<script> <BR>function NumObject(formalParameter){ <BR>this.testNumber = formatParameter <BR>} <BR>function StrObject(formalParameter){ <BR> this.testString = formatParameter; <BR>} <BR>//StrObject 클래스의 인스턴스와 연결된 모든 프로토타입을 NumObject 클래스의 인스턴스로 대체했습니다. <BR>StrObject.prototype =new NumObject(6); <BR>var objRef = new StrObject( "String_Value" ); <BR>//속성 접근자가 objectRef에서 참조하는 객체의 속성 값을 읽으려고 하면 전체 프로토타입 체인이 검색됩니다. <BR>//객체에 있든 객체의 프로토타입에 있든 명명된 속성 값을 읽을 때 처음 발견된 속성 값만 반환됩니다. 개체의 명명된 속성에 값을 할당할 때 해당 속성이 개체 자체에 없으면 해당 속성이 생성됩니다. <BR>alert(objRef.testString);//output "String_Value" <BR>alert(objRef.testNumber);//output "6" <BR>alert(objRef.toString) <BR>//StrObject 인스턴스 프로토타입 체인을 가지고 있습니다. 체인의 첫 번째 개체는 생성 후 StrObject 생성자의 프로토타입 속성에 할당되는 NumObject의 인스턴스입니다. NumObject의 인스턴스에는 Object.prototype이 참조하는 객체에 해당하는 기본 Object 객체의 프로토타입인 프로토타입도 있습니다. 마지막으로 Object.prototype에는 값이 null인 프로토타입이 있으므로 프로토타입 체인이 거기서 끝납니다. <BR>objRef.testNumber = 3;//객체 자체에 속성이 없으면 해당 속성을 생성합니다. <BR>alert(objRef.testNumber);//속성 자체로 속성 접근자는 더 이상 검색하지 않습니다. 프로토타입 체인<BR>alert(NumObject.prototype.isPrototypeOf(objRef));// "true" 출력 <BR></script>

0 0 0