聊聊JavaScript中怎麼利用Object()函數來建立對象-js教程-PHP中文網

怎麼利用Object()函數建立物件？以下這篇文章為大家介紹一下Object()建構函式建立物件的方法（附其他三種建立物件的方法），希望對大家有幫助！

聊聊JavaScript中怎麼利用Object()函數來建立對象

new Object()建立物件

#JavaScript 原生提供Object物件（注意起首的O是大寫），所有其他物件都繼承自這個物件。 Object本身也是一個建構函數，可以直接透過它來產生新物件。

Object()函數可以將給定的值包裝為一個新物件。

語法：

new Object()
new Object(value)

登入後複製

參數 value# 是任意類型的可選參數。

如果value值是null或undefined或不傳時，則會建立並傳回一個空對象;
如果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']);

登入後複製

聊聊JavaScript中怎麼利用Object()函數來建立對象

說明：透過new Object()的寫法產生新對象，與字面量的寫法o = {}是等價的。

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

new Object(123) instanceof Number
// true

登入後複製

與其他建構子一樣，如果要在Object物件上面部署一個方法，有兩種做法。

（1）部署在Object物件本身

例如，在Object物件上面定義一個print方法，顯示其他物件的內容。

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

登入後複製

（2）部署在Object.prototype物件

所有建構子都有一個prototype屬性，指向一個原型物件。凡是定義在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方法。。

可以看到，儘管上面兩種寫法的print方法功能相同，但是用法是不一樣的，因此必須區分「建構函數的方法」和「實例物件的方法」。

Object()

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

登入後複製

擴充知識：其他創建物件的三種方法

#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__。

/**
 * 创建一个具有指定原型的对象，并且包含指定的属性。
 * @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;
}

登入後複製

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("Setting `p` to", value); }
  }
});

登入後複製

3. Object.assign()

Object.assign()方法並不是直接用來創建物件的，但它可以達到創建物件的效果，所以這裡把它也當作一種創建物件的方式。

Object.assign() 方法用於將所有自身的可列舉屬性的值從一個或多個來源物件複製到目標對象。返回目標物件。

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 'b' of object '#