聊聊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']);

說明：通過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 '#<Object>'
t;		// {a: 2, b: 42}

【相關推薦：】

以上就是聊聊JavaScript中怎麼利用Object()函數建立物件的詳細內容，更多請關注TW511.COM其它相關文章！