Object() 関数を使用して JavaScript でオブジェクトを作成する方法について話しましょう

Object() 関数を使用してオブジェクトを作成するにはどうすればよいですか?次の記事では、Object() コンストラクターを使用してオブジェクトを作成する方法 (他の 3 つのオブジェクト作成方法とともに) を紹介します。

#new Object() はオブジェクトを作成します

---

JavaScript は Object オブジェクトをネイティブに提供します (最初の O が大文字であることに注意してください) ) 、他のすべてのオブジェクトはこのオブジェクトから継承します。オブジェクト自体もコンストラクターであり、それを介して新しいオブジェクトを直接生成できます。

Object() 関数は、指定された値を新しいオブジェクトにラップできます。

構文:

new Object()
new Object(value)

パラメータ

value は、任意のタイプのオプションのパラメータです。

• value 値が null または 未定義であるか、または渡されない場合、空のオブジェクトが作成され、 ;

• value 値が基本型の場合、そのラッパー クラスのオブジェクトが構築され、指定された値に対応する型のオブジェクトが作成されます。返されます。 ;

• value 値が参照型の場合でも、この値が返されます。

  指定された値が既存のオブジェクトの場合は、既存の値 (同じアドレス) が返されます。

var obj = new Object();      //创建了一个空的对象
obj.uname = 'zhangsanfeng';
obj.name = 18;       //字面量方式创建对象不同，这里需要用 =  赋值添加属性和方法
obj.sex = 'nan';      //属性和方法后面以;结束
obj.sayHi = function() {
console.log('hi');
}
console.log(obj.uname);  
console.log(obj['age']);

説明: リテラルを使用して new Object() を記述して新しいオブジェクトを生成します。 o = {} と書くことは同等です。

var o1 = {a: 1};
var o2 = new Object(o1);
o1 === o2 // true

new Object(123) instanceof Number
// true

他のコンストラクターと同様、Object オブジェクトにメソッドをデプロイする場合、2 つのメソッドがあります。

(1) Object オブジェクト自体に配置されます

たとえば、他のオブジェクトの内容を表示するには、Object オブジェクトに print メソッドを定義します。

Object.print = function(o){ console.log(o) };
var o = new Object();
Object.print(o)
// Object

(2) Object.prototype object でのデプロイメント

すべてのコンストラクターには、プロトタイプ オブジェクトを指すプロトタイプ属性があります。 Object.prototype オブジェクトで定義されたすべてのプロパティとメソッドは、すべてのインスタンス オブジェクトによって共有されます。 (prototype 属性の詳細については、「オブジェクト指向プログラミング」の章を参照してください。)

Object.prototype.print = function(){ console.log(this)};
var o = new Object();
o.print() // Object

上記のコードは、Object.prototype で print メソッドを定義し、Object インスタンス o を生成します。 o は、Object.prototype のプロパティとメソッドを直接継承し、それ自体でそれらを呼び出すことができます。つまり、 o オブジェクトの print メソッドは、基本的に Object.prototype.print メソッドを呼び出します。 。

上記の2つの書き方のprintメソッドは機能は同じですが、使い方が異なるため、「コンストラクタメソッド」と「インスタンスオブジェクトメソッド」を区別する必要があることがわかります。

Object()

オブジェクト自体は関数であり、ツールのメソッドとして使用すると、任意の値をオブジェクトに変換できます。このメソッドは、特定の値がオブジェクトである必要があることを確認するためによく使用されます。

• パラメータがプリミティブ型の値の場合、Object メソッドは対応するパッケージング オブジェクトのインスタンスを返します。

Object() // 返回一个空对象
Object() instanceof Object // true

Object(undefined) // 返回一个空对象
Object(undefined) instanceof Object // true

Object(null) // 返回一个空对象
Object(null) instanceof Object // true

Object(1) // 等同于 new Number(1)
Object(1) instanceof Object // true
Object(1) instanceof Number // true

Object('foo') // 等同于 new String('foo')
Object('foo') instanceof Object // true
Object('foo') instanceof String // true

Object(true) // 等同于 new Boolean(true)
Object(true) instanceof Object // true
Object(true) instanceof Boolean // true

上記のコードは、次のことを示しています。 Object 関数はそれぞれを変換できます。値は、対応するコンストラクターによって生成されたオブジェクトに変換されます。

• Object メソッドのパラメータがオブジェクトの場合、常に元のオブジェクトを返します。

var arr = [];
Object(arr) // 返回原数组
Object(arr) === arr // true

var obj = {};
Object(obj) // 返回原对象
Object(obj) === obj // true

var fn = function () {};
Object(fn) // 返回原函数
Object(fn) === fn // true

これを使用すると、変数がオブジェクトかどうかを判断する関数を作成できます。

function isObject(value) {
  return value === Object(value);
}

isObject([]) // true
isObject(true) // false

知識を広げる: オブジェクトを作成する他の 3 つの方法

1. オブジェクト リテラル{ …}

オブジェクト リテラル メソッドは、最も一般的に使用されるメソッドの 1 つで、属性を含む中括弧を使用します。

{...}オブジェクトをすばやく作成します。

var obj1 = {};
obj1.name = "Tom";

var obj2 = { name: "Tom", age: 12 };

var name = "Tom", age = 12;
var obj3 = { name: name, age: age };
// ES2015中，属性名和变量名相同时可简写为：
var obj3 = { name, age };

// 扩展属性，ES2018新特性，可用于克隆或合并对象，浅拷贝，不包括原型
var obj4 = { ...obj3 };

2. Object.create()

##Object.create()

メソッドは以下を作成します既存のオブジェクトを使用して、新しく作成されたオブジェクトの __proto__ を提供する新しいオブジェクト。 <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">/** * 创建一个具有指定原型的对象，并且包含指定的属性。 * @param o 新创建对象的原型对象。可能为空 * @param properties 包含一个或多个属性描述符的 JavaScript 对象。 */ create(o: object | null, properties?: PropertyDescriptorMap): any; interface PropertyDescriptorMap { [s: string]: PropertyDescriptor; } interface PropertyDescriptor { configurable?: boolean; enumerable?: boolean; value?: any; writable?: boolean; get?(): any; set?(v: any): void; }</pre><div class="contentsignin">ログイン後にコピー</div></div><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">var obj1 = Object.create(null); Object.getPrototypeOf(obj1) === null; // true var proto= {}; var obj2 = Object.create(proto); Object.getPrototypeOf(obj2) === proto; // true var obj3 = Object.create({}, { p: { value: 42 } }); // 属性描述对象中省略了的属性默认为false，所以p是不可写，不可枚举，不可配置的 Object.getOwnPropertyDescriptors(obj3); // p: {value: 42, writable: false, enumerable: false, configurable: false} //创建一个可写的,可枚举的,可配置的属性p var obj4 = Object.create({}, { p: { value: 42, writable: true, enumerable: true, configurable: true } }); //不能同时指定访问器(get和set)和 值或可写属性 var obj4 = Object.create({}, { p: { // value: 42, // 不能和get set同时存在 // writable: true, // 不能和get set同时存在 enumerable: true, configurable: true, get: function() { return 10 }, set: function(value) { console.log(&quot;Setting `p` to&quot;, value); } } });</pre><div class="contentsignin">ログイン後にコピー</div></div>

3. Object.assign()##Object.assign()

メソッド Itはオブジェクトの作成に直接使用されませんが、オブジェクトを作成する効果が得られるため、ここでもオブジェクトを作成する方法として使用されます。

Object.assign()

メソッドは、すべての

self の 列挙可能なプロパティ の値を 1 つ以上のソースからコピーするために使用されます。オブジェクト.ターゲットオブジェクトへ。対象のオブジェクトを返します。

Object.assign(target, …sources)

ターゲット オブジェクトまたはソース オブジェクトが同じプロパティを持つ場合、後のオブジェクトのプロパティは前のオブジェクトのプロパティを上書きします。

ソース オブジェクト自体の列挙可能なプロパティのみがターゲット オブジェクトにコピーされます。ソース オブジェクトのプロトタイプ上のオブジェクトは処理されません。
このメソッドは、ソース オブジェクトの
• Get
とターゲット オブジェクトの
• Set を使用して値を取得および設定します。

  var o1 = { name: "Tom" };
  var o2 = { name: "Jerry" };
  var o3 = Object.create(o2, { 	// o2是o3的原型，name: "Jerry"是原型上的属性
  	a: { value: 42 }, 			// 不可枚举
  	b: { value: 42, writable: false, enumerable: true, configurable: false }, 
    	c: { enumerable: true, get: function() { return 10; } } 
  });
  var obj1 = Object.assign(o1, o2);
  obj1 === o1;		// true
  obj1;				// {name: "Tom", b: 42, c: 10}
  Object.getOwnPropertyDescriptors(obj1);	// 不会拷贝属性的
  /* 	b: {value: 42, writable: true, enumerable: true, configurable: true}
  	c: {value: 10, writable: true, enumerable: true, configurable: true}
  	name: {value: "Tom", writable: true, enumerable: true, configurable: true} */
  
  var o4 = { a: "a", b: { name: "Tom", age: 18 } };
  var obj2 = Object.assign({}, o4);
  obj2.b === o4.b;	// true, 浅拷贝，如果源值是一个对象的引用，它仅仅会复制其引用值。
  
  // 合并对象，后面属性覆盖前面属性
  var o1 = { a: 1, b: 1 };
  var o2 = { b: 2, c: 2 };
  var o3 = { a: 3 };
  var obj3 = Object.assign({}, o1, o2, o3);
  obj3; 			// {a: 3, b: 2, c: 2}
  
  // 基本类型会被转为包装对象，只有字符串的包装对象有自身可枚举属性。
  var obj4 = Object.assign({}, "abc", null, true, undefined, 10, Symbol("foo"));
  obj4;		// {0: "a", 1: "b", 2: "c"}
  
  // 拷贝过程中发生异常，会终止后续拷贝任务，已拷贝的数据保留
  var t = Object.create( {}, { b: { value: 42, writable: false } }); 	// b是只读属性
  Object.assign(t, {a: 1}, {a: 2, b: 2, c: 3}, {c: 4});	// Cannot assign to read only property &#39;b&#39; of object &#39;#<Object>&#39;
  t;		// {a: 2, b: 42}

  【関連する推奨事項: JavaScript 学習チュートリアル

  】

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