您的位置:首页 > 技术中心 > 前端框架 >

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

时间:2022-08-04 16:32

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

new Object()创建对象


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

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

语法:

  1. new Object()
  2. new Object(value)

参数 value 是任意类型的可选参数。

  • 如果value值是nullundefined或不传时,则会创建并返回一个空对象;

  • 如果value值是一个基本类型,则会构造其包装类的对象,返回一个和给定的值相对应的类型的对象。;

  • 如果value值是引用类型,则仍然返回这个值。

    如果给定值是一个已经存在的对象,则会返回这个已经存在的值(相同地址)。

  1. var obj = new Object(); //创建了一个空的对象
  2. obj.uname = 'zhangsanfeng';
  3. obj.name = 18; //字面量方式创建对象不同,这里需要用 = 赋值添加属性和方法
  4. obj.sex = 'nan'; //属性和方法后面以;结束
  5. obj.sayHi = function() {
  6. console.log('hi');
  7. }
  8. console.log(obj.uname);
  9. console.log(obj['age']);

1.png

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

  1. var o1 = {a: 1};
  2. var o2 = new Object(o1);
  3. o1 === o2 // true
  4. new Object(123) instanceof Number
  5. // true

与其他构造函数一样,如果要在Object对象上面部署一个方法,有两种做法。

(1)部署在Object对象本身

比如,在Object对象上面定义一个print方法,显示其他对象的内容。

  1. Object.print = function(o){ console.log(o) };
  2. var o = new Object();
  3. Object.print(o)
  4. // Object

(2)部署在Object.prototype对象

所有构造函数都有一个prototype属性,指向一个原型对象。凡是定义在Object.prototype对象上面的属性和方法,将被所有实例对象共享。(关于prototype属性的详细解释,参见《面向对象编程》一章。)

  1. Object.prototype.print = function(){ console.log(this)};
  2. var o = new Object();
  3. o.print() // Object

上面代码在Object.prototype定义了一个print方法,然后生成一个Object的实例o。o直接继承了Object.prototype的属性和方法,可以在自身调用它们,也就是说,o对象的print方法实质上是调用Object.prototype.print方法。。

可以看到,尽管上面两种写法的print方法功能相同,但是用法是不一样的,因此必须区分“构造函数的方法”和“实例对象的方法”。

Object()

Object本身就是一个函数,本身当作工具方法使用时,可以将任意值转为对象。这个方法常用于保证某个值一定是对象。

  • 如果参数是原始类型的值,Object方法返回对应的包装对象的实例

  1. Object() // 返回一个空对象
  2. Object() instanceof Object // true
  3. Object(undefined) // 返回一个空对象
  4. Object(undefined) instanceof Object // true
  5. Object(null) // 返回一个空对象
  6. Object(null) instanceof Object // true
  7. Object(1) // 等同于 new Number(1)
  8. Object(1) instanceof Object // true
  9. Object(1) instanceof Number // true
  10. Object('foo') // 等同于 new String('foo')
  11. Object('foo') instanceof Object // true
  12. Object('foo') instanceof String // true
  13. Object(true) // 等同于 new Boolean(true)
  14. Object(true) instanceof Object // true
  15. Object(true) instanceof Boolean // true

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

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

  1. var arr = [];
  2. Object(arr) // 返回原数组
  3. Object(arr) === arr // true
  4. var obj = {};
  5. Object(obj) // 返回原对象
  6. Object(obj) === obj // true
  7. var fn = function () {};
  8. Object(fn) // 返回原函数
  9. Object(fn) === fn // true

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

  1. function isObject(value) {
  2. return value === Object(value);
  3. }
  4. isObject([]) // true
  5. isObject(true) // false

扩展知识:其他创建对象的三种方法

1. 对象字面量{…}

对象字面量的方式是最常用的方式之一,它用内含属性的花括号{...}快速创建对象。

  1. var obj1 = {};
  2. obj1.name = "Tom";
  3. var obj2 = { name: "Tom", age: 12 };
  4. var name = "Tom", age = 12;
  5. var obj3 = { name: name, age: age };
  6. // ES2015中,属性名和变量名相同时可简写为:
  7. var obj3 = { name, age };
  8. // 扩展属性,ES2018新特性,可用于克隆或合并对象,浅拷贝,不包括原型
  9. var obj4 = { ...obj3 };

以字面量方式创建的对象属性默认是可写,可枚举和可配置的

以字面量方式创建的对象属性默认是可写,可枚举和可配置的

对象的原型默认为Object.prototype。通过定义属性__proto__(只能使用冒号标记的属性定义)的值来变更原型。只有给出的值是对象或null,对象的原型才会被设置为给出的值,否则原型不会改变。

  1. var obj1 = {};
  2. Object.getPrototypeOf(obj1) === Object.prototype;
  3. // true
  4. var obj2 = { __proto__: null };
  5. Object.getPrototypeOf(obj2) === null;
  6. // true
  7. var __proto__= {};
  8. var obj3 = { "__proto__": __proto__ };
  9. Object.getPrototypeOf(obj3) === __proto__;
  10. // true
  11. // 不使用冒号标记的属性定义,不会变更对象的原型,只是名字为__proto__的普通属性
  12. var obj4 = { __proto__ };
  13. Object.getPrototypeOf(obj4) === __proto__;
  14. // false
  15. obj4.hasOwnProperty("__proto__");
  16. // true
  17. Object.getPrototypeOf(obj4) === Object.prototype;
  18. // true
  19. var obj5 = { __proto__: "not an object or null" };
  20. obj5.hasOwnProperty("__proto__");
  21. // false
  22. Object.getPrototypeOf(obj5) === Object.prototype;
  23. // true

2. Object.create()

Object.create()方法创建一个新对象,使用现有的对象来提供新创建的对象的__proto__

  1. /**
  2. * 创建一个具有指定原型的对象,并且包含指定的属性。
  3. * @param o 新创建对象的原型对象。可能为空
  4. * @param properties 包含一个或多个属性描述符的 JavaScript 对象。
  5. */
  6. create(o: object | null, properties?: PropertyDescriptorMap): any;
  7. interface PropertyDescriptorMap {
  8. [s: string]: PropertyDescriptor;
  9. }
  10. interface PropertyDescriptor {
  11. configurable?: boolean;
  12. enumerable?: boolean;
  13. value?: any;
  14. writable?: boolean;
  15. get?(): any;
  16. set?(v: any): void;
  17. }
  1. var obj1 = Object.create(null);
  2. Object.getPrototypeOf(obj1) === null;
  3. // true
  4. var proto= {};
  5. var obj2 = Object.create(proto);
  6. Object.getPrototypeOf(obj2) === proto;
  7. // true
  8. var obj3 = Object.create({}, { p: { value: 42 } });
  9. // 属性描述对象中省略了的属性默认为false,所以p是不可写,不可枚举,不可配置的
  10. Object.getOwnPropertyDescriptors(obj3);
  11. // p: {value: 42, writable: false, enumerable: false, configurable: false}
  12. //创建一个可写的,可枚举的,可配置的属性p
  13. var obj4 = Object.create({}, {
  14. p: { value: 42, writable: true, enumerable: true, configurable: true }
  15. });
  16. //不能同时指定访问器(get和set)和 值或可写属性
  17. var obj4 = Object.create({}, {
  18. p: {
  19. // value: 42,
  20. // 不能和get set同时存在
  21. // writable: true,
  22. // 不能和get set同时存在
  23. enumerable: true,
  24. configurable: true,
  25. get: function() { return 10 },
  26. set: function(value) { console.log("Setting `p` to", value); }
  27. }
  28. });

3. Object.assign()

Object.assign()方法并不是直接用来创建对象的,但它可以达到创建对象的效果,所以这里把它也作为一种创建对象的方式。

Object.assign() 方法用于将所有自身可枚举属性的值从一个或多个源对象复制到目标对象。返回目标对象。

  1. Object.assign(target, …sources)
  • 如果目标对象或源对象中具有相同的属性,后面的对象的属性将覆盖前面的对象的属性。
  • 只会拷贝源对象自身的可枚举属性到目标对象。对源对象原型上的对象不做处理。
  • 该方法使用源对象的Get和目标对象的Set来获取和设置值。
  1. var o1 = { name: "Tom" };
  2. var o2 = { name: "Jerry" };
  3. var o3 = Object.create(o2, {
  4. // o2是o3的原型,name: "Jerry"是原型上的属性
  5. a: { value: 42 },
  6. // 不可枚举
  7. b: { value: 42, writable: false, enumerable: true, configurable: false },
  8. c: { enumerable: true, get: function() { return 10; } }
  9. });
  10. var obj1 = Object.assign(o1, o2);
  11. obj1 === o1;
  12. // true
  13. obj1;
  14. // {name: "Tom", b: 42, c: 10}
  15. Object.getOwnPropertyDescriptors(obj1);
  16. // 不会拷贝属性的
  17. /*
  18. b: {value: 42, writable: true, enumerable: true, configurable: true}
  19. c: {value: 10, writable: true, enumerable: true, configurable: true}
  20. name: {value: "Tom", writable: true, enumerable: true, configurable: true} */
  21. var o4 = { a: "a", b: { name: "Tom", age: 18 } };
  22. var obj2 = Object.assign({}, o4);
  23. obj2.b === o4.b;
  24. // true, 浅拷贝,如果源值是一个对象的引用,它仅仅会复制其引用值。
  25. // 合并对象,后面属性覆盖前面属性
  26. var o1 = { a: 1, b: 1 };
  27. var o2 = { b: 2, c: 2 };
  28. var o3 = { a: 3 };
  29. var obj3 = Object.assign({}, o1, o2, o3);
  30. obj3;
  31. // {a: 3, b: 2, c: 2}
  32. // 基本类型会被转为包装对象,只有字符串的包装对象有自身可枚举属性。
  33. var obj4 = Object.assign({}, "abc", null, true, undefined, 10, Symbol("foo"));
  34. obj4;
  35. // {0: "a", 1: "b", 2: "c"}
  36. // 拷贝过程中发生异常,会终止后续拷贝任务,已拷贝的数据保留
  37. var t = Object.create( {}, { b: { value: 42, writable: false } });
  38. // b是只读属性
  39. Object.assign(t, {a: 1}, {a: 2, b: 2, c: 3}, {c: 4});
  40. // Cannot assign to read only property 'b' of object '#<Object>'
  41. t;
  42. // {a: 2, b: 42}

【相关推荐:javascript学习教程

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

热门排行

今日推荐

热门手游