怎么利用Object()函數(shù)創(chuàng)建對象?下面本篇文章給大家介紹一下Object()構(gòu)造函數(shù)創(chuàng)建對象的方法(附其他三種創(chuàng)建對象的方法),希望對大家有所幫助!
new Object()創(chuàng)建對象
JavaScript 原生提供Object對象(注意起首的O是大寫),所有其他對象都繼承自這個(gè)對象。Object本身也是一個(gè)構(gòu)造函數(shù),可以直接通過它來生成新對象。
Object()函數(shù)可以將給定的值包裝為一個(gè)新對象。
語法:
new Object() new Object(value)
參數(shù) value
是任意類型的可選參數(shù)。
-
如果
value
值是null
或undefined
或不傳時(shí),則會(huì)創(chuàng)建并返回一個(gè)空對象; -
如果
value
值是一個(gè)基本類型,則會(huì)構(gòu)造其包裝類的對象,返回一個(gè)和給定的值相對應(yīng)的類型的對象。; -
如果
value
值是引用類型,則仍然返回這個(gè)值。如果給定值是一個(gè)已經(jīng)存在的對象,則會(huì)返回這個(gè)已經(jīng)存在的值(相同地址)。
var obj = new Object(); //創(chuàng)建了一個(gè)空的對象 obj.uname = 'zhangsanfeng'; obj.name = 18; //字面量方式創(chuàng)建對象不同,這里需要用 = 賦值添加屬性和方法 obj.sex = 'nan'; //屬性和方法后面以;結(jié)束 obj.sayHi = function() { console.log('hi'); } console.log(obj.uname); console.log(obj['age']);
說明:通過new Object()
的寫法生成新對象,與字面量的寫法o = {}
是等價(jià)的。
var o1 = {a: 1}; var o2 = new Object(o1); o1 === o2 // true new Object(123) instanceof Number // true
與其他構(gòu)造函數(shù)一樣,如果要在Object對象上面部署一個(gè)方法,有兩種做法。
(1)部署在Object對象本身
比如,在Object對象上面定義一個(gè)print方法,顯示其他對象的內(nèi)容。
Object.print = function(o){ console.log(o) }; var o = new Object(); Object.print(o) // Object
(2)部署在Object.prototype對象
所有構(gòu)造函數(shù)都有一個(gè)prototype屬性,指向一個(gè)原型對象。凡是定義在Object.prototype對象上面的屬性和方法,將被所有實(shí)例對象共享。(關(guān)于prototype屬性的詳細(xì)解釋,參見《面向?qū)ο缶幊獭芬徽?。?/p>
Object.prototype.print = function(){ console.log(this)}; var o = new Object(); o.print() // Object
上面代碼在Object.prototype定義了一個(gè)print方法,然后生成一個(gè)Object的實(shí)例o。o直接繼承了Object.prototype的屬性和方法,可以在自身調(diào)用它們,也就是說,o對象的print方法實(shí)質(zhì)上是調(diào)用Object.prototype.print方法。。
可以看到,盡管上面兩種寫法的print方法功能相同,但是用法是不一樣的,因此必須區(qū)分“構(gòu)造函數(shù)的方法”和“實(shí)例對象的方法”。
Object()
Object本身就是一個(gè)函數(shù),本身當(dāng)作工具方法使用時(shí),可以將任意值轉(zhuǎn)為對象。這個(gè)方法常用于保證某個(gè)值一定是對象。
-
如果參數(shù)是原始類型的值,Object方法返回對應(yīng)的包裝對象的實(shí)例
Object() // 返回一個(gè)空對象 Object() instanceof Object // true Object(undefined) // 返回一個(gè)空對象 Object(undefined) instanceof Object // true Object(null) // 返回一個(gè)空對象 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函數(shù)可以將各種值轉(zhuǎn)為對應(yīng)的構(gòu)造函數(shù)生成的對象。
-
如果Object方法的參數(shù)是一個(gè)對象,它總是返回原對象。
var arr = []; Object(arr) // 返回原數(shù)組 Object(arr) === arr // true var obj = {}; Object(obj) // 返回原對象 Object(obj) === obj // true var fn = function () {}; Object(fn) // 返回原函數(shù) Object(fn) === fn // true
利用這一點(diǎn),可以寫一個(gè)判斷變量是否為對象的函數(shù)。
function isObject(value) { return value === Object(value); } isObject([]) // true isObject(true) // false
擴(kuò)展知識(shí):其他創(chuàng)建對象的三種方法
1. 對象字面量{…}
對象字面量的方式是最常用的方式之一,它用內(nèi)含屬性的花括號(hào){...}
快速創(chuàng)建對象。
var obj1 = {}; obj1.name = "Tom"; var obj2 = { name: "Tom", age: 12 }; var name = "Tom", age = 12; var obj3 = { name: name, age: age }; // ES2015中,屬性名和變量名相同時(shí)可簡寫為: var obj3 = { name, age }; // 擴(kuò)展屬性,ES2018新特性,可用于克隆或合并對象,淺拷貝,不包括原型 var obj4 = { ...obj3 };
2. Object.create()
Object.create()
方法創(chuàng)建一個(gè)新對象,使用現(xiàn)有的對象來提供新創(chuàng)建的對象的__proto__
。
/** * 創(chuàng)建一個(gè)具有指定原型的對象,并且包含指定的屬性。 * @param o 新創(chuàng)建對象的原型對象??赡転榭? * @param properties 包含一個(gè)或多個(gè)屬性描述符的 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 } }); // 屬性描述對象中省略了的屬性默認(rèn)為false,所以p是不可寫,不可枚舉,不可配置的 Object.getOwnPropertyDescriptors(obj3); // p: {value: 42, writable: false, enumerable: false, configurable: false} //創(chuàng)建一個(gè)可寫的,可枚舉的,可配置的屬性p var obj4 = Object.create({}, { p: { value: 42, writable: true, enumerable: true, configurable: true } }); //不能同時(shí)指定訪問器(get和set)和 值或可寫屬性 var obj4 = Object.create({}, { p: { // value: 42, // 不能和get set同時(shí)存在 // writable: true, // 不能和get set同時(shí)存在 enumerable: true, configurable: true, get: function() { return 10 }, set: function(value) { console.log("Setting `p` to", value); } } });
3. Object.assign()
Object.assign()
方法并不是直接用來創(chuàng)建對象的,但它可以達(dá)到創(chuàng)建對象的效果,所以這里把它也作為一種創(chuàng)建對象的方式。
Object.assign()
方法用于將所有自身的可枚舉屬性的值從一個(gè)或多個(gè)源對象復(fù)制到目標(biāo)對象。返回目標(biāo)對象。
Object.assign(target, …sources)
- 如果目標(biāo)對象或源對象中具有相同的屬性,后面的對象的屬性將覆蓋前面的對象的屬性。
- 只會(huì)拷貝源對象自身的可枚舉屬性到目標(biāo)對象。對源對象原型上的對象不做處理。
- 該方法使用源對象的
Get
和目標(biāo)對象的Set
來獲取和設(shè)置值。
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); // 不會(huì)拷貝屬性的 /* 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, 淺拷貝,如果源值是一個(gè)對象的引用,它僅僅會(huì)復(fù)制其引用值。 // 合并對象,后面屬性覆蓋前面屬性 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} // 基本類型會(huì)被轉(zhuǎn)為包裝對象,只有字符串的包裝對象有自身可枚舉屬性。 var obj4 = Object.assign({}, "abc", null, true, undefined, 10, Symbol("foo")); obj4; // {0: "a", 1: "b", 2: "c"} // 拷貝過程中發(fā)生異常,會(huì)終止后續(xù)拷貝任務(wù),已拷貝的數(shù)據(jù)保留 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}
【