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

怎么利用object()函数创建对象?下面本篇文章给大家介绍一下object()构造函数创建对象的方法(附其他三种创建对象的方法),希望对大家有所帮助!

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

new Object()创建对象

JavaScript 原生提供Object对象(注意起首的O是大写),所有其他对象都继承自这个对象。Object本身也是一个构造函数,可以直接通过它来生成新对象。

Object()函数可以将给定的值包装为一个新对象。

语法:

立即学习“Java免费学习笔记(深入)”;

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

登录后复制

1.png

说明:通过new Object()的写法生成新对象,与字面量的写法o = {}是等价的。

var o1 = {a: 1};var o2 = new Object(o1);o1 === o2 // truenew 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 // trueObject(undefined) // 返回一个空对象Object(undefined) instanceof Object // trueObject(null) // 返回一个空对象Object(null) instanceof Object // trueObject(1) // 等同于 new Number(1)Object(1) instanceof Object // trueObject(1) instanceof Number // trueObject('foo') // 等同于 new String('foo')Object('foo') instanceof Object // trueObject('foo') instanceof String // trueObject(true) // 等同于 new Boolean(true)Object(true) instanceof Object // trueObject(true) instanceof Boolean // true

登录后复制

上面代码表示Object函数可以将各种值转为对应的构造函数生成的对象。

如果Object方法的参数是一个对象,它总是返回原对象。

var arr = [];Object(arr) // 返回原数组Object(arr) === arr // truevar obj = {};Object(obj) // 返回原对象Object(obj) === obj // truevar fn = function () {};Object(fn) // 返回原函数Object(fn) === fn // true

登录后复制

利用这一点,可以写一个判断变量是否为对象的函数。

function isObject(value) {  return value === Object(value);}isObject([]) // trueisObject(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;// truevar proto= {};var obj2 = Object.create(proto);Object.getPrototypeOf(obj2) === proto;// truevar obj3 = Object.create({}, { p: { value: 42 } });// 属性描述对象中省略了的属性默认为false,所以p是不可写,不可枚举,不可配置的Object.getOwnPropertyDescriptors(obj3);// p: {value: 42, writable: false, enumerable: false, configurable: false}//创建一个可写的,可枚举的,可配置的属性pvar 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;// trueobj1;// {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 '#'t;// {a: 2, b: 42}

登录后复制

【相关推荐:javascript学习教程

以上就是聊聊JavaScript中怎么利用Object()函数创建对象的详细内容,更多请关注【创想鸟】其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/2699638.html

(0)
上一篇 2025年3月7日 19:00:44
下一篇 2025年2月27日 01:59:26

AD推荐 黄金广告位招租... 更多推荐

相关推荐

  • BOM浏览器对象模型整理解析

    本篇文章给大家带来了关于javascript的相关知识,其中主要介绍了关于bom浏览器对象模型的相关问题,包括了windows对象的常见事件、定时器、js执行机制等等内容,下面一起来看一下,希望对大家有帮助。 【相关推荐:javascrip…

    2025年3月7日 编程技术
    200
  • 什么是this?深入解析JavaScript中的this

    什么是this?下面本篇文章给大家介绍一下javascript中的this,并聊聊this在函数不同调用方式下的区别,希望对大家有所帮助! JavaScript中的this格外的不一样,比如Java语言中的this是在代码的执行阶段是不可更…

    2025年3月7日
    200
  • BOM核心之window对象(总结分享)

    本篇文章给大家带来了关于javascript的相关知识,其中主要介绍了关于windows对象的常见事件的相关问题,window对象是浏览器的顶级对象,定义在全局作用域中的变量、函数都会变成window对象的属性和方法,下面一起来看一下,希望…

    2025年3月7日 编程技术
    200
  • 详解Javascript对象的5种循环遍历方法

    javascript对象如何循环遍历?下面本篇文章给大家详细介绍5种js对象遍历方法,并浅显对比一下这5种方法,希望对大家有所帮助! 一、对象的遍历方法 for … in Object.keys(), Object.values…

    2025年3月7日
    200
  • 深入浅析JavaScript中的定时器

    本篇文章给大家带来了关于javascript的相关知识,其中主要介绍了关于javascript中的定时器相关问题,javascript中有两种定时器,分别是settimeout用于指定时间后执行指定代码和setinterval用于每隔一段时…

    2025年3月7日
    200
  • 什么是字面量?JS中怎么利用字面量创建对象?

    javascript中怎么利用字面量创建对象?下面本篇文章带大家了解一下字面量,介绍一下javascript中如何利用对象字面量来创建对象,希望对大家有所帮助! 什么是字面量 字面量(literal)是表达一个固定值的表示法,又叫常量,用来…

    2025年3月7日
    200
  • JavaScript实例解析清除定时器

    本篇文章给大家带来了关于javascript的相关知识,其中主要介绍了关于定时器与清除定时器的相关问题,可以利用cleartimeout方法和clearinterval方法来清除指定的定时器,下面一起来看一下,希望对大家有帮助。 【相关推荐…

    2025年3月7日 编程技术
    200
  • 【归纳总结】JS数组的常见操作方法,助你提高开发效率!

    在开发中,数组的使用场景非常多,平日中也涉及到很多数组相关操作。本篇文章就归纳总结了一些常见的操作方法分享给大家,要是在开发中能信手拈来,可大大提高开发效率。 随机排序 1、生成随机数 遍历数组,每次循环都随机一个在数组长度范围内的数,并交…

    2025年3月7日
    200
  • 怎么给元素添加事件?JS绑定事件三种方式解析

    javascript作为脚本语言, 可以为页面上的元素绑定事件,用于在指定事件发生时能自动调用相应的事件处理程序处理事件。那么怎么给元素添加事件?下面本篇文章给大家介绍一下js绑定事件三种方式,希望对大家有所帮助! 为了使浏览器在事件发生时…

    2025年3月7日 编程技术
    200
  • 一文搞懂JS中的事件冒泡机制

    本篇文章聊聊事件冒泡,带大家深入了解一下JS中的事件冒泡机制,希望对大家有所帮助! 1. 事件          在浏览器客户端应用平台,基本生都是以事件驱动的,即某个事件发生,然后做出相应的动作。          浏览器的事件表示的是某…

    2025年3月7日 编程技术
    200

发表回复

登录后才能评论