programing

콜론이있는 자바 스크립트 반환

sourcetip 2021. 1. 14. 23:43
반응형

콜론이있는 자바 스크립트 반환


나는 JavaScript를 배우고 있으며 아래 구조를 보았습니다.

var Test = (function () {

  function func1() {
      //do something.....
  }

  function func2() {
      //do something.....
  }

  function func3() {
      //do something.....
  }

  return {
      func1: func1,
      func2: func2,
      func3: func3
  };

})();

리턴 블록이 무엇을하는지 궁금합니다. 이것은 매우 일반적으로 사용되는 JavaScript 구조입니까? 이에 대한 자세한 정보는 어디서 얻을 수 있는지 알려주십시오.


이것이 드러내는 모듈 패턴 입니다.

반환 된 개체에는 IIFE 내부에 정의 된 함수에 대한 참조가 포함됩니다. 따라서 내부에 정의 된 함수는 익명 함수 전용 입니다.

그러나 내부 함수를 외부에서 사용하려면 반환 된 객체를 사용할 수 있습니다.

의 값이 Test됩니다

var Test = {
    func1: func1,
    func2: func2,
    func3: func3
};

그리고 func1외부에서 전화 걸 수 있습니다.

Test.func1();

이것이 Javascript가 클래스를 에뮬레이트 하는 방법 입니다. 모듈 패턴을 사용하는 가시성 지정자가 없기 때문에 변수 / 메소드는 공개 / 비공개로 만들 수 있습니다.

여기에 이미지 설명 입력

드러나는 모듈 패턴은 모듈 패턴에서 영감을 얻었습니다. 공개 모듈 패턴에서 전용 변수 / 메서드에 대한 참조 만 객체에 반환됩니다 .

패턴 뒤에있는 주요 아이디어는 사악한 전역 변수를 피하는 것 입니다. 함수 대신 객체가 반환된다는 점을 제외하면 IIFE와 비슷합니다. IIFE 내부에 정의 된 변수 / 메소드 는 함수 전용 입니다. IIFE 내부의 변수 / 메서드에 액세스하려면 반환 된 객체에 추가해야하며 IIFE 외부에서 액세스 할 수 있습니다. 이 패턴은 클로저를 활용 하므로 IIFE 내부에 정의 된 변수 / 메서드는 객체가 반환 된 후에도 액세스 할 수 있습니다.

Addy Osmani의 책 Learning Javascript Design patterns에서

Revealing Module 패턴은 Heilmann이 하나의 공용 메서드를 다른 공용 메서드에서 호출하거나 공용 변수에 액세스하려고 할 때 주 개체의 이름을 반복해야한다는 사실에 실망했기 때문에 발생했습니다. 그는 또한 그가 공개하고자하는 것들을 객체 리터럴 표기법으로 전환해야한다는 모듈 패턴의 요구 사항을 싫어했습니다.

그의 노력의 결과는 우리가 모든 함수와 변수를 private 범위에 간단히 정의하고 공개로 공개하고자하는 private 기능에 대한 포인터가있는 익명 객체를 반환하는 업데이트 된 패턴이었습니다.

장점 :

  1. 캡슐화. IIFE 내부의 코드는 외부 세계에서 캡슐화됩니다.
  2. 깨끗하고 체계적이며 재사용 가능한 코드
  3. 은둔. 개인 변수 / 메소드를 생성 할 수 있습니다. IIFE 외부에서 개인 변수 / 메서드를 건드릴 수 없습니다.

단점 :

  1. If a private function refers to a public function, that public function can't be overridden

Further Reading:

  1. https://en.wikipedia.org/wiki/Module_pattern
  2. https://carldanley.com/js-revealing-module-pattern/
  3. How to use Revealing module pattern in JavaScript

EDIT

From comment from @Mike

It's of note that it's common to create an object (eg, var me = {};) and then declare the would-be public members on it (me.func1 = function() { /* ... */ };), returning that object at the end (return me;). This avoids the repetition that we see in the return statement of OP's code (where all the public stuff is repeated).


It's a literal object in the return statement. It's like creating an object and then returning it:

var obj = {
    func1: func1,
    func2: func2,
    func3: func3
};
return obj;

The literal object syntax creates an object and sets its properties, just like:

var obj = new Object();
obj.func1 = func1;
obj.func2 = func2;
obj.func3 = func3;
return obj;

객체를 반환하는 목적은 함수가 사용할 수있는 개인 변수에 대한 범위를 만드는 동안 함수 내부의 함수를 코드 외부에 공개하는 것입니다.

전용 변수를 사용하지 않는 경우 코드는 다음과 같은 작업을 수행합니다.

var Test = {
  func1: function() {
      //do something.....
  },
  func2: function() {
      //do something.....
  },
  func3: function() {
      //do something.....
  }
};

전용 변수는 함수 범위 내에서 선언되며 그 안에있는 함수에서만 도달 할 수 있습니다. 예:

var Test = (function () {

  var name;

  function setName(str) {
    name = str;
  }

  function getName() {
    return name;
  }

  return {
      setName: setName,
      getName: getName
  };

})();

Test.setName("John Doe");
var name = Test.getName();

다른 프로그래밍 언어의 수업처럼 작동합니다. 따라서을 func1사용하여 공용 멤버에 액세스 하고을 사용하여 Test.func1일반 함수처럼 호출 할 수 있습니다 Test.func1().

참조 URL : https://stackoverflow.com/questions/32496076/javascript-return-with-colon

반응형