JavaScript에서 Apply와 Call, Call과 Bind의 차이점에 대한 사용예를 자세히 설명합니다.

적용과 호출의 차이점

ECMAScript 사양은 모든 함수에 대해 호출과 적용이라는 두 가지 메서드를 정의하며, 두 메서드는 널리 사용되며 해당 함수는 매개 변수를 전달하는 형식만 다릅니다.

apply( )

apply 메소드는 두 개의 매개변수를 전달합니다. 하나는 함수 컨텍스트로서의 객체이고 다른 하나는 함수 매개변수로 구성된 배열입니다.

var obj = {
 name : 'linxin'
}
function func(firstName, lastName){
 console.log(firstName + ' ' + this.name + ' ' + lastName);
}
func.apply(obj, ['A', 'B']); // A linxin B

obj가 함수 컨텍스트로 사용되는 객체이고 함수 func의 this가 obj 객체를 가리키는 것을 볼 수 있습니다. 매개변수 A와 B는 배열에 배치되고 각각 func 매개변수의 목록 요소에 해당하는 func 함수로 전달됩니다.

call( )

call 메서드의 첫 번째 매개변수도 함수 컨텍스트의 개체이지만 나중에 전달되는 것은 단일 배열이 아닌 매개변수 목록입니다.

var obj = {
 name: 'linxin'
}
function func(firstName, lastName) {
 console.log(firstName + ' ' + this.name + ' ' + lastName);
}
func.call(obj, 'C', 'D');  // C linxin D

적용을 비교해보면 C와 D가 배열에 배치되지 않고 별도의 매개변수로 func 함수에 전달된다는 차이점을 알 수 있습니다.

사실 언제 어떤 방법을 사용할지 고민할 필요가 없습니다. 매개변수가 이미 배열에 존재하는 경우 자연스럽게 적용을 사용합니다. 매개변수가 흩어져 있고 서로 상관관계가 없으면 호출을 사용합니다.

적용 및 호출 사용법

1. 이것을

var obj = {
 name: 'linxin'
}
function func() {
 console.log(this.name);
}
func.call(obj);  // linxin

을 가리키도록 변경합니다. 우리는 호출 메소드의 첫 번째 매개변수가 함수 컨텍스트인 객체라는 것을 알고 있습니다. 여기서 obj는 다음과 같이 전달됩니다. 매개변수 func, 함수의 this는 obj 객체를 가리킵니다. 여기에서 func 함수는 실제로

function func() {
 console.log(obj.name);
}

2와 동일합니다. 다른 객체에서 메서드를 빌리는 것

먼저 예제를 보세요

var Person1 = function () {
 this.name = 'linxin';
}
var Person2 = function () {
 this.getname = function () {
  console.log(this.name);
 }
 Person1.call(this);
}
var person = new Person2();
person.getname();  // linxin

위에서 우리는 객체 person이 다음에 의해 인스턴스화된 것을 볼 수 있습니다. Person2 Person1의 이름은 getname 메소드를 통해 가져옵니다. Person2에서 Person1.call(this)의 함수는 this 객체 대신 Person1 객체를 사용하는 것이므로 Person2는 Person1의 모든 속성과 메서드를 가지며 이는 Person1의 속성과 메서드를 상속하는 Person2와 동일합니다.

3. 함수 호출

apply 및 call 메소드를 사용하면 함수가 즉시 실행되므로 함수 호출에도 사용할 수 있습니다.

function func() {
 console.log('linxin');
}
func.call();   // linxin

call과 바인딩의 차이점

EcmaScript5에서는 바인딩이라는 메소드가 확장되어 IE 하위 버전과 호환되지 않습니다. 이는 호출과 매우 유사합니다. 첫 번째 매개변수는 함수 컨텍스트인 객체이고, 매개변수의 두 번째 부분은 여러 매개변수를 받을 수 있는 목록입니다.

이들의 차이점은 다음 두 가지 점입니다.

1.bind는 함수를 반환합니다.

var obj = {
 name: 'linxin'
}
function func() {
 console.log(this.name);
}
var func1 = func.bind(obj);
func1();      // linxin

bind 메서드는 즉시 실행되지 않고 컨텍스트를 변경하는 함수를 반환합니다. 그러나 원래 함수 func에서는 이 값이 변경되지 않았으며 여전히 전역 개체 창을 가리킵니다.

2. 매개변수 사용

function func(a, b, c) {
 console.log(a, b, c);
}
var func1 = func.bind(null,'linxin');
func('A', 'B', 'C');   // A B C
func1('A', 'B', 'C');   // linxin A B
func1('B', 'C');    // linxin B C
func.call(null, 'linxin');  // linxin undefined undefined

호출은 두 번째 이후의 매개변수를 func 메소드의 실제 매개변수로 전달하는 것이며, func1 메소드의 실제 매개변수는 바인딩 위로 갔다가 뒤로 가세요.

낮은 버전의 브라우저에는 바인딩 방법이 없으며 직접 구현할 수도 있습니다.

rreee

위 내용은 JavaScript에서 Apply와 Call, Call과 Bind의 차이점에 대한 사용예를 자세히 설명합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!