Javascript_javascript 기술에서 함수 메서드를 호출하는 여러 가지 방법 소개

JavaScript 구문은 유연하며 동일한 기능을 구현하는 데 5~6가지 방법이 있는 것은 드문 일이 아니며 일부 반인간 프로토타입 상속 및 비동기 기능과 결합되어 더욱 혼란스러워집니다. 전화와 신청의 차이를 잘 이해하지 못하는 경우가 많습니다. 다시는 잊지 않도록 오늘은 녹음해 두겠습니다.

JavaScript에서는 다음과 같은 방법으로 메소드를 실행할 수 있습니다.

1.func(), 이는 가장 직접적이고 일반적인 호출 방법이며 일반 사람들의 사고 논리에도 부합합니다. 그러나 경우에 따라 몇 가지 단점이 있습니다. 이에 대해서는 아래에서 설명하겠습니다.

2. 익명 메서드 호출인 (function(arg){})(window)는 네임스페이스를 구성할 때 더 유용합니다. 다음 괄호 안의 매개 변수는 익명 메서드의 입력 매개 변수에 해당합니다.

3.func.bind(sth)(), mozilla 매뉴얼에서는 바인드가 ECMA-262 5th Edition에 추가된 새로운 기능이라고 언급했는데, 이 기능은 여기에 별도로 나열되어 있습니다. 메서드를 호출하여 직접 호출에서 범위를 바인딩할 수 없는 결함을 보완합니다.

4.func.call()은 두 번째 호출 메소드로, 현재 메소드를 실행하기 위해 각 메소드의 프로토타입에 호출 메소드가 정의되어 있습니다.

5.func.apply(), call의 쌍둥이 형제입니다.

func()

이것은 가장 일반적인 호출 방법이며 모든 언어에서 어디서나 볼 수 있습니다. func(x, y)는 다양한 매개변수를 전달할 수 있습니다. PHP 및 Java와 같은 일부 언어에서는 이 호출만으로 모든 문제를 해결하기에 충분합니다. 그러나 JavaScript는 함수형 언어이며 클로저 개념과 이상한 키워드로 인해 이 호출 메서드의 단점이 결정됩니다. 이는 코드가 다른 세그먼트로 실행됨에 따라 변경되는 현재 코드 세그먼트의 범위로 해석되어야 합니다. 그러나 일부 DOM에 바인딩된 이벤트와 같이 이것이 변경되는 것을 원하지 않는 경우도 있습니다. 우리는 호출될 때 이것이 창 개체로 전송되는 것을 원하지 않지만 다음 코드와 같이 때로는 전송되는 경우도 있습니다.

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

var a ={};
var func = 함수(x) {
console.log(this);
};
a.onclick = function() {
변수 x = 100;
func(x);
};
a.onclick();

즉시 호출하는 대신 정의된 메소드를 onclick 이벤트에 바인딩하려고 하고 이 메소드에 매개변수가 있으므로 페이지의 링크라고 생각하면 됩니다. 그것을 a의 onclick 이벤트에 전달합니다. 문제가 있습니다. 이것은 func에서 전역 개체 창이 됩니다. 분명히 우리는 이것을 원하지 않습니다. 이때 func()를 이용한 직접 호출은 불가능하므로, 이 외부 func를 func 메소드에 바인딩해야 합니다. 그래서 바인드(bind), 호출(call), 적용(apply) 메소드가 있습니다.

바인딩

바인드의 목적은 매우 간단합니다. 이 객체에 바인딩된 동일한 메서드를 반환합니다. 위 코드의 한 줄을 수정하면 이를 개체에 바인딩하는 목적을 달성할 수 있습니다.

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

var a ={};
var func = 함수(x) {
console.log(this);
};
a.onclick = function() {
변수 x = 100;
func.bind(this)(x); // 여기에 바인딩
};
a.onclick();

이렇게 하면 onclick 이벤트가 머리 없는 파리처럼 돌아다니지 않습니다.

전화&신청

전화와 신청은 비슷하기 때문에 함께 언급해야 합니다. 둘 다 여러 매개변수를 지원하며, 첫 번째 매개변수는 바인딩될 this 객체입니다. 두 번째 매개변수는 호출 메서드의 입력 매개변수로 독립 매개변수를 사용하고, Apply는 입력 매개변수로 배열을 사용합니다. . 때로는 이 개체를 변경하고 싶지 않지만 인위적으로 다른 개체에 바인딩하고 싶을 때도 있습니다. 이때 호출 및 적용이 매우 유용합니다. (바인드를 사용할 수 없다는 뜻은 아니지만 바인드가 상대적으로 늦게 등장한 것 같고, 아마도 브라우저 호환성이 좋지 않은 것 같습니다.) 예를 들어보세요:

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

a = {
기능: 기능() {
This.x = 1;
          },
x: 0
};
b = {
아: 아,
x:20
};
for(var i = 0; i b.a.func();
}
console.log(a.x);
console.log(b.x);

위의 a와 b 객체 모두 x를 가지고 있습니다. func가 해당 x를 원하는 방식으로 수정할 수 있기를 바라지만 직접 호출은 func의 범위, 즉 a.x에서만 x를 수정할 수 있습니다. 코드를 수정하면 b.x 수정 목적을 달성할 수 있습니다

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

a = {
기능: 기능() {
This.x = 1;
          },
x: 0
};
b = {
아: 아,
x:20
};
for(var i = 0; i b.a.func.call(b); // 이것을 b에 바인딩
}
console.log(a.x);
console.log(b.x);

이 밤나무는 잘 표현되지 않았고, 다소 무리가 있으며, 쉽게 혼란스러운 코딩 스타일입니다. 적용 가능한 시나리오가 있지만 모든 곳에 적용할 수 있는 것은 아닙니다.