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 相关文章推荐
animate动画示例(泪奔的小孩)及stop和delay的使用
May 06 Javascript
JavaScript中对象property的读取和写入方法介绍
Dec 30 Javascript
jQuery实现页面滚动时动态加载内容的方法
Mar 20 Javascript
SWFObject基本用法实例分析
Jul 20 Javascript
基于javascript实现句子翻牌网页版小游戏
Mar 23 Javascript
浅析JavaScript函数的调用模式
Aug 10 Javascript
vue.js内部自定义指令与全局自定义指令的实现详解(利用directive)
Jul 11 Javascript
详解使用webpack构建多页面应用
Dec 21 Javascript
Vue拖拽组件开发实例详解
May 11 Javascript
vue操作下拉选择器获取选择的数据的id方法
Aug 24 Javascript
jQuery实现的别踩白块小游戏完整示例
Jan 07 jQuery
详解vue-cli@2.x项目迁移日志
Jun 06 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获得文件扩展名三法
2006/11/25 PHP
使用Limit参数优化MySQL查询的方法
2008/11/12 PHP
PHP禁止页面缓存的代码
2011/10/23 PHP
Laravel使用Caching缓存数据减轻数据库查询压力的方法
2016/03/15 PHP
PHP文件上传、客户端和服务器端加限制、抓取错误信息、完整步骤解析
2017/01/12 PHP
深入解析PHP底层机制及相关原理
2020/12/11 PHP
科讯商业版中用到的ajax空间与分页函数
2007/09/02 Javascript
IE不出现Flash激活框的小发现的js实现方法
2007/09/07 Javascript
jquery.boxy插件的iframe扩展代码
2010/07/02 Javascript
基于jQuery的淡入淡出可自动切换的幻灯插件打包下载
2010/09/15 Javascript
动态加载外部javascript文件的函数代码分享
2011/07/28 Javascript
5个最佳的Javascript日期处理类库分享
2012/04/15 Javascript
JavaScript?Apple设备检测示例代码
2013/11/15 Javascript
javascript中数组中求最大值示例代码
2013/12/18 Javascript
轻松创建nodejs服务器(4):路由
2014/12/18 NodeJs
jQuery中add()方法用法实例
2015/01/08 Javascript
JavaScript插件化开发教程 (三)
2015/01/27 Javascript
js实现完全自定义可带多级目录的网页鼠标右键菜单方法
2015/02/28 Javascript
Bootstrap模态框(modal)垂直居中的实例代码
2016/08/18 Javascript
jQuery命名空间与闭包用法示例
2017/01/12 Javascript
JS得到当前时间的方法示例
2017/03/24 Javascript
js注册时输入合法性验证方法
2017/10/21 Javascript
layui+SSM的数据表的增删改实例(利用弹框添加、修改)
2019/09/27 Javascript
JS检测浏览器开发者工具是否打开的方法详解
2020/10/02 Javascript
python局域网ip扫描示例分享
2014/04/03 Python
使用Python获取Linux系统的各种信息
2014/07/10 Python
Flask核心机制之上下文源码剖析
2018/12/25 Python
聊聊python里如何用Borg pattern实现的单例模式
2019/06/06 Python
利用python计算时间差(返回天数)
2019/09/07 Python
python实现发送form-data数据的方法详解
2019/09/27 Python
Python基于read(size)方法读取超大文件
2020/03/12 Python
8款使用 CSS3 实现超炫的 Loading(加载)的动画效果
2015/03/17 HTML / CSS
英国儿童家具专卖店:GLTC
2016/09/24 全球购物
认购协议书范本
2014/04/22 职场文书
财务科长个人对照检查材料
2014/09/18 职场文书
vue特效之翻牌动画
2022/04/20 Vue.js