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 相关文章推荐
extjs form textfield的隐藏方法
Dec 29 Javascript
JS IE和FF兼容性问题汇总
Feb 09 Javascript
玩转方法:call和apply
May 08 Javascript
JavaScript制作简易的微信打飞机
Mar 31 Javascript
jquery图片轮播特效代码分享
Apr 20 Javascript
JS实现单击输入框弹出选择框效果完整实例
Dec 14 Javascript
jQuery常用知识点总结以及平时封装常用函数
Feb 23 Javascript
BootStrap modal模态弹窗使用小结
Oct 26 Javascript
微信小程序实现指定显示行数多余文字去掉用省略号代替
Jul 25 Javascript
简单说说angular.json文件的使用
Oct 29 Javascript
vue学习笔记之作用域插槽实例分析
Feb 01 Javascript
js实现时钟定时器
Mar 26 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
二次元帅气男生排行榜,只想悄悄收藏系列
2020/03/04 日漫
PHP简洁函数小结
2011/08/12 PHP
php示例详解Constructor Prototype Pattern 原型模式
2015/10/15 PHP
jQuery实现菜单式图片滑动切换
2015/03/14 Javascript
JavaScript 函数模式详解及示例
2016/09/07 Javascript
JS调用某段SQL语句的方法
2016/10/20 Javascript
js实现砖头在页面拖拉效果
2020/11/20 Javascript
JavaScript基于自定义函数判断变量类型的实现方法
2016/11/23 Javascript
JS图片压缩(pc端和移动端都适用)
2017/01/12 Javascript
js实现数组去重方法及效率?Ρ? target=
2017/02/14 Javascript
jQuery实现导航回弹效果
2017/02/27 Javascript
JavaScript编程设计模式之观察者模式(Observer Pattern)实例详解
2017/10/25 Javascript
基于jQuery Ajax实现下拉框无刷新联动
2017/12/06 jQuery
微信小程序canvas拖拽、截图组件功能
2018/09/04 Javascript
详解关于React-Router4.0跳转不置顶解决方案
2019/05/10 Javascript
微信分享invalid signature签名错误踩过的坑
2020/04/11 Javascript
JavaScript如何操作css
2020/10/24 Javascript
一键搞定python连接mysql驱动有关问题(windows版本)
2016/04/23 Python
Django中STATIC_ROOT和STATIC_URL及STATICFILES_DIRS浅析
2018/05/08 Python
python库matplotlib绘制坐标图
2019/10/18 Python
使用Python的networkx绘制精美网络图教程
2019/11/21 Python
Python数据持久化存储实现方法分析
2019/12/21 Python
Django使用Celery加redis执行异步任务的实例内容
2020/02/20 Python
Python接口测试数据库封装实现原理
2020/05/09 Python
HTML5时代CSS设置漂亮字体取代图片
2014/09/04 HTML / CSS
html5 canvas合成海报所遇问题及解决方案总结
2017/08/03 HTML / CSS
澳大利亚墨尔本的在线时装店:LORETA
2018/09/14 全球购物
DNA测试:Orig3n
2019/03/01 全球购物
德国最大的婴儿用品网上商店:Kidsroom.de(支持中文)
2020/09/02 全球购物
Ibatis如何使用动态表名
2015/07/12 面试题
2019年c语言经典面试题目
2016/08/17 面试题
撤诉书怎么写
2015/05/19 职场文书
2016社区平安家庭事迹材料
2016/02/26 职场文书
2016年教师师德师风承诺书
2016/03/25 职场文书
Web前端:CSS最强总结 附详细代码
2021/03/31 HTML / CSS
Java时间工具类Date的常用处理方法
2022/05/25 Java/Android