javascript 클로저 JS.call() 메서드를 사용하는 이유는 무엇입니까?




자바스크립트 클로저 (4)

JS에서 call () 메서드를 사용하는 이유가 무엇인지 관심이 있습니다. this 호출하는 일반적인 방법이 중복 된 것처럼 보입니다.

예를 들어 call ()이있는 코드가 있습니다.

var obj = {
    objType: "Dog"
}

f = function(did_what, what) {
    alert(this.objType + " " + did_what + " " + what);
}

f.call(obj, "ate", "food");

출력은 "Dog ate food"입니다. 그러나 동일한 결과를 객체에 할당 할 수 있습니다.

var obj = {
    objType: "Dog"
}

f = function(did_what, what) {
    alert(this.objType + " " + did_what + " " + what);
}

obj.a = f;
obj.a("ate", "food");

결과는 같습니다. 그러나이 방법은 이해하기 쉽고 사용하기 편리합니다. 왜 call ()이 필요한가?


예제에서 두 번째 방법을 사용할 수도 있지만 한 객체의 기능을 다른 객체에 사용하려는 경우가 있습니다. 예를 들어, NodeList 와 같은 Array와 유사한 객체에서 Array 메소드를 사용하는 경우

var el = document.getElementById("foo");
[].forEach.call(el.children, function(child, index) {
    //Iterate over an element's children, performing an action on each one
});

그것은 1 등석 함수 의 개념과 관련이 있습니다 . 기본적으로 Javascript와 같은 언어를 사용하면 함수를 함수로 처리 할 수 ​​있습니다. 함수는 변수에 저장되거나 다른 함수로 전달 될 수 있습니다.

call() 은 다른 객체에 붙어 있지 않은 독립 함수를 실행하는 방법을 제공합니다.


callcall 된 함수에서 사용될 범위를 제어하려고 할 때 사용됩니다. this 키워드를 함수에 할당 한 범위 이외의 다른 키워드로 사용하려는 경우 call 또는 apply 를 사용하여 자신의 범위로 함수를 호출 할 수 있습니다.

F.ex 또한 "private"함수를 사용할 때와 같이 범위 밖의 유틸리티 메소드를 호출 할 수 있습니다.

var obj = (function() {
    var privateFn = function() {
        alert(this.id);
    }
    return {
        id: 123,
        publicFn: function() {
            privateFn.call(this);
        }
    };
}());

obj.publicFn();

위의 예에서 privateFnobj 노출되지 않지만 공용 범위의 일부인 것처럼 ( this 방식을 사용하여) 여전히 구성 할 수 있습니다.


2017 업데이트

Function.prototype을 통한 모든 함수에는 .call 메서드가 있습니다. .call() 을 사용하는 이유는 " this "변수가 무엇을 의미하는지 지정하기 위해서입니다.

MDN은 다음을 지정합니다 :

call() 메소드는이 값과 인수가 개별적으로 제공되는 함수를 호출합니다.

다음을 고려하세요:

function x() {
    return this;
}

x()

엄격 모드에서 x() 는 엄격하지 않은 모드에서 undefined 를 반환하고 브라우저 컨텍스트에서 Global 객체 인 Window 를 반환합니다.

.call() 을 사용하여 " this "가 무엇을 나타내는 지 알려줍니다.

function x() {
    return this;
}

var obj = {
    myName      : 'Robert',
    myLocation  : 'Earth'
}

x.call(obj);

결과 : {myName: "Robert", myLocation: "Earth"} 위의 예제에서 우리는 obj 객체를 x() 함수 내부의 this 값으로 지정합니다.

OOP에서 상속을 에뮬레이션하는 데 사용할 수 있습니다.

예:

var Robert = {
    name: "Robert Rocha",
    age: 12,
    height: "5,1",
    sex: "male",
    describe: function() {
        return "This is me " + this.name + " " + this.age + " " + this.height + " " + this.sex;
    }
};

위가 마스터 객체 (프로토 타입)이고 다른 객체에 describe 된 함수를 상속한다고 가정 해 보겠습니다.

var Richard = {
    name: "Richard Sash",
    age: 25,
    height: "6,4",
    sex: "male",
}

Richard 객체에는 describe 함수가 없으므로 함수를 상속, 즉 상속하기를 원합니다. 당신은 그렇게 할 것입니다 :

console.log( Robert.describe.call( Richard ) );

출력 : This is me Richard Sash 25 6,4 male





this