객체 리터럴이나 생성자 함수를 사용해야합니까?

나는 자바 스크립트에서 객체를 생성 해야하는 방법에 대해 혼란스러워합니다. 적어도 두 가지 방법이있는 것 같습니다. 하나는 객체 리터럴 표기법을 사용하는 것이고 다른 하나는 구성 함수를 사용하는 것입니다. 하나의 장점이 다른 것보다 있습니까?

객체와 관련된 동작이없는 경우 (즉, 객체가 데이터 / 상태에 대한 컨테이너 일 경우) 객체 리터럴을 사용합니다.

var data = {
    foo: 42,
    bar: 43
};

KISS 원칙을 적용합니다 . 단순한 데이터 컨테이너 이상의 것이 필요하지 않다면 단순한 리터럴을 사용하십시오.

객체에 비헤이비어를 추가하려면 생성자를 사용하여 생성 중에 객체에 메서드를 추가하거나 클래스에 프로토 타입을 제공 할 수 있습니다.

function MyData(foo, bar) {
    this.foo = foo;
    this.bar = bar;

    this.verify = function () {
        return this.foo === this.bar;
    };
}

// or:
MyData.prototype.verify = function () {
    return this.foo === this.bar;
};

이와 같은 클래스는 데이터 개체의 스키마처럼 작동합니다. 이제 개체가 초기화 / 포함하는 속성이 생성자를 통해 일종의 계약이 생깁니다. 자유 리터럴은 비정질 데이터 덩어리입니다.

verify일반 오래된 데이터 개체에 대해 작동 하는 외부 함수 가있을 수도 있습니다 .

var data = {
    foo: 42,
    bar: 43
};

function verify(data) {
    return data.foo === data.bar;
}

그러나 이는 캡슐화와 관련하여 바람직하지 않습니다. 이상적으로는 엔티티와 관련된 모든 데이터 + 동작이 함께 살아야합니다.

본질적으로 객체의 여러 인스턴스가 필요한지 여부로 요약됩니다. 생성자로 정의 된 객체를 사용하면 해당 객체의 여러 인스턴스를 가질 수 있습니다. 객체 리터럴은 기본적으로 모두 공개 된 변수 / 메서드가있는 싱글 톤입니다.

// define the objects:
var objLit = {
  x: 0,
  y: 0,
  z: 0,
  add: function () {
    return this.x + this.y + this.z;
  }
};

var ObjCon = function(_x, _y, _z) {
  var x = _x; // private
  var y = _y; // private
  this.z = _z; // public
  this.add = function () {
    return x + y + this.z; // note x, y doesn't need this.
  };
};

// use the objects:
objLit.x = 3; 
objLit.y = 2; 
objLit.z = 1; 
console.log(objLit.add());    

var objConIntance = new ObjCon(5,4,3); // instantiate an objCon
console.log(objConIntance.add());
console.log((new ObjCon(7,8,9)).add()); // another instance of objCon
console.log(objConIntance.add()); // same result, not affected by previous line

균일 한 방식으로 객체를 생성하는 또 다른 방법은 객체를 반환하는 함수를 사용하는 것입니다.

function makeObject() {
    var that = {
        thisIsPublic: "a public variable"
        thisIsAlsoPublic: function () {
            alert(that.thisIsPublic);
        }
    };

    var secret = "this is a private variable"

    function secretFunction() { // private method
        secret += "!"; // can manipulate private variables
        that.thisIsPublic = "foo";     
    }

    that.publicMethod = function () {
        secret += "?"; // this method can also mess with private variables
    }

    that.anotherPublicVariable = "baz";

    return that; // this is the object we've constructed
}

makeObject.static = "This can be used to add a static varaible/method";

var bar = makeObject();
bar.publicMethod(); // ok
alert(bar.thisIsPublic); // ok
bar.secretFunction(); // error!
bar.secret // error!

JavaScript의 함수는 클로저이기 때문에 개인 변수와 메서드를 사용하고 new.

에서 http://javascript.crockford.com/private.html 자바 스크립트에서 private 변수에.

아래 코드는 객체를 생성하는 세 가지 방법 인 Object Literal 구문, 함수 생성자 및 Object.create(). 객체 리터럴 구문은 즉시 생성하고 객체를 생성 __prototype__하므로 Object객체 이므로의 모든 속성과 메서드에 액세스 할 수 있습니다 Object. 엄격하게 디자인 패턴 관점에서 간단한 개체 리터럴을 사용하여 단일 데이터 인스턴스를 저장해야합니다.

함수 생성자에는이라는 특수 속성이 .prototype있습니다. 이 속성은 __prototype__함수 생성자가 만든 모든 개체의 속성이됩니다 . .prototype함수 생성자 의 속성에 추가 된 모든 속성과 메서드 는 생성 된 모든 개체에서 사용할 수 있습니다. 데이터의 여러 인스턴스가 필요하거나 개체의 동작이 필요한 경우 생성자를 사용해야합니다. 함수 생성자는 개인 / 공개 개발 패턴을 시뮬레이션하려는 경우에도 가장 잘 사용됩니다. 모든 공유 메서드를에 배치하여 .prototype각 개체 인스턴스에서 생성되지 않도록해야합니다.

Object.create()로 __prototype__객체를 생성하면이 메소드로 생성 된 객체에 대해 객체 리터럴 을 사용합니다 . 객체 리터럴에 추가 된 모든 속성과 메서드는 진정한 프로토 타입 상속을 통해 생성 된 모든 객체에서 사용할 수 있습니다. 이것이 제가 선호하는 방법입니다.

//Object Example

//Simple Object Literal
var mySimpleObj = {
    prop1 : "value",
    prop2 : "value"
}

// Function Constructor
function PersonObjConstr()  {
    var privateProp = "this is private";
    this.firstname = "John";
    this.lastname = "Doe";
}
PersonObjConstr.prototype.greetFullName = function()    {
    return "PersonObjConstr says: Hello " + this.firstname + 
    " " + this.lastname;
};

// Object Literal
var personObjLit = {
    firstname : "John",
    lastname: "Doe",
    greetFullName : function() {
        return "personObjLit says: Hello " + this.firstname +
        ", " + this.lastname;
    }
} 

var newVar = mySimpleObj.prop1;
var newName = new PersonObjConstr();
var newName2 = Object.create(personObjLit);

무엇을하고 싶은지에 따라 다릅니다. 객체에서 (반) 개인 변수 또는 함수를 사용하려는 경우 생성자 함수가이를 수행하는 방법입니다. 개체에 속성과 메서드 만 포함되어있는 경우 개체 리터럴이 좋습니다.

function SomeConstructor(){
    var x = 5;
    this.multiply5 = function(i){
        return x*i;
    }
}
var myObj = new SomeConstructor;

var SomeLiteral = {
    multiply5: function(i){ return i*5; }
}

이제 방법 multiply5에서 myObj와 SomeLiteral정확히 같은 일을. 유일한 차이점은 myObj가 전용 변수를 사용한다는 것입니다. 후자는 경우에 따라 유용 할 수 있습니다. 대부분의 경우 객체 리터럴은 충분하고 JS 객체를 생성하는 훌륭하고 깨끗한 방법입니다.

페이지에 대한 개체의 단일 인스턴스를 원하십니까-Literal.

DTO 개체와 같은 데이터를 간단하게 전송하고 싶습니까? GET SET :-Literal

메서드 동작, 다중 인스턴스-생성자 함수, OOP 원칙 따르기, 상속 :-생성자 함수를 사용하여 실제 개체를 만들고 싶습니까?

아래는 리터럴이 무엇인지, 생성자 함수가 무엇이며 서로 어떻게 다른지 자세히 설명하는 YouTube 동영상입니다.

https://www.youtube.com/watch?v=dVoAq2D3n44

객체 리터럴로 이동하면 초기 값의 도입으로 더 간결하고 더 잘 확장됩니다.

https://www.w3schools.com/js/js_object_definition.asp 에서 언급했듯이

개체 리터럴을 사용하여 정의 하고 작성 , 하나 개 의 객체를 하나의 문.

또한

개체 리터럴은 단일 개체 만 만듭니다. 때때로 우리 는 한 유형의 많은 객체 를 생성하는 데 사용할 수 있는 객체 유형 을 원합니다.

Object () 생성자 함수는 조금 더 느리고 장황합니다. 따라서 JavaScript에서 새 개체를 만드는 데 권장되는 방법은 리터럴 표기법을 사용하는 것입니다.

Udacity 객체 지향 JavaScript

사실, methinks, 우리는 객체 리터럴에 private 메서드를 가질 수 있습니다. 아래 코드를 고려하십시오.

var myObject = {

   publicMethod: function () {
      privateMethod1();
      privateMethod2(); 
      function privateMethod1(){
          console.log('i am privateMethod1');
      } 
      function privateMethod2(){
          console.log('i am privateMethod2');
      } 
   }

}

맛의 문제이지만 가능한 한 객체 리터럴을 사용하는 것을 선호합니다.

// 객체 리터럴 및 객체 생성자

function MyData(foo, bar) {
        this.foo = foo;
        this.bar = bar;

    }
MyData.prototype.verify = function () {
        return this.foo === this.bar;
    };

//add property using prototype

var MD  = new MyData;//true.
var MD = new MyData();//true.
MD.verify// return only the function structure.
MD.verify(); //return the verify value and in this case return true coz both value is null. 
var MD1  = new MyData(1,2); // intialized the value at the starting. 
MD1.verify// return only the function structure.
MD1.verify(); // return false coz both value are not same.
MD1.verify(3,3);// return false coz this will not check this value intialized at the top 
MyData.prototype.verify = function (foo,bar) {
    return this.foo === this.bar;
};
var MD1  = new MyData(1,2);
MD1.verify();
MD1.verify(3,3);// return false coz this keyword used with foo and bar that will check parent data