신청, 전화하십시오
JavaScript에는 호출 및 적용이 존재하여 함수가 실행될 때의 컨텍스트 (컨텍스트)를 변경합니다. 다시 말해, 기능 본문 내부의 방향을 변경하는 것입니다.
JavaScript의 주요 특징은 함수가 "정의 컨텍스트"및 "런타임 컨텍스트"및 "컨텍스트가 변경 될 수있는 개념"의 개념이 있다는 것입니다.
먼저 밤나무를 받자 :
function fruits () {} fruits.prototype = {color : "red", say : function () {console.log ( "내 색상은" + this.color);}} var apple = 새 과일; apple.say (); // 내 색이 빨간색입니다그러나 객체 바나나 = {색상 : "옐로우"}가 있다면, 우리는 그것에 대한 방법을 재정의하고 싶지 않다면, 우리는 Apple의 Say Method를 호출 또는 적용하여 사용할 수 있습니다.
바나나 = {색상 : "노란색"} apple.say.call (바나나); // 내 색상은 YellowApple.say.Apply (바나나)입니다. // 내 색이 노란색입니다따라서 전화와 적용이 동적으로 변경되는 것으로 보입니다. 물체에 특정 방법이 없으면 (바나나는이 밤나무에서 방법을 말하지 않음), 다른 것들은 (Apple 은이 밤나무에 말하는 방법을 가지고 있음) 다른 객체 방법과 함께 운영하기 위해 전화를 사용하거나 적용 할 수 있습니다.
적용과 전화의 차이
적용 및 호출 모두에서 기능은 정확히 동일하지만 매개 변수를 수락하는 방법은 다릅니다. 예를 들어 다음과 같이 정의 된 함수가 있습니다.
var func = function (arg1, arg2) {};다음과 같은 방식으로 호출 할 수 있습니다.
func.call (this, arg1, arg2); func.apply (this, [arg1, arg2])
이것이 당신이 지정하려는 컨텍스트 인 경우, 그것은 모든 JavaScript 객체 (JavaScript의 모든 것이 객체입니다) 일 수 있고, 호출은 순서대로 매개 변수를 전달하고 배열에 매개 변수를 넣기위한 수단을 적용해야합니다.
JavaScript에서는 함수의 매개 변수 수가 고정되지 않았으므로 해당 조건을 말하려면 매개 변수를 명확하게 알려진 경우 호출을 사용하십시오.
확실하지 않은 경우 적용을 사용한 다음 매개 변수를 배열로 푸시하여 전달하십시오. 매개 변수 수가 확실하지 않으면 모든 매개 변수는 함수 내부의 인수 배열을 통해 트래버스 될 수 있습니다.
메모리를 통합하고 심화시키기 위해 다음은 몇 가지 일반적인 용도입니다.
배열에 추가하십시오
var array1 = [12, "foo", {name "joe"}, -2458]; var array2 = [ "doe", 555, 100]; Array.prototype.push.apply (Array1, array2); / * array1 값은 [12, "foo", {name "joe"}, -2458, "doe", 555, 100] */입니다.배열에서 최대 및 최소값을 얻으십시오
var 번호 = [5, 458, 120, -215]; var maxinnumbers = math.max.apply (수학, 숫자), // 458maxinnumbers = math.max.call (Math, 5, 458, 120, -215); // 458
숫자 자체에는 최대 방법이 없지만 Math는 그것을 가지고 있으므로 호출 또는 적용과 함께 메소드를 사용할 수 있습니다.
배열인지 확인하십시오 (ToString () 메소드가 다시 작성되지 않은 경우).
functionisArray (obj) {return object.prototype.tostring.call (obj) === '[객체 배열]';}배열 메소드를 사용한 클래스 (의사) 배열
var domnodes = array.prototype.slice.call (document.getElementsByTagName ( "*"));
JavaScript에는 pseudo-array라는 객체 구조가 있습니다. 더 특별한 것은 인수 대상이며, getElementsByTagName, Document.ChildNodes 등을 부르는 사람들도 모두 pseudo-array에 속합니다. 배열에서 푸시, 팝 및 기타 방법을 사용할 수 없습니다.
그러나 array.prototype.slice.call을 길이 속성이있는 객체가있는 실제 배열로 변환하여 Domnodes가 배열 아래에 모든 메소드를 적용 할 수 있습니다.
깊이 이해하고 사용하십시오
응용 프로그램을 이해하고 더 깊이 전화하기 위해 인터뷰 질문을 빌리 봅시다.
Console.log 메소드를 프록시 할 수 있도록 로그 메소드를 정의하십시오. 일반적인 해결책은 다음과 같습니다.
함수 log (msg) {console.log (msg);} log (1); // 1LOG (1,2); // 1위의 방법은 가장 기본적인 요구를 해결할 수 있지만 전달 된 매개 변수 수가 불확실하면 위의 방법이 실패합니다. 현재 Apply 또는 Call 사용을 고려할 수 있습니다. 여기에 전달 된 매개 변수의 수는 확실하지 않으므로 적용하는 것이 가장 좋습니다. 이 방법은 다음과 같습니다.
함수 log () {console.log.apply (콘솔, 인수);}; log (1); // 1LOG (1,2); // 1 2다음 요구 사항은 다음과 같은 각 로그 메시지에 "(APP)"드롭 아웃을 추가하는 것입니다.
로그 ( "Hello World"); // (앱) 안녕하세요 세계
더 우아하게하는 방법? 현재 인수 매개 변수가 의사-어레이라고 생각해야하며, 이는 배열을 통해 표준 배열로 변환 된 다음 배열 메소드를 사용하여 다음과 같이 사용합니다.
함수 log () {var args = array.prototype.slice.call (arguments); args.unshift ( '(app)'); console.log.apply (console, args);};자세한 설명을 바인딩합니다
적용 및 전화에 대해 이야기 한 후 BIND에 대해 이야기합시다. bind () 메소드는 적용 및 호출과 매우 유사하며 기능 본문에서 이것의 포인팅을 변경할 수도 있습니다.
MDN의 설명은 다음과 같습니다. bind () 메소드는 바인딩 함수라고하는 새로운 함수를 만듭니다. 이 바인딩 함수가 호출 될 때, 결합 함수는 바인드 () 메소드가 생성 될 때 Bind () 메소드의 첫 번째 파라미터 및 원래 함수를 호출하기 위해 원래 함수의 매개 변수로서 바인딩 함수 런타임 자체의 매개 변수를 + 바인딩 () 메소드의 두 번째 매개 변수를 사용합니다.
사용 방법을 살펴 보겠습니다. 일반적인 단량체 모드에서는 일반적으로 _this, the the self 등을 사용하여 컨텍스트를 변경 한 후에도 계속 참조 할 수 있도록이를 저장합니다. 이와 같이:
var foo = {bar : 1, eventbind : function () {var _this = this; $ ( '. someClass'). on ( 'click', function (event) {/ * 이벤트 */console.log (_this.bar); // 1});}}JavaScript 별 메커니즘으로 인해 컨텍스트 환경은 eventBind : function () {}로 $ ( '. someClass'). on ( 'click', function (event) {})에서 변경되었습니다. 이를 저장하기 위해 변수를 사용하는 위의 방법은 유용하며 문제가 없습니다. 물론, bind ()를 사용하면이 문제를보다 우아하게 해결할 수 있습니다.
var foo = {bar : 1, eventbind : function () {$ ( '. someclass'). on ( 'click', function (event) {/ * 이벤트 */console.log (this.bar); //1} .bind (this));}}위의 코드에서는 bind ()가 함수를 만듭니다. 이 클릭 이벤트가 호출되면이 키워드는 전달 된 값으로 설정됩니다 (여기서는 bind ()가 호출 될 때 전달되는 매개 변수를 나타냅니다). 그러므로 여기서 우리는 원하는 컨텍스트 (실제로 foo)를 bind () 함수로 전달합니다. 그런 다음 콜백 함수가 실행되면 FOO 객체를 가리 킵니다. 또 다른 간단한 밤 :
var bar = function () {console.log (this.x);} var foo = {x : 3} bar (); // undefinedVar func = bar.bind (foo); func (); // 3여기서 우리는 새로운 기능을 만듭니다. 바인딩 함수를 생성하기 위해 Bind ()를 사용하면 실행되면 Bar ()를 호출 할 때와 같이 글로벌 범위가 아닌 FOO로 설정됩니다.
흥미로운 질문이 있습니다. bind ()가 연속으로 두 번이거나 bind ()가 3 회 연속 인 경우 출력 값은 얼마입니까? 이와 같이:
var bar = function () {console.log (this.x);} var foo = {x : 3} var sed = {x : 4} var func = bar.bind (foo) .bind (sed); func (); //? var fiv = {x : 5} var func = bar.bind (foo) .bind (sed) .bind (fiv); func (); //? var fiv = {x : 5} var func = bar.bind (foo) .bind (sed) .bind (fiv); func (); //?대답은 두 번 모두 예상 4 및 5 대신 여전히 3을 출력한다는 것입니다. 그 이유는 JavaScript에서 여러 번 bind ()가 유효하지 않기 때문입니다. 더 깊은 이유로, bind ()의 구현은 함수를 사용하여 내부적으로 전화 / 신청을 래핑하는 것과 같습니다. 두 번째 bind ()는 첫 번째 bind ()을 다시 감싸는 것과 동일하므로 두 번째 시간 이후의 바인드는 적용 할 수 없습니다.
적용, 전화, 바인딩 비교
그렇다면 적용, 전화 및 바인딩의 차이점과 차이점은 무엇입니까? 사용시기, 적용, 전화 및 바인드를 사용하는시기. 간단한 밤 :
var obj = {x : 81,}; var foo = {getx : function () {return this.x;}} console.log (foo.getx.bind (obj) ()); //81console.log(foo.getx.call(Obj)); //81console.log(foo.getx.apply(Obj)); //81console.log(foo.getx.apply(Obj)); //81console.log(foo.getx.apply(Obj)); // 81세 가지 출력은 모두 81이지만 Bind () 메소드를 사용하여 나중에 더 많은 괄호가있는 것에주의를 기울입니다.
즉, 차이점은 컨텍스트를 변경하고 즉시 실행하는 것이 아니라 콜백을 변경하려는 경우 BIND () 메소드를 사용한다는 것입니다. 적용/통화는 즉시 함수를 실행합니다.
다시 요약하자 :
• 적용, 호출, 바인드는 모두 기능 의이 객체의 포인팅을 변경하는 데 사용됩니다.
• 적용, 호출 및 바인딩의 첫 번째 매개 변수는 이것이 지적하고자하는 개체, 즉 당신이 지정하려는 컨텍스트입니다.
• 적용, 호출 및 바인드는 모두 후속 매개 변수를 사용하여 매개 변수를 전달할 수 있습니다.
• Bind는 해당 기능을 반환하며 나중에 호출하기 쉽습니다. 신청하고 전화는 즉시 호출됩니다.
위의 것은 편집자가 소개 한 JavaScript에서 적용, 전화 및 바인드를 영리하게 사용하는 것입니다. 나는 그것이 당신에게 도움이되기를 바랍니다. 궁금한 점이 있으면 메시지를 남겨 주시면 편집자가 제 시간에 답장을 드리겠습니다. Wulin.com 웹 사이트를 지원해 주셔서 대단히 감사합니다!