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 相关文章推荐
Ajax::prototype 源码解读
Jan 22 Javascript
JavaScript CSS 修改学习第四章 透明度设置
Feb 19 Javascript
读jQuery之十一 添加事件核心方法
Jul 31 Javascript
jQuery之日期选择器的深入解析
Jun 19 Javascript
跟我学习javascript的执行上下文
Nov 18 Javascript
jQuery EasyUI框架中的Datagrid数据表格组件结构详解
Jun 09 Javascript
后端接收不到AngularJs中$http.post发送的数据原因分析及解决办法
Jul 05 Javascript
微信小程序开发(一) 微信登录流程详解
Jan 11 Javascript
面试常见的js算法题
Mar 23 Javascript
基于jQuery的左滑出现删除按钮的示例
Aug 29 jQuery
JS实现数组简单去重及数组根据对象中的元素去重操作示例
Jan 05 Javascript
在vue中实现嵌套页面(iframe)
Jul 30 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
老机欣赏|中国60年代精品收音机
2021/03/02 无线电
PHP中的strtr函数使用介绍(str_replace)
2011/10/20 PHP
php旋转图片90度的方法
2013/11/07 PHP
YII Framework框架教程之日志用法详解
2016/03/14 PHP
PHP记录和读取JSON格式日志文件
2016/07/07 PHP
使用UglifyJS合并/压缩JavaScript的方法
2012/03/07 Javascript
jQuery中prevAll()方法用法实例
2015/01/08 Javascript
javascript+css3 实现动态按钮菜单特效
2016/02/06 Javascript
Angular中自定义Debounce Click指令防止重复点击
2017/07/26 Javascript
Node.js  REPL (交互式解释器)实例详解
2017/08/06 Javascript
Vue源码中要const _toStr = Object.prototype.toString的原因分析
2018/12/09 Javascript
解决微信小程序调用moveToLocation失效问题【超简单】
2019/04/12 Javascript
JS箭头函数和常规函数之间的区别实例分析【 5 个区别】
2020/05/27 Javascript
wxpython中利用线程防止假死的实现方法
2014/08/11 Python
Python实现简单状态框架的方法
2015/03/19 Python
Python 获取当前所在目录的方法详解
2017/08/02 Python
Python读取图片为16进制表示简单代码
2018/01/19 Python
python打包压缩、读取指定目录下的指定类型文件
2018/04/12 Python
在python中将字符串转为json对象并取值的方法
2018/12/31 Python
浅谈Python反射 & 单例模式
2019/03/21 Python
python实现多进程通信实例分析
2019/09/01 Python
Python连接Oracle之环境配置、实例代码及报错解决方法详解
2020/02/11 Python
详解html5 canvas常用api总结(二)--绘图API
2016/12/14 HTML / CSS
生物科学专业个人求职信范文
2013/12/05 职场文书
高一自我鉴定
2013/12/17 职场文书
历史专业个人求职信分享
2013/12/20 职场文书
酒店管理专业自荐信
2014/05/23 职场文书
运动会报道稿300字
2014/10/02 职场文书
2014年医德医风工作总结
2014/11/13 职场文书
维稳工作承诺书
2015/01/20 职场文书
2015年大学生工作总结
2015/04/21 职场文书
捐书活动倡议书
2015/04/27 职场文书
解放思想大讨论活动总结
2015/05/09 职场文书
2015教师个人年度工作总结
2015/10/23 职场文书
七年级作文(600字3篇)
2019/09/24 职场文书
2020年基层司法所建设情况调研报告
2019/11/30 职场文书