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 相关文章推荐
js中的preventDefault与stopPropagation详解
Jan 29 Javascript
jquery插件开发之实现md5插件
Mar 17 Javascript
bootstrapValidator.min.js表单验证插件
Feb 09 Javascript
jQuery实现单击按钮遮罩弹出对话框效果(2)
Feb 20 Javascript
js实现拖拽功能
Mar 01 Javascript
Angular.js基础学习之初始化
Mar 10 Javascript
鼠标拖动改变DIV等网页元素的大小的实现方法
Jul 06 Javascript
vue文件树组件使用详解
Mar 29 Javascript
详解react-redux插件入门
Apr 19 Javascript
koa+mongoose实现简单增删改查接口的示例代码
May 13 Javascript
vue列表数据发生变化指令没有更新问题及解决方法
Jan 16 Javascript
Vue3实现简易音乐播放器组件
Aug 14 Vue.js
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统计字符串中中英文字符的个数
2013/06/23 PHP
PHP遍历数组的方法汇总
2015/04/30 PHP
整理Javascript基础语法学习笔记
2015/11/29 Javascript
JavaScript使用DeviceOne开发实战(四)仿优酷视频应用
2015/12/02 Javascript
Jquery $when done then的用法详解
2016/05/20 Javascript
js事件冒泡、事件捕获和阻止默认事件详解
2016/08/04 Javascript
js html5 css俄罗斯方块游戏再现
2016/10/17 Javascript
Angular.js中angular-ui-router的简单实践
2017/07/18 Javascript
jquery tmpl模板(实例讲解)
2017/09/02 jQuery
微信小程序实现打开内置地图功能【附源码下载】
2017/12/07 Javascript
Parcel.js + Vue 2.x 极速零配置打包体验教程
2017/12/24 Javascript
使用Vue组件实现一个简单弹窗效果
2018/04/23 Javascript
JS实现监控微信小程序的原理
2018/06/15 Javascript
Vue实现textarea固定输入行数与添加下划线样式的思路详解
2018/06/28 Javascript
JavaScript数组基于交换的排序示例【冒泡排序】
2018/07/21 Javascript
Vue 实现分页与输入框关键字筛选功能
2020/01/02 Javascript
Python实现读取文件最后n行的方法
2017/02/23 Python
Python开发微信公众平台的方法详解【基于weixin-knife】
2017/07/08 Python
python判断一个数是否能被另一个整数整除的实例
2018/12/12 Python
Python获取时间范围内日期列表和周列表的函数
2019/08/05 Python
python fuzzywuzzy模块模糊字符串匹配详细用法
2019/08/29 Python
django Layui界面点击弹出对话框并请求逻辑生成分页的动态表格实例
2020/05/12 Python
Python中zip函数如何使用
2020/06/04 Python
纯CSS实现预加载动画效果
2017/09/06 HTML / CSS
Html5跳转到APP指定页面的实现
2020/01/14 HTML / CSS
wordpress添加Html5的表单验证required方法小结
2020/08/18 HTML / CSS
乌克兰机票、铁路和巴士票、酒店搜索、保险:Tickets.ua
2020/01/11 全球购物
巴西购物网站:Submarino
2020/01/19 全球购物
临床护士自荐信
2014/01/31 职场文书
语文教学随笔感言
2014/02/18 职场文书
市场营销专业毕业生求职信
2014/07/21 职场文书
反对形式主义、官僚主义、享乐主义和奢靡之风整改措施
2014/09/17 职场文书
首次购房证明
2015/06/19 职场文书
《女娲补天》读后感5篇
2019/12/31 职场文书
Python爬虫框架之Scrapy中Spider的用法
2021/06/28 Python
Python可视化学习之seaborn绘制矩阵图详解
2022/02/24 Python