전화 및 적용 기능은 간단한 JavaScript 작업에서는 거의 사용되지 않습니다. 웹 애플리케이션 개발과 같은 다른 대규모 작업 에서이 두 기능은 JS 프레임 워크 개발에서 자주 발생할 수 있습니다. 이 두 기능에 대한 설명에 대한 많은 정보가 있지만 많은 정보가 쓰여지거나 매우 유사하며 설명이 부족하다고 생각합니다. 다음으로, 나는이 두 기능을 더 명확하고 단순한 아이디어로 분석하고 설명하려고 노력합니다.
코드 사본은 다음과 같습니다.
Call () 및 apply ()를 특정 객체의 메소드로 간주하고 메소드 구현을 호출하여 간접적으로 호출 함수를 고려할 수 있습니다. Call () 및 apply ()의 첫 번째 인수는 기능을 호출하는 부모 객체입니다. 그것은 호출 컨텍스트이며, 이에 대한 참조는 기능 본문에서 이것을 통해 얻습니다. Object O의 메소드에서 함수 f ()를 호출하려면 다음과 같은 콜 () 및 apply ()를 사용할 수 있습니다. f.call (o) f.apply (o). [1]
먼저 통화를 분석하겠습니다. 다음은 ECMAScript 3rd Edition [2]의 통화 함수에 대한 설명입니다. 호출 메소드가 함수 객체 (func.call (0))에 의해 호출되면 필요한 매개 변수와 몇 가지 필수 매개 변수를 전달해야합니다. 실행 프로세스는 다음과 같습니다.
A, 호출을 호출하는 객체가 실행되지 않으면 TypeError 오류가 발생합니다.
b, 매개 변수 목록을 비워 지도록 설정하십시오
c, 호출 된 메소드가 둘 이상의 매개 변수를 전달하면 arg1, arg2 ...을 매개 변수 목록에 삽입합니다.
d, 호출 결과를 반환하고 호출 함수 (func)에서이를 전달 된 매개 변수 1로 바꾸고 전달 된 매개 변수 목록을이 함수의 매개 변수로 취급합니다.
실제로 호출 함수는 기능 객체의 프로토 타입입니다. 즉, 호출 기능도 기능이어야합니다. 이 호출을 호출 할 때 호출을 통과 한 객체와 함께 호출하는 함수에서이를 바꾸십시오. 예는 다음과 같습니다.
<cript> 함수 c1 () {this.name = 'Zhang San'; this.age = '24 '; this.sayname = function () {console.log ( "여기 C1 클래스입니다. 내 이름은 다음과 같습니다."+this.name+"내 나이는"+this.age); }} 함수 c2 () {this.name = 'li si'; this.age = '25 '; } var c1 = 새로운 c1 (); var c2 = 새로운 c2 (); c1.sayname (); c1.sayname.call (c2); </script>실행 결과 :
여기 C1 카테고리가 있습니다. 제 이름은 다음과 같습니다. Zhang San My Age는 24 세입니다.
여기 C1 카테고리가 있습니다. 제 이름은 다음과 같습니다. Li Si My Age는 25 세입니다.
위의 코드에서는 C1과 C2의 두 클래스가 선언됩니다. C1에는 두 가지 속성, 하나의 방법이 있으며 C2는 C1과 동일한 두 가지 속성을 갖습니다. 인스턴스화 후 C1.SayName ()는 실제 특성을 인쇄하지만 C1.SayName.call (C2)은 C2의 특성을 인쇄하는 이유는 무엇입니까? SayName ()은 함수이고 기능 본문에이 문제가 있기 때문에 호출이 실행되면 C2로 대체되므로 C2의 속성이 인쇄됩니다.
적용과 통화의 차이는 선택적 매개 변수를 통과하는 데 있습니다. 적용의 모든 선택적 매개 변수는 하나의 매개 변수가 입력되면 배열에 저장되고 호출은 여러 매개 변수로 전달됩니다.
그렇다면 적용 및 통화 기능의 응용 프로그램은 무엇입니까? 첫 번째는 네트워크의 숫자 배열에서 가장 큰 요소를 찾는 것입니다. math.max.apply (null, array)를 직접 사용할 수 있습니다. 다른 하나는 다음과 같이 적용 및 호출을 사용하는 것입니다.
<cript> function human (이름, 섹스) {this.name = name; this.sex = 섹스; this.walk = function () {console.log ( 'Walking'); }} function child () {human.call (this, "xiao ming", "male") this.paly = function () {console.log ( '매우 좋아하는 것을 좋아합니다'); } this.intruduce = function () {console.log ( '안녕하세요, I'+this.name); }} var jinp = new Human ( 'Jack', 'male'); var xiaoping = new child (); xiaoping.walk (); xiaoping.paly (); xiaoping.intruduce (); </script>실행 결과 :
나는 걷고있다
나는 매우 연주하는 것을 좋아합니다
안녕하세요 여러분, 저는 Xiao Ming입니다
Call () 및 apply ()와 유사한 함수는 bind ()이며, 이는 ecmascript 5에 추가 된 새로운 메소드이지만 ecmascript 3에서 쉽게 시뮬레이션 할 수 있습니다. bind 함수는 또한 JavaScript의 함수.prototype 메소드입니다. 이 방법의 주요 내용은 함수를 객체에 바인딩하는 것입니다. bind () 메소드가 함수 f ()에 바인딩되고 객체 O가 매개 변수로 전달되면이 메소드는 새 함수를 반환하고 o의 메소드라고 불립니다. 새 기능으로 전달 된 모든 인수는 원래 함수로 전달됩니다. 다음과 같이 :
<cript> 기능 소개 (국가, 취미) {return "안녕하세요, 내 이름은"+this.name+", 올해"+this.age+","+Country+","+Hobby; } var xiaoming = {이름 : "Xiao Ming", Age : 20} var jieshao = access.bind (Xiaoming); Console.log (Jieshao ( "China", "Playing Ball")); </script>실행 결과 :
안녕하세요 여러분, 제 이름은 Xiao Ming입니다. 저는 20 살입니다. 중국 출신, 농구를 좋아합니다.
위의 예는 다음과 같습니다.
<cript> 기능 소개 (국가, 취미) {return "안녕하세요, 내 이름은"+this.name+", 올해"+this.age+","+Country+","+Hobby; } var xiaoming = {이름 : "Xiaoming", Age : 20} console.log (소개 .apply (Xiaoming, [ "China", "Play"])); // 또는 console.log (access.call (Xiaoming, "China", "Play")); </script>ECMAScript 5의 엄격한 모드에서는 Call () 및 apply ()의 첫 번째 실제 인수가 실제 인수가 원래 값이거나 널 또는 정의되지 않은 경우 에도이 값이 될 것입니다. ECMAScript 3 및 비 스트릭 모드에서 전달 된 NULL 및 UNDEFINED는 글로벌 대립으로 대체되는 반면 다른 원래 값은 해당 래퍼 객체로 대체됩니다.
참조
[1], 권위있는 JavaScript Guide, 6th Edition, 189 페이지
[2], function.prototype.call (thisarg [, arg1 [, arg2,…]]))
[3], function.prototype.Apply (Thisarg, Argarray)