>웹 프론트엔드 >JS 튜토리얼 >js의 call() 및 apply() 이해

js의 call() 및 apply() 이해

一个新手
一个新手원래의
2017-10-26 10:14:201981검색

JavaScript를 배울 때 call()과 apply()의 사용법을 이해하는 것은 항상 어려운 일입니다. 많은 친구들이 나와 같은 생각을 가지고 있다고 생각합니다. 이제 친구들과 공유해보세요.

call

구문: call([thisObj[,arg1[, arg2[, [,.argN]]]]])
정의: 개체의 메서드를 호출하고 현재 개체를 다른 개체로 바꿉니다.

구문과 정의를 읽어도 여전히 이해하기 어렵습니다. 호출 함수는 현재 작업의 개체이고 다음 매개 변수는 호출되는 메서드의 매개 변수입니다. 아직 이해하기 어렵습니다. 코드:

function Teacher(name, age) {  //定义一个构造函数Teacher
    this.name = name;
    this.age = age;
    this.intro = function() {
        alert("My name is " + this.name + "," + "I'm " + this.age)
    }
}

function Student(name, age) {  //定义一个构造函数Student
    Teacher.call(this, name, age);  //Student调用了Teacher的方法
}
var studentA = new Student("Lily", 19); //实例化一个studentA,传入参数
studentA.intro(); //调用studentA的intro方法 输出:My name is Lily,I'm 19

  위의 예에서 StudentA는 Student 생성자의 모든 상속 가능한 메서드를 통해 인스턴스화되지만 Student 함수에는 메서드가 없습니다. , 그러나 Student는 이를 호출하므로 Teacher의 메소드를 상속받았으므로 StudentA에도 intro() 메소드가 있습니다. 코드의 열 번째 줄은 Teacher.call(this, name, age)의 핵심 역할을 합니다. 이 문장의 기능은 현재 개체가 다른 개체의 메서드를 호출하도록 하는 것입니다. 여기서 this 키워드는 Student() 개체를 참조합니다. . 인스턴스화 후에는 StudentA 개체를 참조하며 다음 매개변수는 Teacher가 전달한 매개변수입니다. 위의 예는 흔하지는 않지만 다음과 같은 코드를 자주 볼 수 있습니다.

var str="你好美女";
Array.prototype.join.call(str,"!");    //你!好!美!女

 join 메서드는 Array() 생성자의 프로토타입에 정의된 메서드이므로 인스턴스화하는 배열은 다음과 같습니다. 모두 이 메소드를 상속받았지만 문자열 str에는 조인 메소드가 없지만 여기서는 배열의 조인 메소드를 빌려 문자열을 처리합니다. call의 왼쪽에 있는 표현식은 빌린 객체의 메소드이고, call()의 첫 번째 매개변수 객체는 call의 왼쪽에 있는 표현식 객체의 메소드를 빌린 것입니다(이해할 수 있을지 모르겠습니다. 그러니 이만 할게요).

apply

apply() 메소드는 전달된 매개변수가 다르다는 점을 제외하면 호출 메소드와 기능이 동일합니다.

구문: ​​apply([thisObj[,argArray]])
정의: 개체의 메서드를 적용하고 현재 개체를 다른 개체로 바꿉니다.

apply의 첫 번째 매개변수는 call과 동일하고 두 번째 매개변수는 배열 객체입니다(array-like도 사용 가능). 더 이상 단일 매개변수 목록 형태로 매개변수를 전달하지 않고 모든 매개변수를 In에 넣습니다. 배열을 함께 전달하세요. 여기서 우리는 모든 함수에 존재하고 함수의 모든 실제 매개변수로 구성된 배열과 유사한 객체인 인수 객체에 대해 이야기해야 합니다. 따라서 apply의 두 번째 매개변수는 인수 객체에 전달됩니다. 다음 예를 보세요:

var arr=[2,3,12,5,234,199,21,1000,2432];
var max=Math.max.apply(Math,arr);
console.log(max); //2432

배열에서 최대값을 찾는 메소드는 없지만 Math 객체에 최대값을 찾는 max가 있으므로 Apply 메소드를 사용하여 배열이 max( ) 배열에서 최대값을 찾기 위한 Math의 메소드, 위와 동일한 메소드를 call() 메소드로 대체할 수도 있지만 작성하기가 더 번거롭고 읽기도 쉽지 않습니다. 코드는 다음과 같습니다.

var max=Math.max.call(Math,2,3,12,5,234,199,21,1000,2432);
console.log(max); //2432

가장 call과 apply의 기본 사용법은 물론 이 두 가지 기능이 훨씬 더 많은 장점을 갖고 있으며 전문가도 추가할 수 있습니다.


위 내용은 js의 call() 및 apply() 이해의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.