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 相关文章推荐
SUN的《AJAX与J2EE》全文译了
Feb 23 Javascript
Javascript的时间戳和php的时间戳转换注意事项
Apr 12 Javascript
Javascript 实现的数独解题算法网页实例
Oct 15 Javascript
下拉列表select 由左边框移动到右边示例
Dec 04 Javascript
JavaScript中Date对象的常用方法示例
Oct 24 Javascript
Bootstrap每天必学之滚动监听
Mar 16 Javascript
AngularJS基础 ng-mouseenter 指令示例代码
Aug 02 Javascript
手机端点击图片放大特效PhotoSwipe.js插件实现
Aug 24 Javascript
JS中使用gulp实现压缩文件及浏览器热加载功能
Jul 12 Javascript
解决vue router组件状态刷新消失的问题
Aug 01 Javascript
解决layui追加或者动态修改的表单元素“没效果”的问题
Sep 18 Javascript
浅析我对JS延迟异步脚本的思考
Oct 12 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中使用接口实现工厂设计模式的代码
2012/06/17 PHP
请离开include_once和require_once
2013/07/18 PHP
PHP抓取、分析国内视频网站的视频信息工具类
2014/04/02 PHP
php封装的表单验证类完整实例
2016/10/19 PHP
利用PHP实现一个简单的用户登记表示例
2017/04/25 PHP
同一个表单 根据要求递交到不同页面的实现方法小结
2009/08/05 Javascript
javascript instanceof 与typeof使用说明
2010/01/11 Javascript
javascript下4个跨浏览器必备的函数
2010/03/07 Javascript
js实现收缩菜单效果实例代码
2013/10/30 Javascript
node.js WEB开发中图片验证码的实现方法
2014/06/03 Javascript
wap图片滚动特效无css3元素纯js脚本编写
2014/08/22 Javascript
js实现3D图片逐张轮播幻灯片特效代码分享
2015/09/09 Javascript
谈一谈bootstrap响应式布局
2016/05/23 Javascript
HTML5基于Tomcat 7.0实现WebSocket连接并实现简单的实时聊天
2016/10/31 Javascript
浅谈使用splice函数对数组中的元素进行删除时的注意事项
2016/12/04 Javascript
JavaScript实现分页效果
2017/03/28 Javascript
教你完全理解ReentrantLock重入锁
2019/06/03 Javascript
NProgress显示顶部进度条效果及使用详解
2019/09/21 Javascript
微信小程序绑定手机号获取验证码功能
2019/10/22 Javascript
关于vue组件事件属性穿透详解
2019/10/28 Javascript
vue切换菜单取消未完成接口请求的案例
2020/11/13 Javascript
Python实现根据指定端口探测服务器/模块部署的方法
2014/08/25 Python
在python tkinter界面中添加按钮的实例
2020/03/04 Python
Python run()函数和start()函数的比较和差别介绍
2020/05/03 Python
Python selenium实现断言3种方法解析
2020/09/08 Python
Python抖音快手代码舞(字符舞)的实现方法
2021/02/07 Python
CSS3教程:新增加的结构伪类
2009/04/02 HTML / CSS
英国拳击装备购物网站:RDX Sports
2018/01/23 全球购物
高性能钓鱼服装:Huk Gear
2019/02/20 全球购物
SQL Server面试题
2016/10/17 面试题
科长个人四风问题整改措施思想汇报
2014/10/13 职场文书
教师批评与自我批评总结
2014/10/16 职场文书
离婚财产分隔协议书
2014/10/23 职场文书
2015年社区文体活动总结
2015/03/25 职场文书
oracle重置序列从0开始递增1
2022/02/28 Oracle
Nginx 匹配方式
2022/05/15 Servers