JavaScript - 객체 리터럴의 장점

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

  •  05-07-2019
  •  | 
  •  

문제

단순히 함수를 여러 개 작성하는 것보다 객체 리터럴을 사용해야 한다는 내용을 읽었습니다.

지금까지 이해하지 못하기 때문에 누군가 객체 리터럴의 장점이 무엇인지 예를 들어 설명할 수 있습니까?

감사해요

도움이 되었습니까?

해결책

Russ Cam이 말했듯이 전역 네임스페이스를 오염시키는 것을 방지할 수 있습니다. 이는 여러 위치(TinyMCE 등)의 스크립트를 결합하는 오늘날 매우 중요합니다.

Alex Sexton이 말했듯이 이는 좋은 코드 구성에도 도움이 됩니다.

이 기술을 사용하는 경우 모듈 패턴을 사용하는 것이 좋습니다.이것은 여전히 ​​객체 리터럴을 사용하지만 범위 지정 함수의 반환 값으로 사용됩니다.

var MyThingy = (function() {

    function doSomethingCool() {
        ...
    }

    function internalSomething() {
        ....
    }

    function anotherNiftyThing() {
        // Note that within the scoping function, functions can
        // call each other direct.
        doSomethingCool();
        internalSomething();
    }

    return {
        doSomethingCool: doSomethingCool,
        anotherNiftyThing: anotherNiftyThing
    };
})();

외부 사용:

MyThingy.doSomethingCool();

범위 지정 함수는 모든 함수를 래핑한 다음 즉시 호출하고 반환 값을 저장합니다.장점:

  • 함수는 정상적으로 선언되므로 이름.(반면에 {name: function() { ... }} 형식을 사용하면 함수를 참조하는 속성에 이름이 있더라도 모든 함수는 익명입니다.) 이름 도움말 도구는 디버거에 호출 스택을 표시하는 것부터 어떤 함수가 예외를 발생시켰는지 알려주는 것까지 도와줍니다.(2015년 업데이트:최신 JavaScript 사양인 ECMAScript 6판은 JavaScript 엔진이 수행해야 하는 다양한 방법을 정의합니다. 미루다 함수의 이름.그 중 하나는 다음과 같이 함수가 속성에 할당되는 경우입니다. {name: function() { ... }} 예.따라서 엔진이 ES6를 구현하면 이러한 이유는 사라질 것입니다.)
  • 모듈에서만 사용되는 비공개 함수(예: my internalSomething 위에).페이지의 다른 코드는 해당 함수를 호출할 수 없습니다.정말 사적이에요.return 문에서 마지막에 내보낸 항목만 범위 지정 함수 외부에서 볼 수 있습니다.
  • 구현이 완전히 변경된 경우(예: IE-W3C 항목 또는 SVG 대 W3C 항목) 환경에 따라 다양한 기능을 쉽게 반환할 수 있습니다.캔버스 등).

다양한 함수를 반환하는 예:

var MyUtils = (function() {
    function hookViaAttach(element, eventName, handler) {
        element.attachEvent('on' + eventName, handler);
    }

    function hookViaListener(element, eventName, handler) {
        element.addEventListener(eventName, handler, false);
    }

    return {
        hook: window.attachEvent ? hookViaAttach : hookViaListener
    };
})();

MyUtils.hook(document.getElementById('foo'), 'click', /* handler goes here */);

다른 팁

객체 문자 문자 (일명 객체 문자 그럴 패턴)를 사용하면 전 세계적으로 선언 된 많은 기능을 사용하는 것처럼 전역 네임 스페이스를 심각하게 오염시키지 않으며 논리적 방식으로 코드를 구성하는 데 도움이됩니다.

예를 들어,이 개체는 문자 그대로입니다

var obj = {
              find : function(elem) { /* find code */ },
              doSomething: function() { /* doSomething code */ },
              doSomethingElse: function() { /* doSomethingElse code */ }
          }

비교 

function find(elem) { /* find code */ },
function doSomething() { /* doSomething code */ },
function doSomethingElse() { /* doSomethingElse code */ }

3 개에 비해 글로벌 객체에 하나의 속성 만 생성합니다. 그런 다음 SO와 같은 기능을 쉽게 사용할 수 있습니다

obj.doSomething();

Rebecca Murphey는 올해의 jQuery Conference에서 물체 리터럴에 대해 이야기했습니다. 이를 사용하는 가장 좋은 이유 중 하나는 단순히 좋은 코드 조직입니다.

다음은 객체 문자 그럴 패턴에 대한 Rebecca의 글입니다. http://rmurphey.com/blog/2009/10/15/using-objects-to-organize-your-code/

나는 코드를 구성하는 명확한 방법이기 때문에 항상 객체 리터럴을 사용해 왔습니다.그래서 나는 프로토타입을 좋아하지 않습니다. 프로토타입은 너무 지저분합니다.

함수는 객체 리터럴보다 위에서 언급한 것처럼 이름 공간을 오염시키지 않습니다.

다음과 같은 리터럴을 쉽게 작성할 수 있습니다.

var obj = {}
var find = function(elem) { /* find code */ },
var doSomething = function() { /* doSomething code */ },
var doSomethingElse = function() { /* doSomethingElse code */ }

이는 함수와 동일하게 많은 전역 객체를 생성함으로써 오염될 것입니다.마찬가지로 다음을 수행할 수 있습니다.

(function() {
function find(elem) { /* find code */ },
function doSomething() { /* doSomething code */ },
function doSomethingElse() { /* doSomethingElse code */ }
})();

전역 개체를 생성하지 않습니다(JS에서는 모든 것이 개체입니다).

그렇게 하면 여전히 많은 전역 객체를 생성하지 않습니다.

내 생각에는 객체 리터럴에는 두 가지 장점이 있습니다.하나는 jQuery와 같은 많은 플러그인에서 사용되므로 사람들이 더 친숙하고 읽기 쉽습니다.데이터를 플러그인으로 쉽게 전달할 수 있습니다.공개 메소드와 비공개 메소드를 모두 만드는 것은 쉽습니다....

객체의 인스턴스를 생성할 때마다 모든 메소드가 복제되기 때문에 속도가 느려질 수 있습니다.메소드 복사본이 하나 있고 새 객체가 단순히 프로토타입을 참조하기 때문에 프로토타입의 경우에는 그렇지 않다는 것이 제가 이해한 바입니다.

물론 제가 틀렸을 수도 있습니다...

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