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 EasyUI NumberBox(数字框)的用法
Jul 08 Javascript
jQuery 定时局部刷新(setInterval)
Nov 19 Javascript
基于JQuery制作的产品广告效果
Dec 08 Javascript
浅谈javascript的Touch事件
Sep 27 Javascript
JavaScript实现上下浮动的窗口效果代码
Oct 12 Javascript
node.js发送邮件email的方法详解
Jan 06 Javascript
vue + socket.io实现一个简易聊天室示例代码
Mar 06 Javascript
使用Browserify来实现CommonJS的浏览器加载方法
May 14 Javascript
Vue使用vue-cli创建项目
Sep 01 Javascript
node微信开发之获取access_token+自定义菜单
Mar 17 Javascript
node脚手架搭建服务器实现token验证的方法
Jan 20 Javascript
Vue 实例中使用$refs的注意事项
Jan 29 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中文件上传的安全问题
2006/10/09 PHP
php 根据url自动生成缩略图并处理高并发问题
2014/01/23 PHP
PHP创建多级目录的两种方法
2016/10/28 PHP
laravel5.2实现区分前后台用户登录的方法
2017/01/11 PHP
Laravel解决nesting level错误和隐藏index.php的问题
2019/10/12 PHP
JavaScript 学习 - 提高篇
2007/02/02 Javascript
JS setCapture 区域外事件捕捉
2010/03/18 Javascript
js 判断脚本加载完毕的代码
2011/07/13 Javascript
jquery清空textarea等输入框实现代码
2013/04/22 Javascript
jQuery中removeClass()方法用法实例
2015/01/05 Javascript
JS与jQuery实现ListBox上移,下移,左移,右移操作功能示例
2018/05/31 jQuery
element-ui upload组件多文件上传的示例代码
2018/10/17 Javascript
vue通过cookie获取用户登录信息的思路详解
2018/10/30 Javascript
微信小程序实现留言板(Storage)
2018/11/02 Javascript
vue动态循环出的多个select出现过的变为disabled(实例代码)
2019/11/10 Javascript
微信小程序中的列表切换功能实例代码详解
2020/06/09 Javascript
JavaScript代码实现简单计算器
2020/12/27 Javascript
Python cookbook(数据结构与算法)实现优先级队列的方法示例
2018/02/18 Python
Flask框架Jinjia模板常用语法总结
2018/07/19 Python
python rsa实现数据加密和解密、签名加密和验签功能
2019/09/18 Python
Python 实现加密过的PDF文件转WORD格式
2020/02/04 Python
Python 写了个新型冠状病毒疫情传播模拟程序
2020/02/14 Python
python实现人像动漫化的示例代码
2020/05/17 Python
详解CSS3中常用的样式【基本文本和字体样式】
2020/10/20 HTML / CSS
html5 figure和figcaption的使用方法
2018/09/10 HTML / CSS
法国太阳镜店:Sunglasses Shop
2016/08/27 全球购物
澳大利亚领先的优质葡萄酒拍卖会:Langton’s Fine Wines
2019/03/24 全球购物
机关出纳岗位职责
2014/04/03 职场文书
农业项目建议书
2014/08/25 职场文书
公司内部升职自荐信
2015/03/27 职场文书
管理失职检讨书范文
2015/05/05 职场文书
刑事附带民事诉讼答辩状
2015/05/22 职场文书
2015年暑期社会实践报告
2015/07/13 职场文书
技术入股协议书
2016/03/22 职场文书
python scipy 稀疏矩阵的使用说明
2021/05/26 Python
一次SQL查询优化原理分析(900W+数据从17s到300ms)
2022/06/10 SQL Server