세 가지 기능의 사용은 호출, 적용 및 바인드의 사용은 JavaScript의 언어를 배우면 극복 할 수없는 지식 요점입니다. 세 가지의 사용과 일반적인 응용 프로그램 시나리오를 요약하겠습니다.
먼저 "차용"및 "요청"으로 이해할 수있는 통화 기능을 살펴보십시오. 다음 시나리오를 상상해보십시오 : 당신은 혼자 방황하고 있으며 긴급한 문제가 있다면 집에 전화하고 싶지만 불행히도 전화가 빚지고 있거나 힘이 없거나 구덩이에 빠지게됩니다. 요컨대, 휴대 전화가 작동하지 않습니다. 그러나이 전화를해야하므로 친구의 휴대 전화, 이웃의 휴대 전화 또는 공중 전화를 빌릴 수 있습니다. 이런 식으로 휴대 전화를 사용할 수 없으면 통화를 완료 할 수 있습니다. 누구의 전화를 사용하는지는 중요하지 않습니다. 어쨌든, 그것은 자신의 전화로 전화를하는 것과 같은 효과입니다. 통화 함수의 원래 의도도 이것과 유사합니다. 코드를 사용하여 응용 프로그램 시나리오를 시뮬레이션하겠습니다.
var frog = {name : 'frog', say : function () {alert (this.name); }} var Rabbit = {이름 : 'Rabbit'} frog.say.call (rubbit) // RabbitRubbit은 멍청한 대상이지만 그의 이름을 말하고 싶다면 자신의 능력으로 그것을 달성하는 것은 불가능합니다. 다행히도, 그것은 Frog라는 좋은 친구가 있습니다. 그래서 Rubbit은 개구리 에게이 소원을 깨닫도록 요청했습니다. Frog.say.call ()의 첫 번째 매개 변수는 요청을 발행 한 사람으로 채워야하며 변호사는이를 고객이라고 부릅니다. 다음은 이름을 말하는 Rubbit Request Frog입니다. Rubbit을 채우십시오. 이런 식으로 말할 때, Rubbit 이름은 개구리 이름 대신 검색됩니다. 여기에서 개구리를 채우면 어떻게 생겼을까? 그것은 스스로에게 무언가를 요구하고 소금을 먹도록 요구하는 것과 같습니다. 당신은 그것을 시도 할 수 있습니다 :
var frog = {name : 'frog', say : function () {alert (this.name); }} var Rabbit = {이름 : 'Rabbit'} frog.say.call (개구리) // 개구리소금 한 봉지를 먹이는 것은 당신의 이름이어야하며, 그것은 예상치 못한 것이 아닙니다. 통화의 전형적인 사용법을 살펴 보겠습니다.
// 매개 변수를 실제 배열 객체 함수로 변환했다 frog () {var arr = [] .slice.call (arguments); console.log (arguments.slice, arr.slice) // 정의되지 않은 함수 slice () {[Native Code]}} 개구리 (1,2,3,4)이 호출 후에는 인수 객체를 배열 객체로 사용할 수 있습니다. 통화를 사용하는 방법에는 여러 가지가 있습니다. jQuery의 소스 코드를 열면 사용할 수있는 많은 장소를 쉽게 찾을 수 있습니다. 나는 여기에 모두 나열하지 않겠지 만, 우리 앞에있는 장면으로 돌아갈 것입니다. 전화를 빌리는 것은 너무 간단합니다. 전화를 한 후에는 확실히 무언가를 다시 가져오고 싶을 것입니다. 결국, 나는 수년간 방황하고 있었고 노인들에게 열광하지 않았으며 돌아갈 수있는 현지 전문 분야를 샀다. 확실히 훌륭합니다. 그러나 외부의 삶의 압력은 너무 커서 일하는 것 외에도 매일 초과 근무가 있습니다. 휴가를 가면 급여가 공제 될뿐만 아니라 많은 여행 경비를 지출해야합니다. 이 돈의 합계는 아마도 노인들이 집에서 1 년을 보내기에 충분할 것입니다. 그것에 대해 생각하는 것은 비용 효율적이지 않았으므로 통화 기능을 다시 생각했습니다. 도움을 요청하면, 그것을 되 찾는 것은 매우 현명한 선택이며, 청구되지 않으며, 양을 제한하지 않으며, 무게를 제한하지 않으며, 당신이 가진만큼 많은 것을 가져올 수 있습니다. 코드를 사용하여 다시 시연하겠습니다.
var frog = {name : 'frog', send : 함수 (돈, 음식, 우유, Suagate) {alert (money+food+milk+suagate); }} var Rabbit = {이름 : 'Rabbit'} frog.send.call (Rubbit, 'Money', 'Food', 'Milk', 'Suagate')당신이 부자와 고의적이라면, 당신은 몇 개의 iPhone6 더하기 또는 무언가를 보낼 수도 있습니다. .^_^.
이것에 대해 말하면, 전화는 거의 끝났습니다. 위의 장면 드라마가 전화가 무엇인지 이해하게하는지 모르겠습니다. 그것이 당신의 향수병을 불러 일으키면 죄송합니다.
콜에도 반 형제가 Apply라는 전화도 있습니다. 통화 사용을 이해하면 실제로 동일합니다. 유일한 차이점은 적용이 사물을 전달하는 것을 좋아하지 않으면 한 가지를 가방에 넣는 것이 매우 번거롭게 보이며 환경 친화적이지 않다는 것입니다. 그래서 그는 사물을위한 큰 상자를 제공했고, 당신이 제공하고자하는 모든 것을 제공 한 상자에 넣었습니다. 이 큰 상자는 배열입니다. 위의 예제가 적용 된 상태에서 수행되면 다음과 같습니다.
var frog = {name : 'frog', send : 함수 (돈, 음식, 우유, Suagate) {alert (money+food+milk+suagate); }} var Rabbit = {이름 : 'Rabbit'} // 매개 변수의 차이에주의를 기울여 Frog.send.apply (Rubbit, [Money ','Food ','Milk ','Suagate ']))))위의 것은 적용의 과거와 현재의 삶입니다. 그러나 예기치 않게, 신청하고 전화의 아버지는 몇 년 전 부동산에서 재산을 만들었고, 바인드 바인드라는 불법적 인 아이가있었습니다. 그의 두 형제는 몇 년 후에 데뷔했지만, 그들의 능력은 과소 평가되어서는 안됩니다. 그러나 그의 정체성은 어떤 곳에서는 인식되지 않습니다. 예를 들어, IE6. 다음으로 코드를 사용하여 그의 기술을 보여줄 것입니다.
var name = 'rubbit'; var frog = {name : 'frog', say : function () {settimeout (function (money, milk) {alert (this.name+money+milk)} .bind (this, 'money', 'milk')}} frog.say ();비교를 통해 Bind는 function () {}에 직접 연결될 수 있음이 밝혀졌습니다. 통화 및 적용을 저장하는 것과 동일하며, 함수 후에 전달 될 원금 및 매개 변수를 직접 지정합니다. 시그마를 통과하는 스타일의 관점에서 볼 때, 그것은 전화와 비슷합니다.
바인드와 관련하여 또 다른 고전적인 사용법을 살펴 보겠습니다.
var obj = {name : 'frog'} document.addeventListener ( 'click', function () {alert (this.name); // frog} .bind (obj), false);요약하면, 신청, 전화, 바인딩,이 세 형제의 유사점은 다음과 같습니다.
1. 첫 번째 매개 변수는 정부의 범위, 즉 영토가 작업입니다.
2. 모든 매개 변수를 전달할 수 있습니다
차이점은 다음과 같습니다.
Apply, Call은 더 나은 호환성을 가지고 있으며 일부 하위 버전의 브라우저가 지원하지 않습니다.
적용에 의해 전달되는 매개 변수는 배열로 래핑되어야하며 Call and Bind는 하나씩 나열됩니다.
세 가지 기능 호출, 적용 및 바인딩의 사용에 대한 더 깊은 이해를 얻었습니까? 이 기사가 도움이되기를 바랍니다.