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 相关文章推荐
动态加载js文件 document.createElement
Oct 14 Javascript
实现局部遮罩与关闭原理及代码
Feb 04 Javascript
HTML Color Picker(js拾色器效果)
Aug 27 Javascript
moment.js轻松实现获取当前日期是当年的第几周
Feb 05 Javascript
javascript中sort() 方法使用详解
Aug 30 Javascript
FullCalendar日历插件应用之数据展现(一)
Dec 23 Javascript
表单input项使用label同时引用Bootstrap库导致input点击效果区增大问题
Oct 11 Javascript
javascript 中的继承实例详解
May 05 Javascript
jquery.uploadifive插件怎么解决上传限制图片或文件大小问题
May 08 jQuery
Bootstrap组件之下拉菜单,多级菜单及按钮布局方法实例
May 25 Javascript
详解用node搭建简单的静态资源管理器
Aug 09 Javascript
使用jQuery实现掷骰子游戏
Oct 24 jQuery
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递归删除目录下的文件但保留的实例分享
2014/05/10 PHP
php+ajax实现无刷新的新闻留言系统
2020/12/21 PHP
javascript实现动态增加删除表格行(兼容IE/FF)
2007/04/02 Javascript
获取服务器传来的数据 用JS去空格的正则表达式
2012/03/26 Javascript
Javascript小技巧之生成html元素
2014/05/15 Javascript
Jquery中基本选择器用法实例详解
2015/05/18 Javascript
跟我学习javascript的var预解析与函数声明提升
2015/11/16 Javascript
angular 动态组件类型详解(四种组件类型)
2017/02/22 Javascript
nodejs基于mssql模块连接sqlserver数据库的简单封装操作示例
2018/01/05 NodeJs
vue keep-alive列表页缓存 详情页返回上一页不刷新,定位到之前位置
2019/11/26 Javascript
基于leaflet.js实现修改地图主题样式的流程分析
2020/05/15 Javascript
vant picker+popup 自定义三级联动案例
2020/11/04 Javascript
用Python操作字符串之rindex()方法的使用
2015/05/19 Python
python实现数独算法实例
2015/06/09 Python
python实现DES加密解密方法实例详解
2015/06/30 Python
Python3中条件控制、循环与函数的简易教程
2017/11/21 Python
Flask框架WTForm表单用法示例
2018/07/20 Python
python3 写一个WAV音频文件播放器的代码
2019/09/27 Python
Python爬虫爬取Bilibili弹幕过程解析
2019/10/10 Python
使用opencv将视频帧转成图片输出
2019/12/10 Python
python中的 zip函数详解及用法举例
2020/02/16 Python
python如何调用php文件中的函数详解
2020/12/29 Python
基于CSS3 animation动画属性实现轮播图效果
2017/09/12 HTML / CSS
html5桌面通知(Web Notifications)实例解析
2014/07/07 HTML / CSS
水上运动奥特莱斯:Wasterports Outlet
2018/08/08 全球购物
Glamest意大利:女性在线奢侈品零售店
2019/04/28 全球购物
莫斯科隐形眼镜网上商店:Linzi
2019/07/22 全球购物
教师个人的自我评价分享
2014/01/02 职场文书
演讲比赛获奖感言
2014/02/02 职场文书
检举信的格式及范文
2014/04/04 职场文书
刑事附带民事诉讼答辩状
2015/05/22 职场文书
欧也妮葛朗台读书笔记
2015/06/30 职场文书
校长新学期致辞
2015/07/30 职场文书
2016年万圣节活动个人总结
2016/04/05 职场文书
MySQL提升大量数据查询效率的优化神器
2022/07/07 MySQL
nginx配置指令之server_name的具体使用
2022/08/14 Servers