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 风格的HTML文本转义
Jul 01 Javascript
浏览器图片选择预览、旋转、批量上传的JS代码实现
Dec 04 Javascript
jquery 提示信息显示后自动消失的具体实现
Dec 18 Javascript
js去字符串前后空格的实现方法
Feb 26 Javascript
JavaScript递归操作实例浅析
Oct 31 Javascript
js判断用户是输入的地址请求的路径(实例讲解)
Jul 18 Javascript
JavaScript实现微信号随机切换代码
Mar 09 Javascript
如何实现一个webpack模块解析器
Oct 24 Javascript
微信小程序实现录音时的麦克风动画效果实例
May 18 Javascript
使用Node.js在深度学习中做图片预处理的方法
Sep 18 Javascript
js实现上传图片并显示图片名称
Dec 18 Javascript
微信小程序文章列表功能完整实例
Jun 03 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的call_user_func传reference引发的思考
2010/07/23 PHP
PHP在特殊字符前加斜杠的实现代码
2011/07/17 PHP
一个简单的php加密解密函数(动态加密)
2013/06/19 PHP
彻底删除thinkphp3.1案例blog标签的方法
2014/12/05 PHP
深入理解PHP变量的值类型和引用类型
2015/10/21 PHP
php实现的递归提成方案实例
2015/11/14 PHP
详解PHP字符串替换str_replace()函数四种用法
2017/10/13 PHP
thinkphp5.1框架实现格式化mysql时间戳为日期的方式小结
2019/10/10 PHP
Laravel使用swoole实现websocket主动消息推送的方法介绍
2019/10/20 PHP
禁止直接访问php文件代码分享
2020/05/05 PHP
基于jquery的获取mouse坐标插件的实现代码
2010/04/01 Javascript
Javascript this 的一些学习总结
2012/08/02 Javascript
基于AngularJs + Bootstrap + AngularStrap相结合实现省市区联动代码
2016/05/30 Javascript
老生常谈JQuery data方法的使用
2016/09/09 Javascript
AngularJS 过滤器(自带和自建)详解
2016/09/19 Javascript
利用Decorator如何控制Koa路由详解
2018/06/26 Javascript
vue框架搭建之axios使用教程
2018/07/11 Javascript
vue 实现左右拖拽元素并且不超过他的父元素的宽度
2018/11/30 Javascript
React中阻止事件冒泡的问题详析
2019/04/12 Javascript
vue使用video插件vue-video-player详解
2020/10/23 Javascript
[05:15]DOTA2英雄梦之声_第16期_灰烬之灵
2014/06/21 DOTA
Python中os.path用法分析
2015/01/15 Python
python实现按任意键继续执行程序
2016/12/30 Python
python实现简单加密解密机制
2019/03/19 Python
python json.dumps中文乱码问题解决
2020/04/01 Python
PySide2出现“ImportError: DLL load failed: 找不到指定的模块”的问题及解决方法
2020/06/10 Python
Python内置函数及功能简介汇总
2020/10/13 Python
非常漂亮的CSS3百叶窗焦点图动画
2016/02/24 HTML / CSS
韩国商务邀请函
2014/01/14 职场文书
美德好少年事迹材料
2014/01/19 职场文书
2014新年元旦活动策划方案
2014/02/18 职场文书
软件专业毕业生个人自我鉴定
2014/04/17 职场文书
2014法院干警廉洁警示教育思想汇报
2014/09/13 职场文书
司考复习计划
2015/01/19 职场文书
专业技术职务聘任证明
2015/03/02 职场文书
golang在GRPC中设置client的超时时间
2021/04/27 Golang