javascript_기본지식 중 call, Apply, Bind 사용법 비교분석

Call, Apply, Bind 세 가지 함수의 사용법에 관해서는 JavaScript 언어를 배울 때 넘을 수 없는 지식 포인트입니다. 아래에서는 세 가지 일반적인 응용 프로그램 시나리오 각각의 사용법을 요약하겠습니다.

먼저 '빌려주기'와 '요청하기'로 이해될 수 있는 통화 기능을 살펴보세요. 다음과 같은 상황을 상상해 보십시오. 혼자 밖에 서성거리고 있는데, 급한 일이 생기면 집에 전화하고 싶은데 안타깝게도 휴대폰 요금이 부족하거나 배터리가 부족하거나 함정에 빠졌습니다. 휴대전화를 사용할 수 없습니다. 하지만 이 방법은 전화를 걸어야 하기 때문에 친구의 휴대폰, 이웃의 휴대폰, 공중전화를 빌려서 사용할 수 있는 휴대폰이 없어도 전화를 걸 수 있습니다. 누구의 전화로 전화를 걸었는지는 중요하지 않습니다. 어쨌든 효과는 자신의 휴대폰으로 전화를 거는 것과 같습니다. 호출 함수의 원래 의도는 다음과 유사합니다. 아래에서는 코드를 사용하여 해당 애플리케이션 시나리오를 시뮬레이션합니다.

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

var 개구리 = {
이름 : '개구리',
말: 함수 () {
경고(this.name);
}
}
var 토끼 = {
이름 : '토끼'
}
frog.say.call(rubbit) //토끼

토끼는 벙어리 개체이지만 자신의 능력으로는 이름을 밝히기가 불가능합니다. 다행히도 말을 할 수 있는 좋은 친구가 있습니다. 그래서 러빗은 개구리에게 그 소원을 들어달라고 부탁했습니다. frog.say.call()의 첫 번째 매개변수는 변호사가 고객에게 전화하기를 좋아하는 요청하는 사람으로 채워져야 합니다. 여기서 rubbit은 개구리에게 자신의 이름을 말해달라고 요청하므로 rubbit을 입력하세요. 이렇게 말하면 개구리 이름 대신에 토끼 이름이 검색됩니다. 여기에 개구리를 채우면 어떤 모습일까요? 이것은 스스로에게 뭔가를 하라고 요구하는 것과 같습니다. 시도해 볼 수 있습니다:

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

var 개구리 = {
이름 : '개구리',
             말하기: function(){
경고(this.name);
}
}
var 토끼 = {
이름 : '토끼'
}
frog.say.call(frog) //개구리

소금 한 봉지를 먹으며 이름을 말했을 것입니다. 전혀 놀라운 일이 아닙니다. call의 고전적인 사용법을 살펴보겠습니다.

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

//매개변수를 실제 배열 객체로 변환
함수frog(){
var arr = [].slice.call(인수);
console.log(arguments.slice,arr.slice)
// 정의되지 않은 함수 슬라이스() { [네이티브 코드] }
}
개구리(1,2,3,4)

이러한 호출 후에는 인수 개체를 배열 개체로 사용할 수 있습니다. 호출에는 다양한 용도가 있습니다. jquery의 소스 코드를 열면 다양한 애플리케이션을 쉽게 찾을 수 있습니다. 여기에 모두 나열하지는 않지만 이전 장면으로 돌아가 보겠습니다. 전화를 빌리는 것은 너무 간단합니다. 너무 오랫동안 노인들에게 적절한 존경심을 표하지 않았습니다. 돌아가서 지역 특산품을 사면 정말 좋을 것입니다. 그런데 밖에서 생활하는 것에 대한 압박감이 너무 커서 매일 야근을 해야 한다. 휴가를 달라고 하면 월급이 삭감될 뿐만 아니라 여행비도 많이 지출하게 된다. 총액은 아마도 노인들이 1년 동안 집에 머물기에 충분할 것입니다. 생각해보면 비용 효율적이지 않아서 이 기능에 전화해서 도움을 요청할까 생각도 했습니다. 게다가 수수료도 들지 않고, 가져가는 것도 매우 현명한 선택이었습니다. 수량과 무게에 제한이 있으니 원하시는 만큼 가져오시면 됩니다. 코드로 다시 보여드리겠습니다.

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

var 개구리 = {
이름 : '개구리',
보내기 : 기능(돈,음식,우유,수아게이트){
경고(머니푸드 우유수아가트);
}
}
var 토끼 = {
이름 : '토끼'
}
frog.send.call(rubbit,'money','food','milk','suagate')

돈과 의지만 있다면 아이폰6 플러스 몇 개나 돌려줄 수도 있습니다. .^_^.

이제 통화가 거의 끝나가네요. 위의 멜로를 보고 향수병을 불러일으켰다면 죄송합니다.

call에도 apply라는 이복형이 있습니다. call 사용법을 이해했다면 Apply는 실제로 똑같습니다. 유일한 차이점은 Apply가 가방을 전달하는 것을 좋아하지 않는다는 것입니다. 환경 친화적. 그래서 물건을 담을 수 있는 큰 상자를 제공하며, 제공된 상자에 옮기고 싶은 모든 물건을 넣기만 하면 됩니다. 이 큰 상자는 배열입니다. 위의 예를 적용하는 경우 다음과 같습니다.

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

var 개구리 = {
이름 : '개구리',
보내기 : 기능(돈,음식,우유,수아게이트){
경고(머니푸드 우유수아가트);
}
}
var 토끼 = {
이름 : '토끼'
}
//매개변수의 차이에 주의하세요
frog.send.apply(rubbit,['money','food','milk','suagate'])

위는 신청과 전화의 과거와 현재의 삶입니다. 그러나 그들은 Apply and Call의 아버지가 몇 년 전 부동산으로 큰 돈을 벌었고, 외부에 바인드라는 사생아도 두었다고는 전혀 예상하지 못했습니다. 비록 두 형제보다 몇 년 늦게 데뷔했지만, 그의 실력을 과소평가해서는 안 된다. 그러나 그의 신원은 일부 지역에서 인식되지 않습니다. IE6과 같은. 아래에서는 코드를 사용하여 그의 기술을 보여드리겠습니다.

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

변수 이름 = 'rubbit';
var 개구리 = {
이름 : '개구리',
           다음과 같이 말하세요. function(){
             setTimeout(function(money,milk){
알림(이.이름은 돈우유)
              }.bind(this,'money','milk'),1000)
}
}
frog.say();

비교를 통해 function(){} 바로 뒤에 바인드를 사용할 수 있음을 확인했습니다. 이는 호출 및 적용을 생략하고 함수 바로 뒤에 전달될 클라이언트 및 매개변수를 지정하는 것과 동일합니다. 매개변수 전달 스타일 측면에서는 호출과 비슷합니다.

바인딩과 관련하여 고전적인 사용법을 살펴보겠습니다.

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

var obj = {
이름 : '개구리'
}
document.addEventListener('클릭',function(){
​​ 경고(this.name); //개구리
}.bind(obj),false);

요약하면 세 형제의 Apply, Call, Bind의 유사점은 다음과 같습니다.

1. 첫 번째 매개변수는 경계 범위, 즉 작업이 수행되는 영역입니다.

2. 매개변수를 전달할 수 있습니다

차이점은 다음과 같습니다.

적용하면 통화 호환성이 더 좋아지고 일부 하위 버전 브라우저에서는 바인드가 지원되지 않습니다.

Apply로 전달된 매개변수는 배열로 래핑되어야 하며, Call 및 Bind는 전달될 매개변수를 하나씩 나열합니다.

이 기사가 도움이 되기를 바랍니다.