• 技术文章 >web前端 >js教程

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

    青灯夜游青灯夜游2022-08-04 17:55:49转载151
    怎么利用Object()函数创建对象?下面本篇文章给大家介绍一下Object()构造函数创建对象的方法(附其他三种创建对象的方法),希望对大家有所帮助!

    new Object()创建对象


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

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

    语法:

    new Object()
    new Object(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 // 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() 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函数可以将各种值转为对应的构造函数生成的对象。

    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)
    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()函数创建对象的详细内容,更多请关注php中文网其它相关文章!

    声明:本文转载于:csdn,如有侵犯,请联系admin@php.cn删除
    上一篇:一起分析JavaScript异常处理方式 下一篇:BOM浏览器对象模型整理解析
    VIP课程(WEB全栈开发)

    相关文章推荐

    • 【活动】充值PHP中文网VIP即送云服务器• JavaScript 构造函数和 "new" 操作符详解• 浅谈JavaScript中工厂函数和构造函数• JS构造函数-实例对象-原型对象之间的关系• JavaScript构造函数创建对象(总结分享)• JavaScript实现十大排序算法(图文详解)
    1/1

    PHP中文网