【JavaScript学习】JavaScript对象创建

1.最简单的方法,创建一个对象,然后添加属性

 1 var person = new Object();
 2 person.age = 23;
 3 person.name = "David";
 4 person.job = "student";
 5 person.sayName = function ()
 6 {
 7        alert(this.name);
 8 };
 9 
10 //类似于定义键值对或者json数据格式的定义方法.
11 var person =
12 {
13      age:23,
14      name:"David",
15      job:"student",
16      sayName:function()
17      {
18          alert(this.name);
19      }
20 };

该方法简单明了,缺点就是当要创建多个同类型的对象时,重复性的代码较多.

2.解决方法1中的问题,借鉴许多软件设计的思想,引入工厂模式,即构造一个创建对象的工厂函数,实现对象创建的功能.

 1 function createPerson(name,age,job)
 2 {
 3        var o = new Object();
 4        o.name = name;
 5        o.age = age;
 6        o.job = job;
 7        o.sayName = function()
 8        {
 9                alert(this.name);
10        };
11        return o;
12 }
13 var person = createPerson("David",23,"student");

该方法解决了代码重复的问题,可以利工厂函数创建出多个对象.但此方法返回的对象都是Object类型,不能标识创建的对象的类型属性.

3.构造函数模式,创建构造函数,结合new操作符可以创建对象

 1 function Person(name,age,job)
 2 {
 3     this.name = name;
 4     this.age = age;
 5     this.job = job;
 6     this.sayName = function()
 7     {
 8         alert(this.name);
 9     }
10 }
11 var person1 = new Person("David",23,"student");
12 var person2 = Person("Bill",21,"Boss");
13 person1.sayName();  //显示David
14 person2.sayName(); //显示undefined
15 sayName();          //显示Bill

person1 结合new 操作创建了一个对象实例,但person2没有结合new,直接调用Person(name,age,job)函数,此时,函数的作用域里的this指的是window,因而出现后两行的显不结果.安全的构造函数可以避免出现上述的问题

 1 function Person(name,age,job)
 2 {
 3      if(this instanceof Person)
 4      {
 5           this.name = name;
 6           this.age = age;
 7           this.job = job;
 8           this.sayName = function()
 9           {
10               alert(this.name);
11           }
12      }
13      else
14          return new Person(name,age,job);
15 }

this instanceof Person  检测当前this是否指向到Person对象. 这样改进后,将不会出上面描述的问题.关键是理解this是指向当前执行环境的,关于函数的执行环境以及作用域链,以后再作介绍.一般类型的方法是一样的,可以共享,但使用该方法,每创建一个对象,都会创建一个方法的副本,产生代码的重复性.

4.解决该问题,可以把方法置于构造函数体外定义,构造函数内只需要引用在构造函数外定义的函数即可.

 1 function Person(name,age,job)
 2 {
 3     this.name = name;
 4     this.age = age;
 5     this.job = job;
 6     this.sayName = sayName;
 7 }
 8 
 9 function sayName()
10 {
11     alert(this.name);
12 }

这样可以解决方法共享的问题,但会引入其他问题,这样将导致global scope里将会有许有方法,使用global scope过于庞大,这样不便于代码管理,方法和相应的属性分开.

5.原型模式.

 1 function Person(){}
 2 Person.prototype.name = "David";
 3 Person.prototype.age = 23;
 4 Person.prototype.job = "student";
 5 Person.prototype.sayName = function()
 6 {  
 7     alert(this.name);
 8 };
 9 var person1 = new Person();
10 var person2 = new Person();

通过设置构造函数的原型,来达到对象中属性和方法的共享,person1和person2中对应的属性和方法都是一样的. 虽然这种方法,实现了代码共享,减少了代码的重复,但并不符合人们的需求,一般都是需要各个对象既有共享的方法和属性,又有各自的特点和属性.而且这种方法不能传递初始化参数,默认构造的对象都具有与原型相同的属性.

6.原型和构造函数混合模式  利用原型来设置方法,达到方法的共享,利用构造函数来实现属性的设置,支持初始化参数传递,达到属性的个性化

 1 function Person(name,age,job)
 2 {
 3     this.name = name;
 4     this.age = age;
 5     this.job = job;
 6 }
 7 Person.prototype = {
 8     constructor:Person,
 9     sayName:function()
10     {
11         alert(this.name);
12     }
13 };
14 var person1 = new Person("David",23,"student");
15 var person2 = new Person("Bill",21,"Boss");

这样person1和person2对应的属性不共享,但方法sayName共享.该方法基本可以满足一般用户创建对象的需求.该方法存在一点不好,就是方法和属性要分开设置,而且在利用原型设置方法时,若是重写原型,则必须指定constructor为构造函数,若是只设置相应的属性,如Person.prototype.sayName = function(){};则不需要指定constructor属性.

7.动态原型模式 可以将属性和方法设置一起置于构造函数内.

 1 function Person(name,age,job)
 2 {
 3     this.name = name;
 4     this.age = age;
 5     this.job = job;
 6   
 7   if(typeof this.sayName != "function")
 8     {
 9          Person.prototype.sayName = function()
10          {
11              alert(this.name);
12          };
13     }
14  }

检测this.sayName是否已经定义,若定义了,则不用设置原型.否则,设置原型定义sayName函数.这种方法同样可以达到属性个性化,方法共享的要求

       总结,以上就是几种关于对象创建的方法的总结,逐步完善,从每种方法存在的问题出发,从而寻找更好的解决方法,这样可以进一步的理解javascript中各种机制设计的最初目的.

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/547616.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

C# ArrayList 与 string、string[] 的转换

1、ArrarList 转换为 string[] ArrayList list new ArrayList(); list.Add("aaa"); list.Add("bbb"); //转换成数组 string[] arrString (string[])list.ToArray(typeof( string)); 2、string[] 转换为 ArrarList ArrayList list new ArrayList(new st…

oracle不能访问管理页面,Oracle Grid Control CONSOLE无法打开9i数据库的管理维护页面...

今天在Solaris平台的测试环境上安装了Oracle Grid control 10.2.0.1,安装及配置完成后,发现在登录9i数据库的tablespace维护页面时,页面处于长时间的等待状况。最终返回错误信息。该页面在打开其他较小的数据库的页面时,均能正常访…

(转)在Myeclipse中查看android源码就是这么easy

http://byandby.iteye.com/blog/814277转载于:https://www.cnblogs.com/hyzhou/p/3217022.html

SQL Server 不同数据库导入指定数据解决方案

1 use 待导入DB 2 go 3 4 /*启动Ad Hoc Distributed Queries*/ 5 exec sp_configure show advanced options,1 6 reconfigure 7 exec sp_configure Ad Hoc Distributed Queries,1 8 reconfigure 9 10 insert into 待导入DB.dbo.表名11 select top 10 sid from opendatasource(…

Vue + Element UI 实现 登陆注册基本demo实例

Vue Element UI 实现权限管理系统 前端篇(二):Vue Element 案例 导入项目 打开 Visual Studio Code,File --> add Folder to Workspace,导入我们的项目。 安装 Element 安装依赖 Element 是国内饿了么公司提供…

oracle first_rows怎么用,优化模式区别(all_rows first_rows_n)

Why is my index not used?* The table is indexed isn’t it? 🙂* Why SHOULD the index be used?* Are the indexed columns/leading column of the index supplied in the where clause of the query (predicate list) as a single table (non-join) predicat…

svn 客户端批量备份数据(图+文)

缘由 商业用途的规则,数据与谨慎便成了不可替代的王道,我今天也说svn,在客户端批量备份数据。 前提 考虑跨平台与易用性,选择批处理(.bat),既然是批处理,少不了的便是命令和执行命…

Vue项目 报错TypeError [ERR INVALID ARG TYPE]: The “path“ argument must be of type string

# Vue项目 报错TypeError [ERR INVALID ARG TYPE]: The “path“ argument must be of type string 卡了半天,原来是sassloader版本过高导致的, 解决方法: 回退7.版本npm uninstall sass-loader(卸载当前版本) npm install sass…

使用python来访问Hadoop HDFS存储实现文件的操作

在调试环境下,咱们用hadoop提供的shell接口测试增加删除查看,但是不利于复杂的逻辑编程查看文件内容www.xiaorui.cc用python访问hdfs是个很头疼的事情。。。。这个是pyhdfs的库import pyhdfs fs pyhdfs.connect("192.168.1.1", 9000) pyhdfs.…

Jquery取得iframe中元素的几种方法Javascript Jquery获取Iframe的元素、内容或者ID,反之也行!

jquery取得iframe中元素的几种方法 在iframe子页面获取父页面元素 代码如下:$(#objId, parent.document);// 搞定...在父页面 获取iframe子页面的元素代码如下:$("#objid",document.frames(iframename).document) $(document.getElementById(iframeId).contentWind…

oracle中trunc x-1,oracle中trunc函数的说明

一、oracle trunc()函数的用法TRUNC(for dates)精确到天 select trunc(sysdate,dd) from dual 结果为:2010-9-17精确到月 select trunc(sysdate,mm) from dual 结果为:2010-9-1精确到年 select trunc(sysdate,yy) from dual 结果为:2010-1-1T…

Html去掉链接虚线边框

html去除图片链接边框及其链接虚线οnfοcus"this.blur();"用图片做为链接后&#xff0c;在图片的周围出现了一个带颜色边框用<a href"#"><img src"" border"0"></a>就去掉了边框当点击图片时&#xff0c;又出现了虚…

vue+axios请求时设置request header请求头(带上token)

vueaxios请求时设置请求头&#xff08;带上token&#xff09; 1.在vue中&#xff0c;向后台发送请求&#xff0c;不管是get或post&#xff0c;url要带上userId&#xff0c;headers要带上token值&#xff08;本地存储的token&#xff0c;window.localStorage[‘token’]&#x…

LINQ能不能用系列(一)LINQ to Object 效率比对

前言 简介&#xff1a;LINQ&#xff0c;语言集成查询&#xff08;Language INtegrated Query&#xff09;是一组用于c#和Visual Basic语言的扩展。 分类&#xff1a;LINQ to Object, LINQ to XML, LINQ to SQL, LINQ to DataSet&#xff0c;LINQ to ADO.NET。 相关&#xff…

oracle应收模块核销点不上,详解EBS接口开发之应收款处理

(一)应收款常用标准表简介1.1常用标准表如下表中列出了与应收款处理相关的表和说明&#xff1a;表名说明其他信息AR_BATCHES_ALLAR收款批表AR_BATCH_SOURCES_ALLAR收款类型表对应视图AR_CASH_RECEIPTS_ALLAR收款表对应视图AR_CASH_RECEIPT_HISTORY_ALLAR收款历史表对应视图AR_M…

防雷避险手册

为什么80%的码农都做不了架构师&#xff1f;>>> 防雷避险手册 防雷避险手册.pdf 转载于:https://my.oschina.net/tadcat/blog/148504

OpenCV调用YOLOv4进行目标检测

目标检测就是对目标进行动态实时跟踪定位&#xff0c;常见的目标检测算法有 R-CNN、Fast R-CNN、Faster R-CNN、SSD、Yolo 等&#xff0c;其中 Yolo 的速度和精确度都比较高&#xff0c;且只需训练一次&#xff0c;使用起来比较方便。 这里我们就使用官方现成的模型来检测图片…

2024年3月电子学会青少年编程等级考试时间安排

1考试方式 1. 在线居家考试&#xff08;全国&#xff09;&#xff1b; 2. 对于符合线下考试要求的考试服务网点&#xff0c;经地方实地调研报学会总部批准后&#xff0c;可组织线下考试。 2报名时间 报名时间&#xff1a;2023年12月21日-2024年3月12日16:00&#xff1b; 考…

Sql Server常用时间段查询汇总

前言 本文对应Sql Server 中常用的时间查询的进行一些汇总&#xff0c;例如查询当天的、本周的、本月的、本季度的&#xff0c;某个时间段内的时间。 实例 实例&#xff08;我的&#xff09;表名&#xff1a;mytable 字段名&#xff1a;mydate &#xff08;一&#xff09;、…

scan-cvs-user.sh

为什么80%的码农都做不了架构师&#xff1f;>>> scan-cvs-user.sh #! /bin/sh export LC_ALLzh_CN.UTF-8 cd /bin2/ sh scan-cvs-user-daily.sh > scan-cvs-user-daily.sh.log 2>&1 /usr/bin/mutt -s "scan-cvs-user-daily" scm-svr-mtrsc…