자바 스크립트 개체 : 리터럴 대 생성자

Question

자바 스크립트 개체를 만들 때 리터럴 또는 생성자 방식을 사용할 수 있습니다. 컨스트럭터 방식으로, 우리는 말한다;

function myObj(){ 
this.myProp1 = "abc"; 
this.myProp2 = "xyz"; 
} 

리터럴 방식으로 말하면, 우리는 생성자 방식의 경우에는 "this.myProp1"를 사용하고 "이"리터럴 방법으로 사용하지 않는 이유와 같은 차이가 왜, 속성을 선언 할 때

var myObj = { 
myProp1:"abc", 
myProp2:"xyz", 
} 

내 질문은?

Answer 1

문자 그대로를 정의 할 때 객체는 코드에서 직접 작성됩니다. 그것이 완료 될 때까지 아직 존재하지 않습니다. 이 시점에서 this은 아무런 의미가 없습니다 (아무 것도 필요하지 않음).

오브젝트 생성 기능에서 이것을 이해하려면 먼저 this이 JavaScript에서 특수하다는 것을 알아야합니다. 함수를 호출 할 때마다 this이 되길 원하는 모든 것을 전달할 수 있습니다. 일반적으로 이벤트 핸들러와 같은 것은 이벤트 유발 DOM 객체를 this으로 전달합니다. 코드에서이 작업은 MyFunction.call(whatever_needs_to_be_this[, param0, param1]);으로 수행합니다. 새 연산자를 사용하는 경우, 같은 var mything = new SomeThing();로, 자바 스크립트는 기본적으로 같은 일을하고있다 :이 경우

var mything = {}; 
SomeThing.call(mything); 

this이 함수에 mything을 될 것입니다.

Answer 2

두 가지 주요 차이점은 사용 방법에 있습니다. 그 이름에서 알 수 있듯이 생성자는 객체의 여러 인스턴스를 만들고 설정하도록 설계되었습니다. 반면에 객체 리터럴은 문자열 및 숫자 리터럴과 같이 일회성이며 구성 객체 또는 전역 단독 (예 : 네임 스페이스)으로 자주 사용됩니다.

은 첫 번째 예제에 대해 몇 가지 미묘한 차이가주의하는 것이 있습니다 코드가 실행되면

, 익명 함수가 생성되고 myObj에 할당,하지만 아무것도 다른 일이 없습니다. methodOne 및 methodTwo은 myObj이 명시 적으로 호출 될 때까지 존재하지 않습니다. myObj 호출 방법에 따라
는 , 방법 methodOne 및 methodTwo는 다른 장소에서 끝날 것이다 :

myObj() : 어떤 컨텍스트가 제공되지 않기 때문에
이 window에 this 기본값과 방법은 글로벌 될 것 .

var app1 = new myObj() :
키워드로 인해 새 개체가 만들어져 기본 컨텍스트가됩니다. this은 새 개체를 참조하며 메서드는 새 개체에 할당되고 이후에 app1에 할당됩니다. 그러나 myObj.methodOne은 정의되지 않은 상태로 유지됩니다.

myObj.call(yourApp)

:
이 내 myObj를 호출하지만 또 다른 목적은, yourApp로 컨텍스트를 설정합니다. 메서드는 yourApp에 할당되고 yourApp의 모든 속성이 동일한 이름으로 재정의됩니다. 이것은 Javascript에서 다중 상속 또는 혼합을 허용하는 매우 유연한 방법입니다.

생성자는 함수가 클로저를 제공하지만 객체 리터럴은 다른 수준의 유연성을 허용합니다. 예를 methodOne 및 methodTwo 객체 (생성자 외부에서 액세스 할 수 없습니다)에 비공개 공통 변수 암호에 의존하는 경우,이 수행하여 아주 간단하게 달성 할 수있는 경우 :

var myObj = function(){ 
    var variableOne = "ABCD1234"; 

    this.methodOne = function(){ 
     // Do something with variableOne 
     console.log(variableOne); 
    }; 
    this.methodTwo = function(){ 
     // Do something else with variableOne 
    }; 
}; 

myObj(); 

alert(variableOne); // undefined 
alert(myObj.variableOne); // undefined 

당신은 variableOne 노출 만들고 싶었다 경우 (공개)하면 다음과 같습니다.

var myObj = function(){ 
    this.variableOne = "ABCD1234"; 

    this.methodOne = function(){ 
     // Do something with variableOne 
     console.log(this.variableOne); 
    }; 
    this.methodTwo = function(){ 
     // Do something else with variableOne 
    }; 
}; 

myObj(); 

alert(variableOne); // undefined 
alert(myObj.variableOne); // ABCD1234