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 模式实例 观察者模式
Oct 24 Javascript
javascript 回到顶部效果的实现代码
Feb 17 Javascript
JavaScript中iframe实现局部刷新的几种方法汇总
Jan 06 Javascript
JS中多步骤多分步的StepJump组件实例详解
Apr 01 Javascript
jQuery插件formValidator实现表单验证
May 23 Javascript
利用JavaScript对中文(汉字)进行排序实例详解
Jun 18 Javascript
bootstrap multiselect下拉列表功能
Aug 22 Javascript
Vue 页面跳转不用router-link的实现代码
Apr 12 Javascript
vue+axios新手实践实现登陆的示例代码
Jun 06 Javascript
vue项目中使用scss的方法步骤
May 16 Javascript
vue-next/runtime-core 源码阅读指南详解
Oct 25 Javascript
JavaScript实现复选框全选功能
Apr 11 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
古巴咖啡 Cubita琥爵咖啡 独特的加勒比海风味咖啡
2021/03/06 新手入门
真正的ZIP文件操作类(php)
2007/07/21 PHP
由php的call_user_func传reference引发的思考
2010/07/23 PHP
邮箱正则表达式实现代码(针对php)
2013/06/21 PHP
PHP常用正则表达式集锦
2014/08/17 PHP
PHP Streams(流)详细介绍及使用
2015/05/12 PHP
php微信公众平台示例代码分析(二)
2016/12/06 PHP
PHP编程获取各个时间段具体时间的方法
2017/05/26 PHP
JSON 学习之完全手册 图文
2007/05/29 Javascript
jquery form表单提交插件asp.net后台中文解码
2010/06/12 Javascript
jQuery右键菜单contextMenu使用实例
2011/09/28 Javascript
基于iframe实现类似于ajax的页面无刷新
2014/05/31 Javascript
node.js中的fs.read方法使用说明
2014/12/17 Javascript
Javascript控制input输入时间格式的方法
2015/01/28 Javascript
BootStrap下jQuery自动完成的样式调整
2016/05/30 Javascript
使用Web Uploader实现多文件上传
2016/06/08 Javascript
文件上传的几个示例分享【推荐】
2016/12/16 Javascript
Bootstrap进度条与AJAX后端数据传递结合使用实例详解
2017/04/23 Javascript
vue生成token保存在客户端localStorage中的方法
2017/10/25 Javascript
通过jquery获取上传文件名称、类型和大小的实现代码
2018/04/19 jQuery
vue ssr 指南详读
2018/06/29 Javascript
简单谈谈javascript高级特性
2019/09/04 Javascript
Vue向后台传数组数据,springboot接收vue传的数组数据实例
2020/11/12 Javascript
Cpy和Python的效率对比
2015/03/20 Python
Python循环中else,break和continue的用法实例详解
2019/07/11 Python
Python SMTP配置参数并发送邮件
2020/06/16 Python
python中rb含义理解
2020/06/18 Python
详解python日志输出使用配置文件格式
2021/02/10 Python
使用CSS3美化HTML表单的技巧演示
2016/05/17 HTML / CSS
Gap中国官网:美式休闲风服饰
2017/02/05 全球购物
中医药大学市场营销专业自荐信
2013/09/29 职场文书
机电工程学生自荐信范文
2013/12/07 职场文书
银行存款证明样本
2014/01/17 职场文书
2014年学生管理工作总结
2014/12/20 职场文书
python urllib库的使用详解
2021/04/13 Python
如何利用python创作字符画
2022/06/25 Python