javascript 代入 - オブジェクトリテラルまたはコンストラクタ関数を使用する必要がありますか?



配列 初期化 (9)

オブジェクトリテラルを使用すると、初期値の導入により、より合理的になり、よりよく拡張されます。

私はどのような方法で私はjavascriptでオブジェクトを作成する必要があります混乱してきています。 少なくとも2つの方法があるようです。 1つはオブジェクトリテラル表記を使用し、もう1つは構築関数を使用することです。 1つの利点は他のものよりも優れていますか?


オブジェクトに関連付けられた動作がない場合(つまり、オブジェクトがデータ/状態の単なるコンテナである場合)、オブジェクトリテラルを使用します。

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;
}

ただし、これはカプセル化に関しては好ましくありません。理想的には、エンティティに関連付けられたすべてのデータ+ビヘイビアは共存する必要があります。


一様な方法でオブジェクトを作成する別の方法は、オブジェクトを返す関数を使用することです。

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使用することはできません。

JavaScriptのプライベート変数についてはhttp://javascript.crockford.com/private.htmlから。


ページのオブジェクトの単一のインスタンス - リテラルが必要ですか?

DTOオブジェクトのようなデータを簡単に転送したいですか?GET SET: - リテラル

メソッドビヘイビア、複数インスタンス - コンストラクタ関数、OOP原則に従う、継承 - を持つ実オブジェクトを作成しますか?

以下は、リテラルとは何か、コンストラクタ関数とはどのように違うのかを詳しく説明するYouTubeのビデオです。

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


以下のコードは、オブジェクト、オブジェクトリテラル構文、関数コンストラクター、およびObject.create() 3つの作成方法を示しています。 オブジェクトのリテラル構文は、 __prototype__作成し、その__prototype__でオブジェクト化するので、その__prototype__Objectオブジェクトであり、 Objectすべてのプロパティとメソッドにアクセスできます。 厳密には、デザインパターンの観点から、単純なObjectリテラルを使用してデータの単一のインスタンスを格納する必要があります。

関数コンストラクターには、 .prototypeという特別なプロパティーが.prototypeます。 このプロパティは、関数コンストラクタによって作成されたオブジェクトの__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; }
}

myObjSomeLiteralはまったく同じことを行います。 唯一の違いは、myObjがプライベート変数を使用することです。 後者は場合によっては有用かもしれない。 ほとんどの場合、Objectリテラルで十分であり、JSオブジェクトを作成するためのきれいでクリーンな方法です。


基本的には、オブジェクトの複数のインスタンスを必要とするかどうかを判断する必要があります。 コンストラクタで定義されたオブジェクトは、そのオブジェクトの複数のインスタンスを持つことができます。 オブジェクトリテラルは、基本的にすべてがパブリックな変数/メソッドを持つシングルトンです。

// 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

https://www.w3schools.com/js/js_object_definition.asp記載されているとおり

オブジェクトリテラルを使用すると、 1 つのステートメント内に1 つのオブジェクトを定義して作成することができます

また、

オブジェクトリテラルは単一のオブジェクトを作成するだけです。 あるタイプの 多くのオブジェクトを作成するために使用できるオブジェクトタイプを持つことが時々あります。


1つのコード行にN個のオブジェクトのプロパティをマージする

Object.assignメソッドは、ECMAScript 2015(ES6)標準の一部であり、必要なものを正確に実行します。 ( IEはサポートされていません)

var clone = Object.assign({}, obj);

Object.assign()メソッドは、すべての列挙可能なプロパティの値を1つ以上のソースオブジェクトからターゲットオブジェクトにコピーするために使用されます。

続きを読む...

古いブラウザをサポートするためのpolyfill

if (!Object.assign) {
  Object.defineProperty(Object, 'assign', {
    enumerable: false,
    configurable: true,
    writable: true,
    value: function(target) {
      'use strict';
      if (target === undefined || target === null) {
        throw new TypeError('Cannot convert first argument to object');
      }

      var to = Object(target);
      for (var i = 1; i < arguments.length; i++) {
        var nextSource = arguments[i];
        if (nextSource === undefined || nextSource === null) {
          continue;
        }
        nextSource = Object(nextSource);

        var keysArray = Object.keys(nextSource);
        for (var nextIndex = 0, len = keysArray.length; nextIndex < len; nextIndex++) {
          var nextKey = keysArray[nextIndex];
          var desc = Object.getOwnPropertyDescriptor(nextSource, nextKey);
          if (desc !== undefined && desc.enumerable) {
            to[nextKey] = nextSource[nextKey];
          }
        }
      }
      return to;
    }
  });
}




javascript