资讯专栏INFORMATION COLUMN

创建对象的4种方式

seanlook / 3345人阅读

摘要:创建对象的种方式方式一通过对象字面量表示法又称为直接量原始方式。例子在自定义构造函数的内部定义对象的方法函数的值赋给的属性。

创建对象的4种方式

方式一:通过对象字面量表示法(又称为直接量、原始方式)。object literals

方式二:通过new和构造函数Object()、String()等。

方式三:用自定义构造函数来初始化新对象。

方式四:通过Object.create()

方式一:通过对象字面量表示法(又称为直接量、原始方式)object literals

var obj = {name:"zyx456"};

对象字面量是一个名/值对列表,每个名/值对之间用逗号分隔,名和值之间用冒号分隔,最后整体用一个花括号括起来。

属性名可以使用数值,比如5。数值属性名会自动转换为字符串。

</>复制代码

  1. var person = {"name" : "Nicholas","age" : 29,5 : true};

属性名一般不加引号,以下情况必须加引号:

属性名中有空格,

有连字符“-”

有关键字,比如“for”。

在ES5(以及ES3的一些实现)中,保留字可以用做不带引号的属性名。然而对于ES3来说,使用保留字作为属性名必须使用引号引起来。

例子:

</>复制代码

  1. var person = {
  2. name : "Nicholas",
  3. age : 29};

在ES5中,对象直接量中的最后一个属性后的逗号可以省略,且在ES3的大部分实现中也可以忽略这个逗号,但在IE中则报错。

使用对象字面量语法时,如果留空其花括号,则可以定义只包含默认属性和方法的空对象。

var obj = {};

对象字面量也可以先创建,再添加属性和方法。

</>复制代码

  1. var person = {}; //与new Object()相同
  2. person.name = "Nicholas";
  3. person.age = 29;

在通过对象字面量定义对象时,实际上不会调用Object构造函数。

对象可以嵌套对象:

例如:

</>复制代码

  1. var myHome={
  2. population : "10,000" ,
  3. area : "10,000" ,
  4. adress : { // 属性
  5. country : "China" ,
  6. province : "shanxi" ,
  7. city : "xian"
  8. },
  9. say : function(){ // 方法
  10. return "My hometown is very beautiful ! ";
  11. }
  12. }

</>复制代码

  1. //构造嵌套的对象
  2. var SchoolData = {
  3. code: "0123-456-789",
  4. Tel: "0551-1234567",
  5. Fax: "0551-7654321"
  6. };
  7. //构造被嵌入的对象
  8. var ZGKJDX = {
  9. name: "中国科技大学",
  10. address: "安徽·合肥",
  11. grade: "高等学府",
  12. number: "13400",
  13. //嵌套对象SchoolData
  14. data: SchoolData,
  15. };

有一个缺点:如果我们想在其他地方创建一个同样的对象,就得把这个对象的所有代码都复制粘贴过去。我们需要一种能够批量创建同样对象的方法,而不是只创建一个对象。

有一个问题:即无法保证属性的顺序。

添加属性的顺序可能并不是遍历输出属性时的顺序。

例如

</>复制代码

  1. var o = {}
  2. o.a = 1
  3. o.b = 2
  4. o.c = 3
  5. for(key in o) console.log(key); // expected a,b,c - but not guaranteed to be in that order

Object 对象也缺乏forEach的方法,不能对object使用通常的迭代方法。

</>复制代码

  1. o.forEach // undefined
方式二:通过new和构造函数Object()、String()等。

var obj = new Object();

这里的函数称做构造函数(constructor)。

如下所示:

</>复制代码

  1. var person = new Object();
  2. person.name = "Nicholas";
  3. person.age = 29

如果构造函数无参数,括号则不是必需的。

因此可以采用下面的形式重写上面的两行代码:

</>复制代码

  1. var oObject = new Object;
  2. var oStringObject = new String;

</>复制代码

  1. var str = new String();
  2. console.log(str); // 输出的是 String{length:0,[[PrimitiveValue]]:""}
  3. console.log(typeof str);//object;

结果:

JS原始类型都包含内置构造函数。例如:

</>复制代码

  1. var o = new Object(); // 创建一个空对象,和{}一样
  2. var a = new Array(); // 创建一个空数组,和[]一样
  3. var d = new Date(); // 创建一个表示当前时间的Date对象
  4. var r = new RegExp("js"); //创建一个可以进行模式匹配的EegExp对象

在JS中,通过 new 运算符来作用与一个函数,实质上会发生这样的过程:

首先,创建一个空对象,然后用函数的apply方法,将这个空对象传入作为 apply 的第一个参数,作为上下文参数。也就是this的指向。

</>复制代码

  1. var triangle = new Shape("triangle");
  2. //上一句相当于下面的代码
  3. var triangle = {};
  4. Shape.apply(triangle, ["triangle"]);
方式三:用自定义构造函数来初始化新对象。

</>复制代码

  1. function A(o){
  2. this.name = "moyu"
  3. }
  4. let obj = new a();

例子:

</>复制代码

  1. function person(firstname,lastname,age,eyecolor){
  2. this.firstname=firstname;
  3. this.lastname=lastname;
  4. this.age=age;
  5. this.eyecolor=eyecolor;
  6. }
  7. var myFather=new person("Bill","Gates",56,"blue");
  8. var myMother=new person("Steve","Jobs",48,"green");

在自定义构造函数的内部定义对象的方法:

</>复制代码

  1. function person(firstname,lastname,age,eyecolor)
  2. {
  3. this.firstname=firstname;
  4. this.lastname=lastname;
  5. this.age=age;
  6. this.eyecolor=eyecolor;
  7. this.changeName=changeName;
  8. function changeName(name)
  9. {
  10. this.lastname=name;
  11. }
  12. }

changeName() 函数 name 的值赋给 person 的 lastname 属性。

</>复制代码

  1. myMother.changeName("Ballmer");
方式四:通过Object.create()

Object.create()是一个静态函数,而不是提供给某个对象实例调用的方法。

var o1 = Object.create({x:1, y:2}); // o1继承了属性x和y

可以通过任意原型创建新对象(换句话说,可以继承任意对象)。

第一个参数是这个新对象的原型。

第二个参数属性描述符对象propertiesObject,用于对对象的属性进行进一步描述。可选。

属性描述符对象中的属性,默认不可枚举,是继承的属性。

</>复制代码

  1. 如果propertiesObject指定为 undefined,那么是空对象{}。

    如果是null或非原始包装对象,则抛出一个 TypeError 异常。

</>复制代码

  1. o = Object.create(Object.prototype, {
  2. // foo会成为所创建对象的数据属性
  3. foo: {
  4. writable:true,
  5. configurable:true,
  6. value: "hello"
  7. },
  8. // bar会成为所创建对象的访问器属性
  9. bar: {
  10. configurable: false,
  11. get: function() { return 10 },
  12. set: function(value) {
  13. console.log("Setting `o.bar` to", value);
  14. }
  15. }
  16. });

返回一个新对象,带着指定的原型对象和属性。

例子:

</>复制代码

  1. var obj = Object.create({}, {p: {value: 42}});
  2. Object.values(obj); // => []

上面代码中,Object.create()方法的第二个参数添加的对象属性(属性p),如果不显式声明,默认是不可遍历的,因为p是继承的属性,而不是对象自身的属性。

可以通过传入参数null来创建一个没有原型的新对象,但通过这种方式创建的对象不会继承任何东西,甚至不包括基础方法,比如toString(),也就是说,它将不能和“+”运算符一起正常工作:

</>复制代码

  1. var o2 = Object.create(null); //o2不继承任何属性和方法

如果想创建一个普通的空对象(比如通过{}或new Object()创建的对象),需要传入Object.prototype:

</>复制代码

  1. var o3 = Object.create(Object.prototype); //o3和{}和new Object()一样

例子:通过原型继承创建一个新对象。

inherit() 返回了一个继承自原型对象p的新对象。

这里使用ES5中的Object.create()函数(如果存在的话)。

如果不存在Object.create(),则退化使用其他方法。

</>复制代码

  1. function inherit(p) {
  2. if (p == null) throw TypeError(); // p是一个对象,但不能是null
  3. if (Object.create) return Object.create(p); // 如果Object.create()存在,直接使用它
  4. var t = typeof p; // 否则进行进一步检测
  5. if (t !== "object" && t !== "function") throw TypeError();
  6. function f() {}; // 定义一个空构造函数
  7. f.prototype = p; //将其原型属性设置为p
  8. return new f(); //使用f()创建p的继承对象
  9. }
  10. var o = {};
  11. o.x = 1;
  12. var p = inherit(o); // p继承o和Object.prototype
  13. p.y = 2;
  14. var q = inherit(p);
  15. q.z = 3;
  16. var s = q.toString();
  17. q.x + q.y // => 3: x和y分别继承自o和p

注意,inherit()并不能完全代替Object.create(),它不能通过传入null原型来创建对象,而且不能接收可选的第二个参数。

inherit()函数的其中一个用途就是防止库函数无意间(非恶意地)修改那些不受你控制的对象。

不是将对象直接作为参数传入函数,而是将它的继承对象传入函数。

当函数读取继承对象的属性时,实际上读取的是继承来的值。

如果给继承对象的属性赋值,则这些属性只会影响这个继承对象自身,而不是原始对象:

</>复制代码

  1. var o = { x: "don"t change this value" };
  2. library_function(inherit(o)); // 防止对o的意外修改

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/106332.html

相关文章

  • 加载机制

    摘要:如果没有,那必须先执行相应的类加载过程。分配内存在类加载检查通过后,接下来虚拟机将为新生对象分配内存。程序计数器主要有两个作用字节码解释器通过改变程序计数器来依次读取指令,从而实现代码的流程控制,如顺序执行选择循环异常处理。 目录介绍 01.Java对象的创建过程 1.0 看下创建类加载过程 1.1 对象的创建 1.2 对象的内存布局 02.Java内存区域 2.0 运行...

    mikyou 评论0 收藏0
  • Spring笔记01_下载_概述_监听器

    摘要:简单来说,是一个轻量级的控制反转和面向切面的容器框架。变成的支持提供面向切面编程,可以方便的实现对程序进行权限拦截,运行监控等功能。用于反射创建对象,默认情况下调用无参构造函数。指定对象的作用范围。 1.Spring介绍 1.1 Spring概述 Spring是一个开源框架,Spring是于2003 年兴起的一个轻量级的Java 开发框架,由Rod Johnson 在其著作Expert...

    reclay 评论0 收藏0
  • JavaScript 面向对象开发知识总结基础篇

    摘要:字面形式允许你在不需要使用操作符和构造函数显式创建对象的情况下生成引用值。操作符以一个对象和一个构造函数作为参数鉴别数组有前一小结可以知道鉴别数组类型可以使用。属性是函数独有的,表明该对象可以被执行。这种函数被称为匿名函数。 引子: 1.JavaScript 中的变量类型和类型检测 1.1原始类型 1.2引用类型 1.3內建类型的实例化 1.4函数的字面形式 1.5正则表达式的字...

    Kross 评论0 收藏0
  • Spring IOC 容器源码分析 - 创建原始 bean 对象

    摘要:你也会了解到构造对象的两种策略。构造方法参数数量低于配置的参数数量,则忽略当前构造方法,并重试。通过默认构造方法创建对象看完了上面冗长的逻辑,本节来看点轻松的吧通过默认构造方法创建对象。 1. 简介 本篇文章是上一篇文章(创建单例 bean 的过程)的延续。在上一篇文章中,我们从战略层面上领略了doCreateBean方法的全过程。本篇文章,我们就从战术的层面上,详细分析doCreat...

    sutaking 评论0 收藏0
  • Java进阶1 —— 对象创建与销毁

    摘要:构造方法是在对象实例初始化过程中具有举足轻重的地位,并且提供了多种方式来定义构造方法。在中创建对象的开销是相当低的,并且速度很快。对象终结器前面我们讲述的都是构造方法和对象初始化相关的主题,但还未提及他们的反面对象销毁。 原文链接:http://www.javacodegeeks.com/2015/09/how-to-create-and-destroy-objects.html 本文...

    nemo 评论0 收藏0

发表评论

0条评论

seanlook

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<