JavaScript でオブジェクトを作成する 4 つの方法

この記事では主に JavaScript でオブジェクトを作成する 4 つの方法を紹介します。必要な方はぜひ参考にしてください。 (); {}

背景

この段落は読まずに読み飛ばしていただいても構いません...

日常的に使用する場合、オブジェクトを作成する最も一般的な方法は、{} を使用してオブジェクトを直接作成することです。直接書いた それだけですが、ある練習では、この方法で作成したオブジェクトを別の js ファイルに記述し、それを HTML で使用する方法を知りませんでしたが、久しぶりに Object.create メソッドを使用しました。新しい落とし穴が発生することは予想していませんでした。この方法は ES5 以降のみをサポートするため、将来の参考のために、互換性を処理する必要があります。 メソッド 1: Object.create
1. 構文

var newObj = Object.create(proto, propertyObject);

パラメータ:

proto: 新しく作成されたオブジェクトのプロトタイプ オブジェクト

propertyObject: 新しく作成されたオブジェクトの列挙可能なプロパティ作成されたオブジェクト、Object.defineProperty() の 2 番目のパラメーターに相当します

戻り値: 新しく作成されたオブジェクト

var aa = {
    valA:1, 
    fnA: function(){console.log(this.valA)}
};

var bb = Object.create(aa, {
  // foo会成为所创建对象的数据属性
  foo: { 
    writable:true,
    configurable:true,
    value: "hello" 
  },
  // bar会成为所创建对象的访问器属性
  bar: {
    configurable: false,
    get: function() { return 10 },
    set: function(value) {
      console.log("Setting `o.bar` to", value);
    }
  }
});

結果は次のとおりです: bb がアクセスできるプロパティは次のとおりです:
(1) 独自の foo と bar
(2) aa のvalA と fnA

そして、 bb.__proto__ == aa


2.polyfill このメソッドをサポートしていない ES5 より前のブラウザの場合は、互換性のために次のメソッドを使用できます。これも Object.create Polyfill;

if (typeof Object.create !== "function") {
  Object.create = function (proto, propertiesObject) {
      if (typeof proto !== 'object' && typeof proto !== 'function') {
          throw new TypeError('Object prototype may only be an Object: ' + proto);
      } else if (proto === null) {
          throw new Error("This browser's implementation of Object.create is a shim and doesn't support 'null' as the first argument.");
      }
      if (typeof propertiesObject != 'undefined') throw new Error("This browser's implementation of Object.create is a shim and doesn't support a second argument.");
      function F() {}
      F.prototype = proto;
      return new F();
  };
}

要するに、新しいオブジェクトのプロトタイプは proto であり、proto は Object.create

3 の最初のパラメータであるという 1 つの文を覚えておいてください。イースターエッグ 役に立つかもしれない 2 つの写真を添付し​​ます。 ~~~~

画像を開けない場合のために説明します。図 1 は、ES5 の新しいオブジェクト メソッドには create&keys、defineProperty、String メソッドには Trim、および array メソッドが含まれていることを示しています。は、indexOf、filter&map、foreach です。 図 2 は、ES5 をサポートするブラウザです。Chrome はこれを適切にサポートしていますが、IE は IE11 でのみサポートしています。 方法 2: 新しいコンストラクター

この方法は、特に継承、拡張性の向上のために非常によく使用されます。カプセル化

function Person(){
    this.name = '****';
    this.age = 11,
    this.getAge = function(){}
}

を使用して、

var p = new Person();

である p を出力できます。 メソッド 3: new Object()

1。

{
    name: '****';
    age: 11,
    getAge: function(){},
    __proto__: Object
}
pp.constructor == Person  ==> **true**
Person.__proto__ == Function.prototype   ==> **true**

と同等の空のオブジェクト

var obj = new Object();

を作成し、属性の展開を続行できます。とメソッド

2.

var obj = {};

結果は次のとおりです:

var aa = {
    valA:1, 
    fnA: function(){console.log(this.valA)}
};
var oo = new Object(aa);

これは、oo がオブジェクトの直接コピーと同じように、aa の浅いコピーであることを意味します。

なぜこのようにテストしたいのかわかりません。 。 。 。

このメソッドは、次の理由から new Person に似ています:

Object.__proto__ == Function.protoType

Person.__proto__ == Function.protoTypeObject はオブジェクトのコンストラクターであり、そのプロトタイプ オブジェクトも Function Prototype

Method 4: {}

このメソッドは、
オブジェクト リテラルを使用してオブジェクトを作成します
。これは最も簡単な方法であり、多数のプロパティ オブジェクト プロセスを含むオブジェクトの作成を簡素化することが目的です。 。

oo === aa    ==> true
oo.valA = 2;
console.log(aa.valA)   ==> 2

誰かがテストをしました。

このメソッドは、{} がすぐに評価されるため、new Object() を使用してオブジェクトを作成するよりも高速です。new Object() はメソッドであるため、本質的にメソッドです。プロトタイプ内でメソッドを巡回するため、メソッドが見つかった場合にはメソッド呼び出しに必要なスタック情報を生成するため、メソッド呼び出しが完了した後にスタック情報を解放する必要があるため、処理が遅くなります。

概要

これらは、オブジェクトを作成するためによく使用される方法です。私がより頻繁に使用するのは、方法 4 と方法 2 です。方法 2 は、継承によく使用されます。 ES5 の問題は、いくつかの新しいオブジェクトの列挙可能なプロパティを拡張できることです。defineProperty と何らかの関係があると感じていますが、まだよく理解していません。 上記がこの記事の全内容です。その他の関連コンテンツについては、PHP 中国語 Web サイトをご覧ください。

関連する推奨事項:

ブラウザと NodeJS の EventLoop およびいくつかのメカニズムの類似点と相違点

JavaScript を使用してブラウザの種類を決定する

以上がJavaScript でオブジェクトを作成する 4 つの方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。