javascript_기본지식 중 Apply, Call, Bind 사용법의 차이점

JS에서는 이 세 가지를 함수의 this 객체의 포인트를 변경하는 데 사용합니다.

차이점에 대해 이야기하기 전에 세 가지의 유사점을 요약해 보겠습니다.

1. 모두 함수의 this 개체의 지점을 변경하는 데 사용됩니다.

2. 첫 번째 매개변수는 이것이 가리키는 객체입니다.

3. 후속 매개변수를 사용하여 매개변수를 전달할 수 있습니다.

그럼 차이점이 무엇인지 먼저 예를 살펴보겠습니다.

        var xw = {
            name : "小王",
            gender : "男",
            age : 24,
            say : function() {
                alert(this.name + " , " + this.gender + " ,今年" + this.age);                
            }
        }
        var xh = {
            name : "小红",
            gender : "女",
            age : 18
        }
        xw.say();

그 자체로는 별로 할 말이 없습니다. 올해 24살 남성 Xiao Wang이겠죠.
그러면 xw의 say 메소드를 사용하여 xh의 데이터를 표시하는 방법은 무엇입니까?
통화하려면 다음을 수행하세요.

1.xw.say.call(xh);

신청하려면 다음을 수행하세요.

1.xw.say.apply(xh);

바인드의 경우 다음과 같아야 합니다.

1.xw.say.bind(xh)();

xw.say.bind(xh)를 직접 작성하면 결과가 나오지 않습니다. call과 apply 모두 함수에 대한 직접 호출이고, 바인딩 메서드는 여전히 함수를 반환하므로 나중에 호출하려면 ()이 필요합니다.
그렇다면 전화와 신청의 차이점은 무엇입니까? 예제를 조금 다시 작성해 보겠습니다.

        var xw = {
            name : "小王",
            gender : "男",
            age : 24,
            say : function(school,grade) {
                alert(this.name + " , " + this.gender + " ,今年" + this.age + " ,在" + school + "上" + grade);                
            }
        }
        var xh = {
            name : "小红",
            gender : "女",
            age : 18
        }

say 메소드에 두 개의 매개변수가 더 있는 것을 볼 수 있습니다. 매개변수를 호출/적용 매개변수를 통해 전달합니다.
통화의 경우입니다

1.xw.say.call(xh,"실험 초등학교","6학년"); 

신청은 이렇습니다

1.xw.say.apply(xh,["실험 초등학교","6학년"]);

차이점이 보이시나요? 호출 후의 매개변수는 say 메소드와 일대일로 대응하고, apply의 두 번째 매개변수는 배열의 요소와 일대일로 대응합니다. 이것이 둘의 가장 큰 차이점이다.

그렇다면 바인딩은 매개변수를 어떻게 전달합니까? 호출과 같은 매개변수를 전달할 수 있습니다.

1.xw.say.bind(xh,"실험 초등학교","6학년")();

그러나 바인딩은 여전히 ​​함수를 반환하므로 호출 시 매개변수를 전달할 수도 있습니다.

1.xw.say.bind(xh)("실험 초등학교","6학년");

위 자바스크립트에서 Apply, Call, Bind 사용법의 차이점은 모두 에디터가 공유한 내용이므로 참고가 되셨으면 좋겠습니다. Script Home에 많은 지원 부탁드립니다.