머리말
Call (), apply () 및 bind () 메소드를 통해이 객체에서 상속하지 않고 다른 객체에서 메소드를 쉽게 빌릴 수 있습니다.
JavaScript의 차용 방법
JavaScript에서는 다른 객체의 기능 또는 방법을 객체 자체 나 프로토 타입에 반드시 정의 할 필요는 없습니다. Call (), apply () 및 bind () 메소드를 통해 다른 객체를 상속하지 않고 쉽게 빌릴 수 있습니다. 이것은 전문 JavaScript 개발자가 사용하는 일반적인 방법입니다.
프로토 타입 방법
문자열, 숫자 및 부울과 같은 변하지 않는 원시 데이터 유형을 제외하고 JavaScript에서는 거의 모든 데이터가 객체입니다. 배열은 순서 시퀀스를 가로 지르고 변환하는 데 적합한 객체입니다. 프로토 타입에는 슬라이스, 결합, 푸시 및 팝과 같은 사용하기 쉬운 방법이 있습니다.
일반적인 예는 객체와 배열이 모두 목록 유형의 데이터 구조 일 때 객체가 배열에서 방법을 "빌려"할 수 있다는 것입니다. 빌린 가장 일반적인 방법은 Array.prototype.slice 입니다.
function myfunc () {// error, 인수는 실제 배열 인수가 아니라 객체와 같은 배열입니다. // 배열 메서드는 프로토 타입에서 슬라이스를 깎습니다. 객체와 같은 배열 (key : value) // 실제 배열 var args = array.prototype.slice.call (arguments)을 반환합니다. // args는 이제 실제 배열이므로 Args.sort ()에서 sort () 메소드를 사용할 수 있습니다. } myfunc ( 'Bananas', 'Cherries', 'Apples');전화 및 적용 방법은 다른 상황에서 호출 기능을 허용하기 때문에 차용 방법이 작동하며, 이는 다른 개체를 상속하지 않고도 기존 기능을 재사용하는 좋은 방법입니다. 실제로 배열은 조인 및 필터와 같은 프로토 타입에서 많은 공통 방법을 정의합니다.
// "abc"문자열을 가져 와서 "a | b | carray.prototype.join.call ( 'abc', '|'); // 모든 비 Vowelsarray.prototype.filter.call ( 'abcdefghijk', function (val) {return [ 'a', 'e', ',', ',', ',') -1;}). join ( ''); 객체는 배열 방법뿐만 아니라 문자열도 빌릴 수 있음을 알 수 있습니다. 그러나 일반적인 방법은 프로토 타입에 정의되므로 방법을 빌릴 때마다 String.prototype 또는 Array.prototype 사용해야합니다. 이와 같이 글을 쓰는 것은 매우 장점이며 곧 성가 시게 될 것입니다. 보다 효율적인 방법은 리터럴을 사용하여 동일한 목적을 달성하는 것입니다.
문자 적 대출 방법 사용
리터럴은 JavaScript 규칙을 따르는 구문 구조이며, MDN은 다음과 같이 설명합니다.
JavaScript에서 리터럴을 사용하면 값을 나타낼 수 있습니다. 고정 값, 변수 또는 문자 그대로 스크립트에 제공됩니다.
리터럴은 프로토 타입으로 축약 할 수 있습니다.
[] .slice.call (arguments); []. join.call ( 'abc', '|'); ''.
이것은 그렇게 말이되지 않는 것처럼 보이지만, 방법을 빌리려면 []와 ""에서 직접 작동 해야하는 것은 여전히 못 생겼습니다. 변수를 사용하여 리터럴 및 메소드에 대한 참조를 저장할 수 있으므로 작성하기 쉽습니다.
var slice = [] .slice; slice.call (arguments); var join = [] .join; join.call ( 'abc', '|'); var touppercase = ''.touppercase; touppercase.call ([ '소문자', '단어', 'in', 'a', 'sentence'). split ( ',');
차용 방법에 대한 참조를 사용하면 Call ()로 쉽게 호출 할 수 있으며 코드를 재사용 할 수도 있습니다. 중복성을 줄이는 원리를 준수하면 전화 할 때마다 전화 () 또는 apply ()를 작성하지 않고도 방법을 빌릴 수 있는지 확인해 보겠습니다.
var slice = function.prototype.call.bind (array.prototype.slice); slice (인수); var join = function.prototyp.call.bind (array.prototype.join); join ( 'abc', '|'); var touppercase = function.prototype.call.bind (String.prototype.toupperCase); toupperCase ([ '소문자', 'Word', 'in', 'a', 'sentence']. split ( ',');
보시다시피, 이제 다른 프로토 타입에서 "빌린"메소드를 정적으로 바인딩하기 위해 Function.prototype.call.bind 사용할 수 있습니다. 그러나 문장 var slice = Function.prototype.call.bind(Array.prototype.slice) 실제로 작동합니까?
function.prototype.call.bind를 이해하십시오
Function.prototype.call.bind 언뜻보기에 약간 복잡해 보일 수 있지만 작동 방식을 이해하는 데 매우 도움이 될 수 있습니다.
Function.prototype.call 함수를 "호출"하고 함수에서 사용하기위한 "이"값을 설정하는 참조입니다.
"Bind"는 "이"값으로 새로운 기능을 반환합니다. 따라서 .bind(Array.prototype.slice) 로 반환 된 새로운 함수의 "이것"은 항상 배열 .prototype.slice 함수입니다.
요약하면, 새 함수는 "호출"함수를 호출하고 "this"는 "슬라이스"기능입니다. Slice () 호출은 이전에 자격을 갖춘 방법을 가리 킵니다.
개체를 사용자 정의하는 방법
상속은 훌륭하지만 개발자는 일반적으로 객체 나 모듈 사이의 일반적인 기능을 재사용하려고 할 때 사용합니다. 코드 재사용을 위해서만 상속을 사용할 필요는 없습니다. 간단한 차용 방법은 대부분의 경우 복잡 할 수 있기 때문입니다.
우리는 이전에 기본 방법을 차용하는 것에 대해서만 논의했지만 방법을 빌리는 것은 괜찮습니다. 예를 들어, 다음 코드는 Points 게임의 플레이어 점수를 계산할 수 있습니다.
var scorecalculator = {getsum : function (results) {var score = 0; for (var i = 0, len = results.length; i <len; i ++) {score = score+results [i]; } 반환 점수; }, getScore : function () {return scorecalculator.getSum (this.Results) / this.Handicap; }}; var player1 = {결과 : [69, 50, 76], 핸디캡 : 8}; var player2 = {결과 : [23, 4, 58], 핸디캡 : 5}; var score = function.prototype.call.bind (scorecalculator.getScore); // 점수 : 24.375Console.Log ( 'score :' + score (player1)); // 점수 : 17Console.Log ( 'score :' + score (player2));위의 예는 매우 무뚝뚝하지만 기본 방법과 마찬가지로 사용자 정의 방법을 쉽게 빌릴 수 있음을 알 수 있습니다.
요약
전화, 바인드 및 적용은 기능이 호출되는 방식을 변경할 수 있으며 차용 할 때 종종 사용됩니다. 대부분의 개발자는 기본 방법을 차용하는 데 익숙하지만 맞춤형 방법을 거의 빌리지 않습니다.
최근 몇 년 동안 JavaScript의 기능 프로그래밍이 잘 발전했습니다. function.prototype.call.bind를 사용하는 방법을 사용하는 방법은 더 편리합니까? 그러한 주제가 점점 더 일반화 될 것으로 추정됩니다.
위는 JavaScript의 차용 방법의 요약입니다. 모든 사람이 JavaScript의 차용 방법을 이해하는 것이 도움이되기를 바랍니다.