JavaScript 에서 apply,call 에 대한 상세 한 설명

apply 와 call 의 차이
ECMAScript 규범 은 모든 함수 에 콜 과 apply 두 가지 방법 을 정 의 했 습 니 다.그들의 응용 은 매우 광범 위 하고 그들의 역할 도 똑 같 습 니 다.다만 전 삼 의 형식 에 차이 가 있 을 뿐 입 니 다.
apply( )
apply 방법 은 두 개의 매개 변 수 를 입력 합 니 다.하 나 는 함수 컨 텍스트 의 대상 이 고 다른 하 나 는 함수 매개 변수 로 구 성 된 배열 입 니 다.

var obj = {
 name : 'linxin'
}
function func(firstName, lastName){
 console.log(firstName + ' ' + this.name + ' ' + lastName);
}
func.apply(obj, ['A', 'B']); // A linxin B

이 를 통 해 알 수 있 듯 이 obj 는 함수 컨 텍스트 의 대상 이 고 함수 func 에서 this 는 obj 라 는 대상 을 가리 키 고 있 습 니 다.매개 변수 A 와 B 는 배열 에 놓 여 func 함수 로 각각 func 매개 변수 에 대응 하 는 목록 요소 입 니 다.
call( )
call 방법 첫 번 째 매개 변 수 는 함수 컨 텍스트 의 대상 이지 만 뒤에 들 어 오 는 매개 변수 목록 입 니 다.하나의 배열 이 아 닙 니 다.

var obj = {
 name: 'linxin'
}
function func(firstName, lastName) {
 console.log(firstName + ' ' + this.name + ' ' + lastName);
}
func.call(obj, 'C', 'D');  // C linxin D

apply 와 비교 하면 차이 점 을 볼 수 있 습 니 다.C 와 D 는 단독 매개 변수 로 func 함수 에 전달 되 는 것 이지 배열 에 넣 는 것 이 아 닙 니 다.
언제 어떤 방법 을 써 야 할 지 에 대해 서 는 사실 고민 할 필요 가 없다.만약 당신 의 매개 변수 가 원래 하나의 배열 에 존재 한다 면 자 연 스 럽 게 apply 를 사용 하 십시오.만약 매개 변수 가 비교적 산만 하고 서로 관련 이 없 으 면 call 을 사용 하 십시오.
apply 와 call 의 용법
1.이 방향 변경

var obj = {
 name: 'linxin'
}
function func() {
 console.log(this.name);
}
func.call(obj);  // linxin

우 리 는 call 방법의 첫 번 째 매개 변 수 는 함수 문맥 의 대상 이라는 것 을 알 고 있 습 니 다.여기 서 obj 를 매개 변수 로 func 에 전 달 했 습 니 다.이때 함수 중의 this 는 obj 대상 을 가리 키 고 있 습 니 다.여기 func 함수 에 서 는 사실

function func() {
 console.log(obj.name);
}

2.다른 대상 을 빌 리 는 방법
먼저 예 를 들다

var Person1 = function () {
 this.name = 'linxin';
}
var Person2 = function () {
 this.getname = function () {
  console.log(this.name);
 }
 Person1.call(this);
}
var person = new Person2();
person.getname();  // linxin

위 에서 보 듯 이 Person 2 의 실례 화 된 대상 person 은 getname 방법 을 통 해 Person 1 의 name 을 얻 었 습 니 다.Person 2 에서 Person 1.call(this)의 역할 은 바로 Person 1 대상 을 사용 하여 this 대상 을 대체 하 는 것 이기 때문에 Person 2 는 Person 1 의 모든 속성 과 방법 을 가지 게 되 었 고 Person 2 가 Person 1 의 속성 과 방법 을 계승 한 셈 이다.
3.호출 함수
apply,call 방법 은 함수 가 즉시 실행 되 기 때문에 함수 호출 에 도 사용 할 수 있 습 니 다.

function func() {
 console.log('linxin');
}
func.call();   // linxin

call 과 bid 의 차이
EcmaScript 5 에서 bind 라 는 방법 을 확 장 했 습 니 다.낮은 버 전의 IE 에 서 는 호 환 되 지 않 습 니 다.이것 은 call 과 매우 비슷 합 니 다.받 아들 인 매개 변 수 는 두 부분 이 있 습 니 다.첫 번 째 매개 변 수 는 함수 컨 텍스트 의 대상 이 고 두 번 째 매개 변 수 는 목록 입 니 다.여러 개의 매개 변 수 를 받 아들 일 수 있 습 니 다.
그들 사이 의 차 이 는 다음 과 같은 두 가지 가 있다.
1.bid 송신 반환 값 은 함수

var obj = {
 name: 'linxin'
}
function func() {
 console.log(this.name);
}
var func1 = func.bind(obj);
func1();      // linxin

bid 방법 은 즉시 실행 되 지 않 고 컨 텍스트 this 를 변경 한 함수 로 되 돌아 갑 니 다.원 함수 func 의 this 는 변 하지 않 고 전역 대상 window 를 가리 키 고 있 습 니 다.
2.매개 변수의 사용

function func(a, b, c) {
 console.log(a, b, c);
}
var func1 = func.bind(null,'linxin');
func('A', 'B', 'C');   // A B C
func1('A', 'B', 'C');   // linxin A B
func1('B', 'C');    // linxin B C
func.call(null, 'linxin');  // linxin undefined undefined

call 은 두 번 째 및 이후 의 매개 변 수 를 func 방법의 실제 인삼 으로 전달 하 는 것 이 고,func 1 방법의 실제 인삼 은 bind 에서 매개 변 수 를 바탕 으로 뒤로 배열 하 는 것 입 니 다.
낮은 버 전의 브 라 우 저 에 bind 방법 이 없 으 면 우리 도 스스로 하 나 를 실현 할 수 있 습 니 다.

if (!Function.prototype.bind) {
 Function.prototype.bind = function () {
  var self = this,      //      
   context = [].shift.call(arguments), //        this   
   args = [].slice.call(arguments); //          
  return function () {     //        
   self.apply(context,[].concat.call(args, [].slice.call(arguments)));
  }
 }
}

이상 은 본 고의 모든 내용 입 니 다.본 고의 내용 이 여러분 의 학습 이나 업무 에 어느 정도 도움 이 되 기 를 바 랍 니 다.또한 저 희 를 많이 지지 해 주시 기 바 랍 니 다!