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文件缓存的代码
Apr 09 Javascript
Js 随机数产生6位数字
May 13 Javascript
onmouseover和onmouseout的一些问题思考
Aug 14 Javascript
Javascript的setTimeout()使用闭包特性时需要注意的问题
Sep 23 Javascript
jquery实现select下拉框美化特效代码分享
Aug 18 Javascript
jQuery实现折叠、展开的菜单组效果代码
Sep 16 Javascript
jQuery使用serialize()表单序列化时出现中文乱码问题的解决办法
Jul 27 Javascript
Bootstrap3 datetimepicker控件使用实例
Dec 13 Javascript
你真的了解BOM中的history对象吗
Feb 13 Javascript
使用Vue-cli 3.0搭建Vue项目的方法
Jun 07 Javascript
vue 列表页跳转详情页获取id以及详情页通过id获取数据
Mar 27 Javascript
gojs实现蚂蚁线动画效果
Feb 18 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支付宝接口用法分析
2015/01/04 PHP
总结对比php中的多种序列化
2016/08/28 PHP
PHP PDO数据库操作预处理与注意事项
2019/03/16 PHP
基于jquery的一个简单的脚本验证插件
2010/04/05 Javascript
Js setInterval与setTimeout(定时执行与循环执行)的代码(可以传入参数)
2010/06/11 Javascript
JavaScript类库D
2010/10/24 Javascript
js读取配置文件自写
2014/02/11 Javascript
css与javascript跨浏览器兼容性总结
2014/09/15 Javascript
js控制div弹出层实现方法
2015/05/11 Javascript
JS实现新浪博客左侧的Blog管理菜单效果代码
2015/10/22 Javascript
Javascrip实现文字跳动特效
2016/11/27 Javascript
ES6学习教程之块级作用域详解
2017/10/09 Javascript
微信小程序使用slider设置数据值及switch开关组件功能【附源码下载】
2017/12/09 Javascript
ajax请求+vue.js渲染+页面加载的示例
2018/02/11 Javascript
浅析java线程中断的办法
2018/07/29 Javascript
解决layer 关闭当前弹窗 关闭遮罩层 input值获取不到的问题
2019/09/25 Javascript
解决vue v-for src 图片路径问题 404
2019/11/12 Javascript
JS事件循环机制event loop宏任务微任务原理解析
2020/08/04 Javascript
[01:31]完美与DOTA2历程
2014/07/31 DOTA
python网络编程示例(客户端与服务端)
2014/04/24 Python
python实现定制交互式命令行的方法
2014/07/03 Python
Python实现图片添加文字
2019/11/26 Python
selenium+python实现自动登陆QQ邮箱并发送邮件功能
2019/12/13 Python
详解Python直接赋值,深拷贝和浅拷贝
2020/07/09 Python
CSS3实现任意图片lowpoly动画效果实例
2017/05/11 HTML / CSS
日本高岛屋百货购物网站:TAKASHIMAYA
2019/03/24 全球购物
AJAX的全称是什么
2012/11/06 面试题
《雷鸣电闪波尔卡》教学反思
2014/02/23 职场文书
后勤服务中心总经理工作职责
2014/03/03 职场文书
中国文明网向国旗敬礼寄语大全
2014/09/27 职场文书
介绍信的写法
2015/01/31 职场文书
大学感恩节活动总结
2015/05/05 职场文书
丧事答谢词大全
2015/09/30 职场文书
创业计划之特色精品店
2019/08/12 职场文书
教你怎么用Python操作MySql数据库
2021/05/31 Python