JavaScript面向对象程序设计创建对象的方法分析


Posted in Javascript onAugust 13, 2018

本文实例讲述了JavaScript面向对象程序设计创建对象的方法。分享给大家供大家参考,具体如下:

面向对象的语言具有一个共同的标志,那就是具有“类”的概念,但是在javascript中没有类的概念,在js中将对象定义为“无序属性的集合,其属性可以包含基本值,对象或者函数”,即其将对象看作是一组名值对的散列表。这样问题就来了,如何创建对象呢?

在最开始时使用object构造函数和对象字面量来创建单个对象,下面简要介绍这两种方法。

object构造函数:创建自定义对象的最简单方式就是创建一个object的实例,然后为这个实例添加属性和方法:

var person=new object();
person.name="haha";
person.age=20;
person.job="搞笑工作者";
person.sayName=function(){
   alert(this.name);
};

在上面的代码中,定义了一个person对象,并且添加了三个属性和一个方法,其中方法采用的时函数表达式的方式实现,这是用object构造函数的方式创建一个对象。

对象字面量:

var person={
  name:"haha",
  age:20,
  job:"搞笑工作者",
  sayName:function(){
    alert(this.name);
  }
}

以上代码中同样创建了一个person对象,这种方法类似于代码块的方式,实现了对一个person对象的创建。

以上这两种方法中,都需要大量重复定义,在我们需要创建对象时就需要重复以上代码,不够精炼,所以出现了工厂模式和构造函数模式类创建对象的方法。

工厂模式:

工程模式抽象了创建具体对象的过程(专业书籍中给出),其实说的比较明白点就是采用函数的形式,用函数来封装创建对象的过程,再创建对象时以调用函数的形式创建。例如:

function createPerson(name,age,job){
  var o=new object();
  o.name="haha";
  o.age=20;
  o.job="搞笑工作者";
  o.sayName=function(){
    alert(this.name);
  };
  return o;
}
var person1=createPerson("hehe",22,"呵呵工作者");
var person2=createPerson("heihei",23,"嘿嘿工作者");

在这种工厂模式下,将以object构造函数创建对象的方法封装到了一个函数中,在以后的创建对象的过程中,直接调用此方法就可以创建出一个接着一个的对象。

构造函数模式:

构造函数模式相对于工厂模式的优势在于构造函数模式可以创建特定类型的对象。

function Person(name,age,job){
  this.name=name;
  this.age=age;
  this.job=job;
  this.sayName=function(){
    alert(this.name);
  };
}
var person1=new Person("hehe",22,"呵呵工作者");
var person2=new Person("heihei",23,"嘿嘿工作者");

在以上代码中,定义一个Person()的方法,在Person()方法中,将其属性进行了实例化,这种方法类似于在面向对象语言中在实例化类时直接会调用的构造函数,利用这种方法,将此函数大致相当于面向对象语言中的类,可以在以后的代码中不断的实例化,用以不断创建出此类的对象。在Javascript中,这种构造函数也是一种函数,不过是专门用于创建对象而已。

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
IE与Firefox在JavaScript上的7个不同写法小结
Sep 14 Javascript
8个超棒的学习 jQuery 的网站 推荐收藏
Apr 02 Javascript
推荐10 款 SVG 动画的 JavaScript 库
Mar 24 Javascript
JavaScript实现的简单幂函数实例
Apr 17 Javascript
js如何判断输入字符串长度
Dec 16 Javascript
jQuery基于muipicker实现仿ios时间选择
Feb 22 Javascript
javascript动画之模拟拖拽效果篇
Sep 26 Javascript
WEB前端实现裁剪上传图片功能
Oct 17 Javascript
使用vue框架 Ajax获取数据列表并用BootStrap显示出来
Apr 24 Javascript
JS实现队列的先进先出功能示例
May 10 Javascript
小程序双头slider选择器的实现示例
Mar 31 Javascript
JS快速实现简单计算器
Apr 08 Javascript
vue.js template模板的使用(仿饿了么布局)
Aug 13 #Javascript
angularjs 动态从后台获取下拉框的值方法
Aug 13 #Javascript
vue2.0 中使用transition实现动画效果使用心得
Aug 13 #Javascript
vue.js2.0 实现better-scroll的滚动效果实例详解
Aug 13 #Javascript
jQuery实现图片简单轮播功能示例
Aug 13 #jQuery
vue.js 实现评价五角星组件的实例代码
Aug 13 #Javascript
Vue.js实现数据响应的方法
Aug 13 #Javascript
You might like
如何利用php+mysql保存和输出文件
2006/10/09 PHP
将RTF格式的文件转成HTML并在网页中显示的代码
2006/10/09 PHP
php下MYSQL limit的优化
2008/01/10 PHP
dedecms函数分享之获取某一栏目所有子栏目
2014/05/19 PHP
新浪微博OAuth认证和储存的主要过程详解
2015/03/27 PHP
64位windows系统下安装Memcache缓存
2015/12/06 PHP
在WordPress中实现发送http请求的相关函数解析
2015/12/29 PHP
[原创]js与自动伸缩图片 自动缩小图片的多浏览器兼容的方法总结
2007/03/12 Javascript
jquery 可排列的表实现代码
2009/11/13 Javascript
js 数组的for循环到底应该怎么写?
2010/05/31 Javascript
关于jquery ajax 调用带参数的webservice返回XML数据一个小细节
2012/07/31 Javascript
jquery显示和隐藏div特效实例
2013/02/27 Javascript
使用insertAfter()方法在现有元素后添加一个新元素
2014/05/28 Javascript
Javascript让DEDECMS告别手写Tag
2014/09/01 Javascript
JS特效实现图片自动播放并可控的效果
2015/07/31 Javascript
JS iFrame加载慢怎么解决
2016/05/13 Javascript
微信小程序 this和that详解及简单实例
2017/02/13 Javascript
[01:57]2016完美“圣”典风云人物:国士无双专访
2016/12/04 DOTA
python和flask中返回JSON数据的方法
2018/03/26 Python
Python模拟自动存取款机的查询、存取款、修改密码等操作
2018/09/02 Python
numpy数组之存取文件的实现示例
2019/05/24 Python
Python分布式进程中你会遇到的问题解析
2019/05/28 Python
Python3.0 实现决策树算法的流程
2019/08/08 Python
Python栈的实现方法示例【列表、单链表】
2020/02/22 Python
python是怎么被发明的
2020/06/15 Python
Python实现EM算法实例代码
2020/10/04 Python
使用css实现android系统的loading加载动画
2019/07/25 HTML / CSS
HTML5的Geolocation地理位置定位API使用教程
2016/05/12 HTML / CSS
运动会入场词200字
2014/02/15 职场文书
乡镇交通安全实施方案
2014/03/29 职场文书
百货商场楼层班组长竞聘书
2014/03/31 职场文书
学校清明节活动总结
2014/07/04 职场文书
团队拓展活动方案
2014/08/28 职场文书
离婚财产分配协议书
2014/10/21 职场文书
趣味运动会口号
2015/12/24 职场文书
Python 数据科学 Matplotlib图库详解
2021/07/07 Python