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 相关文章推荐
javascript hashtable 修正版 下载
Dec 30 Javascript
在图片上显示左右箭头类似翻页的代码
Mar 04 Javascript
基于JavaScript 声明全局变量的三种方式详解
May 07 Javascript
Javascript中各种trim的实现详细解析
Dec 10 Javascript
常规表格多表头查询示例
Feb 21 Javascript
javascript实现根据iphone屏幕方向调用不同样式表的方法
Jul 13 Javascript
JavaScript iframe数据共享接口实现方法
Jan 06 Javascript
json格式数据的添加,删除及排序方法
Jan 21 Javascript
vue实现提示保存后退出的方法
Mar 15 Javascript
vue把输入框的内容添加到页面的实例讲解
Nov 11 Javascript
Vue的Eslint配置文件eslintrc.js说明与规则介绍
Feb 03 Javascript
如何使用JS console.log()技巧提高工作效率
Oct 14 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
数据库的日期格式转换
2006/10/09 PHP
php中AES加密解密的例子小结
2014/02/18 PHP
PHP中类的自动加载的方法
2017/03/17 PHP
详解PHP中的8个魔术常量
2020/07/06 PHP
ExtJS 2.0实用简明教程 之Border区域布局
2009/04/29 Javascript
extjs 的权限问题 要求控制的对象是 菜单,按钮,URL
2010/03/09 Javascript
JS图像无缝滚动脚本非常好用
2014/02/10 Javascript
javascript动态向网页中添加表格实现代码
2014/02/19 Javascript
JS对img标签进行优化使用onerror显示默认图像
2014/04/24 Javascript
JavaScript实现的encode64加密算法实例分析
2015/04/15 Javascript
jquery实现邮箱自动填充提示功能
2015/11/17 Javascript
react学习笔记之state以及setState的使用
2017/12/07 Javascript
微信小程序网络请求封装示例
2018/07/24 Javascript
推荐一个基于Node.js的表单验证库
2019/02/15 Javascript
vue实现中部导航栏布局功能
2019/07/30 Javascript
Nuxt的路由动画效果案例
2020/11/06 Javascript
[32:56]完美世界DOTA2联赛PWL S3 Rebirth vs CPG 第二场 12.11
2020/12/16 DOTA
Python实现的文本简单可逆加密算法示例
2017/05/18 Python
python搭建服务器实现两个Android客户端间收发消息
2018/04/12 Python
python设计微型小说网站(基于Django+Bootstrap框架)
2019/07/08 Python
python 画3维轨迹图并进行比较的实例
2019/12/06 Python
Django 批量插入数据的实现方法
2020/01/12 Python
Python面向对象编程基础实例分析
2020/01/17 Python
python实现opencv+scoket网络实时图传
2020/03/20 Python
Django Admin后台添加数据库视图过程解析
2020/04/01 Python
Python如何使用正则表达式爬取京东商品信息
2020/06/01 Python
CSS3样式linear-gradient的使用实例
2017/01/16 HTML / CSS
KEEN美国官网:美国人气户外休闲鞋品牌
2021/03/09 全球购物
编程实现当输入某产品代码则打印出该产品记录的功能
2014/05/03 面试题
学生就业推荐信
2013/11/13 职场文书
消防应急演练方案
2014/02/12 职场文书
建筑工程技术专业求职信
2014/07/16 职场文书
杭白菊导游词
2015/02/10 职场文书
中学后勤工作总结2015
2015/07/22 职场文书
剖析后OpLog订阅MongoDB的数据变更就没那么难了
2022/02/24 MongoDB
室外天线与收音机天线杆接合方法
2022/04/05 无线电