Javascript_javascript 스킬의 호출 및 적용 기능 비교 및 ​​사용 예

호출 및 적용 기능은 일부 간단한 Javascript 작업에서는 거의 사용되지 않습니다. 웹 애플리케이션 개발 및 js 프레임워크 개발과 같은 다른 대규모 작업에서는 이 두 기능을 자주 접할 수 있습니다. 이 두 기능에 대한 설명에 대한 정보가 인터넷에 많이 있지만, 그 정보 중 상당수가 스크립트로 작성되었거나 매우 유사하며 실제적인 설명이 부족한 것 같습니다. 다음으로 이 두 가지 기능을 보다 명확하고 간단하게 분석하고 설명하려고 합니다.

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

call()과 apply()를 객체의 메소드로 간주하고 메소드의 실행을 호출하여 간접적으로 함수를 호출할 수 있습니다. call()과 apply()의 첫 번째 실제 매개변수는 호출할 함수의 상위 개체이며, 이는 호출 컨텍스트이며 함수 본문에서 이를 통해 참조를 얻습니다. 객체 o의 메서드에서 f() 함수를 호출하려면 다음과 같이 call() 및 apply()를 사용할 수 있습니다: f.call(o) f.apply(o).[1]

먼저 호출을 분석해 보겠습니다. ECMAScript 3rd Edition의 호출 함수 설명은 다음과 같습니다. [2] 함수 객체(func.call(0))에 의해 호출 메서드가 호출될 때 필요한 매개 변수와 여러 개의 선택적 매개 변수, 실행 과정은 다음과 같습니다.
a, call을 호출하는 객체가 실행 가능하지 않으면 TypeError를 발생시킵니다.
b, 매개변수 목록을 비워두세요
c. 호출된 메서드가 둘 이상의 매개변수를 전달하는 경우 arg1, arg2...를 매개변수 목록에 순서대로 삽입합니다.
d. 호출 호출의 함수 결과를 반환하고, 호출 함수(func)에서 이를 전달된 매개변수 1로 바꾸고, 전달된 매개변수 목록을 이 함수의 매개변수로 사용합니다.
실제로 호출 함수는 함수 개체의 프로토타입입니다. 즉, 호출을 호출하는 함수도 함수여야 합니다. 호출을 호출하는 함수에서 이를 개체로 바꾸면 됩니다. 통과했다. 예를 들면 다음과 같습니다.

<script>
 function C1(){
 this.name='张三';
 this.age='24';
 this.sayname=function(){
  console.log("这里是C1类，我的名字是:"+this.name+"我的年龄是"+this.age);
 }
 }
 function C2(){
 this.name='李四';
 this.age='25';
 }
 var c1=new C1();
 var c2=new C2();
 c1.sayname();
 c1.sayname.call(c2);
</script>

실행 결과:
카테고리 C1입니다. 제 이름은 Zhang San이고 나이는 24세입니다
여기는 카테고리 C1입니다. 제 이름은 Li Si이고 나이는 25세입니다
위 코드에서는 C1과 C2라는 두 개의 클래스가 선언되었습니다. C1에는 두 개의 속성이 있고 하나의 메서드에는 C1과 동일한 두 개의 속성이 있습니다. c1.sayname()은 실제 속성인 c1 .sayname을 인쇄합니다. call(c2)는 c2의 속성만 인쇄합니다. 이유는 무엇입니까? sayname()은 함수이고 함수 본문에 이것이 있기 때문에 호출이 실행될 때 이것은 c2로 대체되므로 결국 c2의 속성이 인쇄됩니다.
Apply와 Call의 차이점은 선택적 매개변수를 전달한다는 점입니다. Apply의 모든 선택적 매개변수는 배열에 저장되어 하나의 매개변수로 전달되는 반면, call은 여러 매개변수로 나누어 전달됩니다.
그렇다면 적용 및 호출 기능의 응용은 무엇입니까? 첫 번째는 숫자 배열에서 최대 요소를 찾는 인터넷의 고전적인 방법입니다. 다른 하나는 다음과 같이 Apply 및 Call을 사용하여 상속을 구현하는 것입니다. 🎜>

<script> 
 function Human(name,sex){
 this.name=name;
 this.sex=sex;
 this.walk=function(){
  console.log('我在走路');
 }
 }
 function Child(){
 Human.call(this,"小明","男")
 this.paly=function(){
  console.log('我很喜欢玩耍');
 }
 this.intruduce=function(){
  console.log('大家好，我是'+this.name);
 }
 }
 var jinp=new Human('Jack','男');
 var xiaoping=new Child();
 xiaoping.walk();
 xiaoping.paly();
 xiaoping.intruduce();
</script>

실행 결과:

걷고 있어요
저는 노는 걸 아주 좋아해요
안녕하세요 여러분 샤오밍입니다
call() 및 apply()와 유사한 함수는 ECMAScript 5의 새로운 메서드인 바인딩()이지만, ECMAScript 3에서는 바인딩()을 쉽게 시뮬레이션할 수 있습니다. 바인딩 함수는 Javascript의 Function.prototype 메서드이기도 합니다. 이 메서드의 주요 내용은 함수를 객체에 바인딩하는 것입니다. 바인딩() 메소드가 f() 함수에 바인딩되고 객체 o가 매개변수로 전달되면 이 메소드는 o의 메소드로 호출될 새 함수를 반환합니다. 새 함수에 전달된 모든 인수는 원래 함수에 전달됩니다. 다음과 같습니다:

<script>
 function introduce(country,hobby){
 return "大家好，我叫"+this.name+", 今年"+this.age+"岁, 来自"+country+", 喜欢"+hobby;
 }
 var xiaoming={name:"小明",age:20}
 var jieshao=introduce.bind(xiaoming);
 console.log(jieshao("中国","打球"));
</script>

실행 결과:

안녕하세요 여러분. 제 이름은 Xiao Ming입니다. 저는 중국에서 온 20세이고 공놀이를 좋아합니다
위의 예는 다음과 같습니다.

<script>
 function introduce(country,hobby){
 return "大家好，我叫"+this.name+", 今年"+this.age+"岁, 来自"+country+", 喜欢"+hobby;
 }
 var xiaoming={name:"小明",age:20}
 console.log(introduce.apply(xiaoming,["中国","打球"]));
    //或者下面这个
 console.log(introduce.call(xiaoming,"中国","打球"));
</script>

ECMAScript 5의 엄격 모드에서는 call() 및 apply()의 첫 번째 인수가 전달된 인수가 원래 값이거나 심지어 null 또는 정의되지 않은 경우에도 this의 값이 된다는 점에 유의해야 합니다. ECMAScript 3 및 비엄격 모드에서는 수신되는 null 및 정의되지 않은 값이 전역 대응 항목으로 대체되고, 기타 기본 값은 해당 래퍼 객체로 대체됩니다.

참고자료

[1], Javascript 6판 최종 가이드, 189페이지

[2],
Function.prototype.call(thisArg [ , arg1 [ , arg2, … ] ] ) [3],
Function.prototype.apply(thisArg, argArray)