> 웹 프론트엔드 > JS 튜토리얼 > JavaScript에서 호출, 적용 및 바인딩은 무엇을 합니까? 왜 사용합니까?

JavaScript에서 호출, 적용 및 바인딩은 무엇을 합니까? 왜 사용합니까?

伊谢尔伦
풀어 주다: 2017-07-20 14:15:03
원래의
1364명이 탐색했습니다.

콜, 적용, 바인딩은 무엇을 하나요? 우리는 왜 이것을 배워야 합니까?

은 일반적으로 이것의 환경을 지정하는 데 사용됩니다. 배우기 전에는 일반적으로 이러한 문제가 있습니다.


var a = {
  user:"追梦子",
  fn:function(){
    console.log(this.user);
  }
}
var b = a.fn;
b(); //undefined
로그인 후 복사

객체 a에 사용자를 인쇄하고 싶지만 정의되지 않은 상태로 인쇄되는 이유는 무엇입니까? a.fn()을 직접 실행해도 괜찮습니다.


var a = {
  user:"追梦子",
  fn:function(){
    console.log(this.user);
  }
}
a.fn(); //追梦子
로그인 후 복사

여기가 함수 a를 가리키기 때문에 여기에 인쇄할 수 있는데 왜 위의 함수는 a를 가리키지 않습니까? 이것의 포인팅 문제를 이해해야 한다면 js의 포인팅에 대한 철저한 이해를 참조하세요

이 방법이 목적을 달성할 수 있지만 때로는 이 객체를 다른 변수에 저장해야 할 경우 다음 방법을 사용할 수 있습니다. 사용됩니다.

1.call()


var a = {
  user:"追梦子",
  fn:function(){
    console.log(this.user); //追梦子
  }
}
var b = a.fn;
b.call(a);
로그인 후 복사

호출 메소드에서 첫 번째 매개변수에 b가 추가된 환경을 추가합니다.
첫 번째 매개변수 외에도 호출 메소드는 다음과 같이 여러 매개변수를 추가할 수도 있습니다.


var a = {
  user:"追梦子",
  fn:function(e,ee){
    console.log(this.user); //追梦子
    console.log(e+ee); //3
  }
}
var b = a.fn;
b.call(a,1,2);
로그인 후 복사

2, apply()

적용 메소드는 호출 메소드와 다소 유사합니다.


var a = {
  user:"追梦子",
  fn:function(){
    console.log(this.user); //追梦子
  }
}
var b = a.fn;
b.apply(a);
로그인 후 복사

를 가리키는 것도 변경할 수 있습니다. 마찬가지로 Apply에도 여러 매개변수가 있을 수 있지만 차이점은 두 번째 매개변수가 다음과 같이 배열이어야 한다는 것입니다.

var a = {
  user:"追梦子",
  fn:function(e,ee){
    console.log(this.user); //追梦子
    console.log(e+ee); //11
  }
}
var b = a.fn;
b.apply(a,[10,1]);
로그인 후 복사


3.bind()


바인드 방법은 호출 및 적용 방법과 다소 다르지만 어쨌든 방향을 변경하는 데 사용할 수 있습니다.


먼저 차이점에 대해 이야기해 보겠습니다.

var a = {
  user:"追梦子",
  fn:function(e,ee){
    console.log(this.user); //追梦子
    console.log(e+ee); //520
  }
}
var b = a.fn;
var arr = [500,20];
b.apply(a,arr);


//注意如果call和apply的第一个参数写的是null,那么this指向的是window对象
로그인 후 복사
코드가 인쇄되지 않은 것을 발견했습니다. 예, 이것이 바인드와 호출 및 적용 메소드의 차이점입니다. 실제로 바인드 메소드는 수정된 함수를 반환합니다.


var a = {
  user:"追梦子",
  fn:function(){
    console.log(this); //Window {external: Object, chrome: Object, document: document, a: Object, speechSynthesis: SpeechSynthesis…}
  }
}
var b = a.fn;
b.apply(null);
로그인 후 복사

이제 함수 c를 실행하여 객체 a의 사용자를 인쇄할 수 있는지 살펴보겠습니다.


var a = {
  user:"追梦子",
  fn:function(){
    console.log(this.user);
  }
}
var b = a.fn;
b.bind(a);
로그인 후 복사

ok 마찬가지로 바인드에도 여러 매개변수가 있을 수 있으며, 매개변수가 추가되면 매개변수를 다시 추가할 수 있습니다. 을 실행할 수 있지만, 매개변수는 형식 매개변수 순서대로 되어 있다는 점에 유의해야 합니다.


var a = {
  user:"追梦子",
  fn:function(){
    console.log(this.user);
  }
}
var b = a.fn;
var c = b.bind(a);
console.log(c); //function() { [native code] }
로그인 후 복사

요약:

call 및 Apply는 모두 컨텍스트에서 이를 변경하고 함수를 즉시 실행합니다. 바인딩 메서드를 사용하면 원할 때마다 해당 함수를 호출할 수 있으며 실행 중에 매개변수를 전달할 수 있습니다. 이는 차이점이므로 실제 상황에 따라 사용하도록 선택하세요.

위 내용은 JavaScript에서 호출, 적용 및 바인딩은 무엇을 합니까? 왜 사용합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿