聊聊JavaScript中怎么利用Object()函数创建对象

107 阅读 0 评论 71 点赞

我是靠谱客的博主阳光台灯，最近开发中收集的这篇文章主要介绍聊聊JavaScript中怎么利用Object()函数创建对象，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

怎么利用Object()函数创建对象？下面本篇文章给大家介绍一下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学习教程】

以上就是聊聊JavaScript中怎么利用Object()函数创建对象的详细内容，更多请关注靠谱客其它相关文章！