> 웹 프론트엔드 > JS 튜토리얼 > JavaScript에서 적용과 호출의 차이점에 대한 자세한 설명

JavaScript에서 적용과 호출의 차이점에 대한 자세한 설명

黄舟
풀어 주다: 2017-03-21 14:19:47
원래의
1324명이 탐색했습니다.

이번 글에서는 JavaScript의 적용과 호출 관련 지식을 주로 소개합니다. 매우 좋은 참조 값을 가지고 있습니다.

apply와 call

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
로그인 후 복사

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

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 메소드는 실제로 바인드의 매개변수를 기반으로 배열됩니다.

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

아아아아

위 내용은 JavaScript에서 적용과 호출의 차이점에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿