익명 function() 호출에 JavaScript 클래스를 포함시키는 이유는 무엇입니까?

StackOverflow https://stackoverflow.com//questions/12692250

  •  12-12-2019
  •  | 
  •  

문제

저는 Microsoft에서 JavaScript와 유사한 새로운 언어인 타입스크립트.에서 놀이터(예제 섹션), JavaScript 코드로 변환된 TypeScript 구문에 간단한 클래스가 있습니다.Java 프로그래밍 배경을 갖고 있기 때문에 TypeScript에서 컴파일된 JavaScript에서 OOP가 어떻게 수행되는지 배우는 것이 흥미로웠습니다.

TypeScript 코드:

class Greeter {
    greeting: string;
    constructor (message: string) {
        this.greeting = message;
    }
    greet() {
        return "Hello, " + this.greeting;
    }
}   

var greeter = new Greeter("world");

var button = document.createElement('button')
button.innerText = "Say Hello"
button.onclick = function() {
    alert(greeter.greet())
}

document.body.appendChild(button)

그리고 이에 상응하는 JavaScript 코드는 다음과 같습니다.

var Greeter = (function () {
    function Greeter(message) {
        this.greeting = message;
    }
    Greeter.prototype.greet = function () {
        return "Hello, " + this.greeting;
    };
    return Greeter;
})();
var greeter = new Greeter("world");
var button = document.createElement('button');
button.innerText = "Say Hello";
button.onclick = function () {
    alert(greeter.greet());
};
document.body.appendChild(button);

Typescript 부분은 Java와 매우 유사하므로 그 점을 이해합니다.이제 내 질문은 왜 JavaScript에서 Greeter 클래스는 익명에 포함되어 있습니다. function() 부르다?

이렇게 쓰면 어떨까요?

function Greeter(message) {
    this.greeting = message;
}
Greeter.prototype.greet = function () {
    return "Hello, " + this.greeting;
};

각 방법의 장점/단점은 무엇입니까?

도움이 되었습니까?

해결책

다음은 즉시 호출되는 함수 표현:

(function(){ ... })();

전역 범위를 깨끗하게 유지하는 데 사용됩니다.하지만 이 경우 반환 값이 변수에 할당되므로 필요하지 않습니다. Greeter.이 패턴이 유용한 유일한 경우는 "비공개"를 원할 때입니다. 공전 회원.

예:

var Greeter = (function () {
    var foo = 'foo', bar = 'bar'; /* only accessible from function's defined
                                     in the local scope ... */

    function Greeter(message) {
        this.greeting = message;
    }
    Greeter.prototype.greet = function () {
        return "Hello, " + this.greeting;
    };
    return Greeter;
})();

다른 팁

이는 개인 회원을 허용하기 위한 것입니다.이 예에서는 모든 멤버가 공개되므로 두 구성이 동일합니다.그러나 비공개 멤버를 제공하려면 클로저를 통해 호출 범위에서 숨겨야 합니다.따라서 다음과 같은 개인 멤버가 있는 경우:

class Greeter {
    private greeting: string;
    constructor (message: string) {
        this.greeting = message;
    }
    greet() {
        return "Hello, " + this.greeting;
    }
}

아마도 다음과 같은 결과를 얻을 것입니다.

var Greeter = (function () {
    var greeting="";
    function Greeter(message) {
        greeting = message;
    }
    Greeter.prototype.greet = function () {
        return "Hello, " + greeting;
    };
    return Greeter;
})();

인사말 변수는 익명 함수 내에 정의된 모든 함수에서 사용할 수 있지만 다른 곳에서는 보이지 않습니다.

명백한 범위 지정/폐쇄 추론 외에도.자신을 즉시 호출하는 익명 함수를 사용하면 클래스 정의가 미리 로드(해석)됩니다.이를 통해 JIT 최적화가 실행 내에서 전면 로드될 수 있습니다.즉, 더 크고 복잡한 애플리케이션의 경우 성능이 향상됩니다.

익명 함수/자체 실행 클로저는 일반적으로 반환된 값만 외부에서 액세스할 수 있도록 범위를 캡슐화하는 데 사용됩니다.(또는 창과 같은 다른 개체에 부착하는 모든 것)

익명 함수는 아마도 코드의 다른 부분과 이름 충돌을 방지하기 위해 있을 것입니다.이런 식으로 생각해 보면 익명 함수 내에서 "$"라는 변수를 원하는 대로 선언할 수 있으며 동시에 충돌 없이 코드의 다른 부분에서 jQuery를 사용할 수도 있습니다.

클로저는 매개변수를 사용하여 생성자를 호출하는 유일한 수단입니다.

var w = new Greeter("hello")

다른 방법도 있지만 모두 복잡하고 제한 사항과 단점이 있습니다.

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top