JavaScript_javascript 스킬 중 Apply, Call 및 this 사용에 대한 간단한 비교 분석

1.정의 적용

적용: 함수를 호출하고, 함수의 this 값을 지정된 객체로 바꾸고, 함수의 매개변수를 지정된 배열로 바꿉니다.
구문: apply([thisObj[,argArray]])
이Obj
선택 과목. 이 개체로 사용할 개체입니다.

argArray
선택 과목. 함수에 전달될 인수 집합입니다.

2.콜 정의

call: 객체의 메서드를 호출하고 현재 객체를 다른 객체로 바꿉니다.
구문: call([thisObj[, arg1[, arg2[, [, argN]]]]])
이Obj
선택 과목. 현재 객체로 사용될 객체입니다.

arg1, arg2, , argN
선택 과목. 메소드에 전달될 매개변수 목록입니다.

3. 둘의 차이점

call의 두 번째 매개변수는 모든 유형이 될 수 있지만 Apply의 두 번째 매개변수는 배열 또는 인수여야 합니다.
정의에도 차이가 있습니다.

4. 예시 분석

(1) 공식 예:

function callMe(arg1, arg2){
  var s = "";

  s += "this value: " + this;
  s += "<br />";
  for (i in callMe.arguments) {
    s += "arguments: " + callMe.arguments[i];
    s += "<br />";
  }
  return s;
}

document.write("Original function: <br/>");
document.write(callMe(1, 2));
document.write("<br/>");

document.write("Function called with apply: <br/>");
document.write(callMe.apply(3, [ 4, 5 ]));
document.write(callMe.call(3, 4, 5 ));
// Output: // Original function: // this value: [object Window] // arguments: 1 // arguments: 2 // Function called with apply: // this value: 3 // arguments: 4 // arguments: 5

적용을 사용한 첫 번째 방법: 정의: 함수를 호출하고 함수의 this 값을 지정된 개체로 바꿉니다
callMe 함수를 호출하고 callMe 함수에서 이를 지정된 객체 3으로 대체합니다. 이때 여기에서는 이전 [객체 창]에서 3으로 변경됩니다.
첫 번째는 호출을 사용합니다. 정의: 개체의 메서드를 호출하고 현재 개체를 다른 개체로 바꿉니다.
callMe 객체의 메소드를 호출하고 callMe의 객체를 다른 객체로 교체합니다. 3.
이들 결과를 분석해 보면 둘 다 지정된 객체의 객체를 사용하거나 지정된 값을 사용하여 객체에서 이를 변경하는 것을 알 수 있습니다.
함수의 객체(this)가 실행될 다른 함수의 객체(this)를 "하이재킹"한다고 말할 수도 있습니다.
사실 이는 다음과 같은 질문을 제기합니다. 이것이 정확히 무엇입니까? 방향을 계속해서 바꾸기 위해 그토록 많은 어려움을 겪는 것이 왜 그토록 중요합니까?

(2) 예:

function zqz(a,b){
  return alert(a+b);
}
function zqz_1(a,b){
  zqz.apply(zqz_1,[a,b])
}
zqz_1(1,2)  //->3 

분석: 정의에 따르면: 함수를 호출하고 함수의 this 값을 지정된 개체로 바꿉니다.
여기서 zqz 함수가 호출되고 zqz 함수의 this 값이 지정된 객체 zqz_1로 대체됩니다.

함수 이름은 Function 객체에 대한 참조이기 때문에 js의 함수 이름은 실제로 객체라는 점에 유의하세요!

function add(a, b)
{
 alert(a + b);
}
function sub(a, b)
{
 alert(a - b);
}
add.call(sub, 3, 1); // 4

분석: 정의에 따르면: 개체의 메서드를 호출하고 현재 개체를 다른 개체로 바꿉니다.
add 개체를 호출하고 현재 개체 sub를 add 개체로 바꾸는 방법은 다음과 같습니다.

또 다른 예:

function zqz(a,b){
  this.name=a;
  this.age=b;
  alert(this.name+" "+this.age);
}
function zqz_1(a,b){
  zqz.apply(this,[a,b])   //我们亦可以这么写  zqz.apply(this,arguments) 
}
zqz_1("Nic",12)  //Nic 12

분석: 정의에 따르면: 함수를 호출하고 함수의 this 값을 지정된 개체로 바꿉니다.
여기서는 zqz 함수의 this를 대체하기 위해 지정된 객체 this를 사용하여 zqz 함수가 호출됩니다.

또 다른 예:

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

분석: 정의: 현재 객체를 다른 객체로 대체하기 위해 객체의 메소드를 호출합니다.

Fun1 개체의 메서드를 호출하여 Fun1의 현재 개체를 창 개체로 바꿉니다.
Fun1 객체의 메서드를 호출하고 Fun1의 현재 객체를 입력의 객체로 바꿉니다.
Fun1 개체의 메서드를 호출하고 현재 Fun1의 개체를 새 obj의 개체로 바꿉니다.

한 네티즌이 제기한 질문을 살펴보겠습니다.

호출 메소드는 다른 객체를 대신하여 메소드를 호출하는 데 사용될 수 있습니다. call 메소드는 함수의 객체 컨텍스트를 초기 컨텍스트에서 thisObj가 지정한 새 객체로 변경합니다. thisObj 매개변수가 제공되지 않으면 Global 개체가 thisObj로 사용됩니다.

그래서 케이스를 직접 작성했는데, 제가 상상했던 코드와는 달랐습니다

 function parent()
 {
 alert(this.name);
 }
 function child()
 {
 var name = '张三';
 };
 
 parent.call(child); 

그가 출력하는 것은 child입니다. 위 문장에 따르면 부모 컨텍스트는 child가 됩니다.

그리고 child에 이름 값이 있는데, 출력은 Zhang San이어야 합니다.

 
 function parent()
 {
 alert(this.name);
 }
 function child()
 {
 this.name = '张三';
 };
 var p1 = new child();
 
 parent.call(p1); 

이것은 Zhang San Why를 출력할 수 있습니까?

무슨 일이 일어나는지 살펴보겠습니다

call과 Apply의 용도는 변수를 함수 이름으로 사용하여 호출할 수 있다는 것입니다. 예를 들어 함수의 콜백 함수입니다. 구체적인 사용법은 다음과 같습니다: 실행된 function.call(a,b,c...). 여기서 a는 실행된 함수에서 지정해야 하는 개체이며 null일 수 있으며 다른 매개변수는 실행된 기능. Apply의 사용법은 두 번째 매개변수가 배열이라는 점을 제외하면 비슷합니다.

예:

function doPost(url,param,callback){
  //这里处理post请求
  var str = xhr.responseText;
  callback.apply(this,[str]);//相当于调用了callback(str);并把callback中的this设定为doPost对象
}