JS_javascript 스킬의 적용, 호출, 바인딩에 대한 심층 분석

Javascript에서 Function은 객체입니다. Function 개체의 this 포인터는 함수가 호출되는 방식에 따라 달라집니다. 적용, 호출 및 바인드를 사용하면 함수 개체에서 this의 포인터를 모두 변경할 수 있습니다. 차이점에 대해 이야기하기 전에 세 가지의 유사점을 요약해 보겠습니다.
1. 이들은 모두 함수의 this 개체의 지점을 변경하는 데 사용됩니다.
2. 첫 번째 매개변수는 이것이 가리키는 객체입니다.
3. 후속 매개변수를 사용하여 매개변수를 전달할 수 있습니다.

통화 방법:

구문: call([thisObj[,arg1[, arg2[, [,.argN]]]]])
정의: 현재 객체를 다른 객체로 대체하기 위해 객체의 메소드를 호출합니다.
설명: 호출 메소드를 사용하면 다른 객체 대신 메소드를 호출할 수 있습니다. call 메소드는 함수의 객체 컨텍스트를 초기 컨텍스트에서 thisObj가 지정한 새 객체로 변경합니다.
thisObj 매개변수가 제공되지 않으면 Global 개체가 thisObj로 사용됩니다.

신청:

구문: 적용(thisObj, 배열 매개변수)
정의: 객체의 메소드를 적용하고 현재 객체를 다른 객체로 대체
참고: 매개변수가 배열 유형이 아닌 경우 TypeError가 보고됩니다.

바인딩:

EcmaScript5에서는 바인딩이라는 메서드가 확장되었습니다(IE6, 7, 8에서는 지원되지 않음). 바인드는 호출과 매우 유사합니다. 예를 들어 허용되는 매개변수는 두 부분으로 나누어지고 첫 번째 매개변수는 다음과 같이 사용됩니다. 실행 함수 컨텍스트에서 this의 개체입니다. 두 가지 차이점이 있습니다.
①바인드의 반환값은 함수입니다. ②다음 매개변수의 사용도 다릅니다.

먼저 예 1을 살펴보세요.

function add(a, b) {
  alert(a + b);
}
function sub(a, b) {
  alert(a - b);
}

통화의 경우 다음과 같이 사용할 수 있습니다.
add.call(sub,3,1);결과는 4

신청은 이렇게 하면 됩니다
add.apply(sub,[3,1]);결과는 4

바인드의 경우 다음과 같이 사용할 수 있습니다.
add.bind(sub)(3,1); 결과는 4

출력 결과는 동일하지만 전달 매개변수의 사용법이 다른 것을 볼 수 있습니다.

예 2 보기:

function jone(name,age,work){
  this.name=name;
  this.age=age;
  this.work=work;
  this.say=function(msg){
    alert(msg+"，我叫"+this.name+"，我今年"+this.age+"岁，我是"+this.work)
  }
}
var jack={
  name:"jack",
  age:'24',
  work:"学生"
}
var pet=new jone();

pet.say.apply(jack,["欢迎您"])
console.log(this.name)

통화하려면 다음이 필요합니다.
pet.say.call(jack,"환영합니다!")

신청하려면 다음이 필요합니다:
pet.say.apply(jack,["환영합니다!"])

바인딩하려면 다음이 필요합니다.
pet.say.bind(jack,"환영합니다")()

이때 console.log(this.name)이 출력되는데, this.name이 jack이고 this의 context가 변경된 것으로 확인됩니다.

위의 JS에서의 Apply, Call, Bind 심층 분석은 모두 편집자가 공유한 내용이므로 참고가 되셨으면 좋겠습니다. Script Home에 많은 지원 부탁드립니다.