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 相关文章推荐
jquery.alert 弹出式复选框实现代码
Jun 15 Javascript
JQuery上传插件Uploadify使用详解及错误处理
Apr 27 Javascript
js控制href内容的连接内容的变化示例
Apr 30 Javascript
jQuery中closest()函数用法实例
Jan 07 Javascript
js实现同一个页面多个渐变效果的方法
Apr 10 Javascript
究竟什么是Node.js?Node.js有什么好处?
May 29 Javascript
JS实现统计复选框选中个数并提示确定与取消的方法
Jul 01 Javascript
点评js异步加载的4种方式
Dec 22 Javascript
BootStrap中关于Select下拉框选择触发事件及扩展
Nov 22 Javascript
小程序实现搜索界面 小程序实现推荐搜索列表效果
May 18 Javascript
webpack常用构建优化策略小结
Nov 21 Javascript
深入webpack打包原理及loader和plugin的实现
May 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动态创建Web站点的方法
2011/08/14 PHP
Linux下PHP连接Oracle数据库
2014/08/20 PHP
js获取控件位置以及不同浏览器中的差别介绍
2013/08/08 Javascript
JS短路原理的应用示例 精简代码的途径
2013/12/13 Javascript
用原生js做个简单的滑动效果的回到顶部
2014/10/15 Javascript
JavaScript类型系统之基本数据类型与包装类型
2016/01/06 Javascript
javascript时间差插件分享
2016/07/18 Javascript
BootStrap实现轮播图效果(收藏)
2016/12/30 Javascript
微信小程序开发之数据存储 参数传递 数据缓存
2017/04/13 Javascript
Vue组件之全局组件与局部组件的使用详解
2017/10/09 Javascript
详解vue2.0 不同屏幕适配及px与rem转换问题
2018/02/23 Javascript
详解Nuxt.js部署及踩过的坑
2018/08/07 Javascript
layui-laydate时间日历控件使用方法详解
2018/11/15 Javascript
Vue.js路由实现选项卡简单实例
2019/07/24 Javascript
layui添加动态菜单与选项卡
2019/07/26 Javascript
解决Vue中的生命周期beforeDestory不触发的问题
2020/07/21 Javascript
vue 导出文件,携带请求头token操作
2020/09/10 Javascript
vue实现桌面向网页拖动文件的示例代码(可显示图片/音频/视频)
2021/03/01 Vue.js
[19:26]TNC vs EG (BO3)
2018/06/07 DOTA
[04:15]DOTA2-DPC中国联赛1月19日Recap集锦
2021/03/11 DOTA
使用Python脚本和ADB命令实现卸载App
2017/02/10 Python
分享几道你可能遇到的python面试题
2017/07/24 Python
关于python的list相关知识(推荐)
2017/08/30 Python
matplotlib 纵坐标轴显示数据值的实例
2018/05/25 Python
HTML5实现经典坦克大战坦克乱走还能发出一个子弹
2013/09/02 HTML / CSS
html5响应式开发自动计算fontSize的方法
2020/01/13 HTML / CSS
介绍一下Linux内核的排队自旋锁
2014/01/04 面试题
餐饮管理自我介绍信
2014/01/15 职场文书
中学家长会邀请函
2014/02/03 职场文书
创建卫生先进单位实施方案
2014/03/10 职场文书
超市周年庆活动方案
2014/08/16 职场文书
教师国庆节演讲稿范文2014
2014/09/21 职场文书
2014班子成员自我剖析材料思想汇报
2014/10/01 职场文书
本科毕业论文致谢词
2015/05/14 职场文书
生产车间管理制度
2015/08/04 职场文书
nginx网站服务如何配置防盗链(推荐)
2021/03/31 Servers