js面向对象之常见创建对象的几种方式(工厂模式、构造函数模式、原型模式)


Posted in Javascript onNovember 09, 2015

在上篇文章给大家介绍了javascript面向对象基础,本篇文章继续深入学习javascript面向对象,JS的语法非常灵活,简单的对象创建就有好几种不同的方法。这些过于灵活的地方有时候确实很让人迷惑,那么今天我们就来梳理一下JS中常用的创建对象的几种方法吧。

前言

虽然使用 Object构造函数 或者使用 对象字面量 可以很方便的用来创建一个对象,但这种方式有一个明显的缺点:使用一个接口创建多个对象会产生很多冗余的代码。因此为了解决这个问题,人们开始使用以下几种方式来常见对象。

工厂模式

该模式抽象了创建对象的具体过程,用函数来以特定接口创建对象的细节

function cPerson(name,sex,age){
 var o = new Object();
 o.name = name;
 o.sex = sex;
 o.age = age;
 o.show = function(){
 console.log(this.name,this.age,this.sex);
 }
 return o;
}
 var p1 = cPerson('谦龙','男','100');
 p1.show();
 var p2 = cPerson('雏田','女','14');
 p2.show();

工厂模式测试

工厂方式的问题:使用工厂模式能够创建一个包含所有信息的对象,可以无数次的调用的这个函数。虽然其解决了创建多个相似对象的问题,但却没有解决对象识别的问题(即如何得知一个对象的类型)

构造函数模式

function CPerson(name,sex,age) {//注意这里 构造函数首字母大写
 this.name = name;
 this.sex = sex;
 this.age = age;
 this.show = function () {
 console.log(this.name, this.age, this.sex);
 }
}
var p1 = new CPerson('谦龙','男','100');
 p1.show();
var p2 = new CPerson('雏田','女','14');
 p2.show();

构造函数模式测试

注意构造函数与工厂模式有些不同的地方,如下

构造函数首字母大写

没有显式地创建对象

将属性和方法赋值给了 this 对象

没有return语句

而且以这种方式来调用构造函数会大致经历一下 几个步骤

创建一个新的对象

将构造函数的作用域赋值给这个对象(因此this就指向了这个对象)

执行构造函数中的代码(即给新对象添加属性和方法的过程)

返回对象

注意:构造函数其实和普通的函数没有太大的差别,唯一的不同在于调用方式的不同。以下演示不同的几种调用方式

// 调用方式1 new 方式
 var p1 = new CPerson('谦龙','男','100');
 p1.show();//谦龙 100 男
 // 调用方式2 普通函数调用
 CPerson('谦龙','男','100');
 window.show()//谦龙 100 男 注意属性和方法会被设置到window对象上
 // 调用方式3 在另一个对象的作用域中调用
 var obj = new Object();
 CPerson.call(obj,'谦龙','男','100');
 obj.show(); //谦龙 100 男 在obj的作用域

构造函数的问题:使用构造函数最主要的问题就是每个方法都要在每个实例上重新创建一次,p1与p2的都有show方法,但不是同一个Function的实例,因为function在js中也是一个对象。因此他们共有的show方法并不相等。

原型模式

每个函数都有一个prototype属性,这个属性是一个指针,指向一个对象。而这个对象的用途是 包含可以由 特定类型 的所有 实例 共享的属性和方法。即调用构造函数所创建的那个对象的 原型对象

好处是可以让所有对象的实例共享他的属性的方法。即无需在构造函数中定义实例的信息

function CPerson(){
}
CPerson.prototype.name='谦龙';
CPerson.prototype.sex='男';
CPerson.prototype.age=100;
CPerson.prototype.show=function(){
 console.log(this.name, this.age, this.sex);
}
var p1 = new CPerson();
 p1.show(); //谦龙 100 男
var p2 = new CPerson();
 p2.show();//谦龙 100 男
 console.log(p1.show == p2.show)//true

以上内容是关于js面向对象之常见创建对象的几种方式(工厂模式、构造函数模式、原型模式),希望大家喜欢。

Javascript 相关文章推荐
一个判断email合法性的函数[非正则]
Dec 09 Javascript
js操作CheckBoxList实现全选/反选(在客服端完成)
Feb 02 Javascript
javascript修改表格背景色实例代码分享
Dec 10 Javascript
jquery 实现input输入什么div图层显示什么
Jun 15 Javascript
学习javascript的闭包,原型,和匿名函数之旅
Oct 18 Javascript
在Javascript操作JSON对象,增加 删除 修改的简单实现
Jun 02 Javascript
jQuery页面元素动态添加后绑定事件丢失方法,非 live
Jun 16 Javascript
JS实现兼容各种浏览器的获取选择文本的方法【测试可用】
Jun 21 Javascript
Easyui的组合框的取值与赋值
Oct 28 Javascript
three.js绘制地球、飞机与轨迹的效果示例
Feb 28 Javascript
ES6新特性三: Generator(生成器)函数详解
Apr 21 Javascript
javascript设计模式 ? 模板方法模式原理与用法实例分析
Apr 23 Javascript
JS实现网页每隔3秒弹出一次对话框的方法
Nov 09 #Javascript
fastclick插件导致日期(input[type="date"])控件无法被触发该如何解决
Nov 09 #Javascript
JavaScript实现同时调用多个函数的方法
Nov 09 #Javascript
javascript实现的登陆遮罩效果汇总
Nov 09 #Javascript
jquery实现简易的移动端验证表单
Nov 08 #Javascript
jquery UI Datepicker时间控件的使用方法(终结版)
Nov 07 #Javascript
jquery UI Datepicker时间控件的使用方法(加强版)
Nov 07 #Javascript
You might like
在php MYSQL中插入当前时间
2008/04/06 PHP
php面向对象全攻略 (七) 继承性
2009/09/30 PHP
php 自写函数代码 获取关键字 去超链接
2010/02/08 PHP
浅析php变量作用域的一些问题
2013/08/08 PHP
php缩小png图片不损失透明色的解决方法
2013/12/25 PHP
php实现处理输入转义字符的代码
2015/11/08 PHP
用正则xmlHttp实现的偷(转)
2007/01/22 Javascript
JQUERY THICKBOX弹出层插件
2008/08/30 Javascript
数组方法解决JS字符串连接性能问题有争议
2011/01/12 Javascript
如何使用JS获取IE上传文件路径(IE7,8)
2013/07/08 Javascript
jQuery实现预加载图片的方法
2015/03/17 Javascript
JS实现的表格行上下移动操作示例
2016/08/03 Javascript
Vue.js动态组件解析
2016/09/09 Javascript
几种响应式文字详解
2017/05/19 Javascript
node.js操作mongodb简单示例分享
2017/05/25 Javascript
使用InstantClick.js让页面提前加载200ms
2017/09/12 Javascript
Vue v-text指令简单使用方法示例
2019/09/19 Javascript
js实现图片粘贴到网页
2019/12/06 Javascript
浅谈Vue.use到底是什么鬼
2020/01/21 Javascript
在 Django/Flask 开发服务器上使用 HTTPS
2014/07/03 Python
python实现通过shelve修改对象实例
2014/09/26 Python
Windows8下安装Python的BeautifulSoup
2015/01/22 Python
从Python的源码浅要剖析Python的内存管理
2015/04/16 Python
python操作字典类型的常用方法(推荐)
2016/05/16 Python
用python找出那些被“标记”的照片
2017/04/20 Python
Pyqt实现无边框窗口拖动以及窗口大小改变
2018/04/19 Python
CSS3基础(RGBa、text-shadow、box-shadow、border-radius)
2012/11/13 HTML / CSS
德国原装品牌香水、化妆品和手表网站:BRASTY.DE
2016/10/16 全球购物
BAILEY 44官网:美国制造的女性服装
2019/07/01 全球购物
CAT鞋加拿大官网:CAT Footwear加拿大
2020/08/05 全球购物
客服实习的个人自我鉴定
2013/10/20 职场文书
应届生财务管理求职信
2013/11/06 职场文书
30岁生日感言
2014/01/25 职场文书
微笑服务标语
2014/06/24 职场文书
合理化建议书范文
2015/09/14 职场文书
用Python爬取英雄联盟的皮肤详细示例
2021/12/06 Python