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 相关文章推荐
用javascript实现给图片加链接
Aug 15 Javascript
用客户端js实现带省略号的分页
Apr 27 Javascript
Extjs改变树节点的勾选状态点击按钮将复选框去掉
Nov 14 Javascript
javascript禁制后退键(Backspace)实例代码
Nov 15 Javascript
简单的JS时钟实例讲解
Jan 13 Javascript
jQuery form 表单验证插件(fieldValue)校验表单
Jan 24 Javascript
纯js和css完成贪吃蛇小游戏demo
Sep 01 Javascript
利用fecha进行JS日期处理
Nov 21 Javascript
jquery删除数组中重复元素
Dec 05 Javascript
js代码延迟一定时间后执行一个函数的实例
Feb 15 Javascript
JavaScript实现快速排序的方法分析
Jan 10 Javascript
JavaScript基础之this和箭头函数详析
Sep 05 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一些有意思的小区别
2006/12/06 PHP
php导出中文内容excel文件类实例
2015/07/06 PHP
PHP数组操作类实例
2015/07/11 PHP
gearman管理工具GearmanManager的安装与php使用方法示例
2020/02/27 PHP
来自chinaz的ajax获取评论代码
2008/05/03 Javascript
JQuery1.6 使用方法三
2011/11/23 Javascript
js读写(删除)Cookie实例详解
2013/04/17 Javascript
解决html按钮切换绑定不同函数后点击时执行多次函数问题
2014/05/14 Javascript
js实现的Easy Tabs选项卡用法实例
2015/09/06 Javascript
详解javascript中原始数据类型Null和Undefined
2015/12/17 Javascript
php基于redis处理session的方法
2016/03/14 Javascript
基于javascript编写简单日历
2016/05/02 Javascript
以WordPress为例讲解jQuery美化页面Title的方法
2016/05/23 Javascript
深入理解Ajax的get和post请求
2016/06/02 Javascript
js仿手机页面文件下拉刷新效果
2016/10/14 Javascript
详解Angular-Cli中引用第三方库
2017/05/21 Javascript
vue.extend实现alert模态框弹窗组件
2018/04/28 Javascript
脚手架vue-cli工程webpack的作用和特点
2018/09/29 Javascript
jQuery实现简单QQ聊天框
2020/08/27 jQuery
浅谈python中的变量默认是什么类型
2016/09/11 Python
解决python读取几千万行的大表内存问题
2018/06/26 Python
Python直接赋值、浅拷贝与深度拷贝实例分析
2019/06/18 Python
python Gunicorn服务器使用方法详解
2019/07/22 Python
python GUI库图形界面开发之PyQt5信号与槽事件处理机制详细介绍与实例解析
2020/03/08 Python
基于django 的orm中非主键自增的实现方式
2020/05/18 Python
Django filter动态过滤与排序实现过程解析
2020/11/26 Python
python中yield的用法详解
2021/01/13 Python
python 将Excel转Word的示例
2021/03/02 Python
CSS3色彩模式有哪些?CSS3 HSL色彩模式的定义
2016/04/26 HTML / CSS
H5调用相机拍照并压缩图片的实例代码
2017/07/20 HTML / CSS
红旗团支部事迹材料
2014/01/27 职场文书
廉洁自律承诺书
2014/03/27 职场文书
《月球之谜》教学反思
2014/04/10 职场文书
电力安全学习心得体会
2016/01/18 职场文书
超级实用!五步法则,教你写好年终工作总结
2019/12/05 职场文书
Python利用zhdate模块实现农历日期处理
2022/03/31 Python