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活用事件触发对象动作
Aug 10 Javascript
JQuery上传插件Uploadify使用详解及错误处理
Apr 27 Javascript
jquery.artwl.thickbox.js  一个非常简单好用的jQuery弹出层插件
Mar 01 Javascript
无缝滚动改进版支持上下左右滚动(封装成函数)
Dec 04 Javascript
js里怎么取select标签里的值并修改
Dec 10 Javascript
基于Unit PNG Fix.js有时候在ie6下不正常的解决办法
Jun 26 Javascript
JS实现不规则TAB选项卡效果代码
Sep 16 Javascript
基于jQuery倒计时插件实现团购秒杀效果
May 13 Javascript
从重置input file标签中看jQuery的 .val() 和 .attr(“value”) 区别
Jun 12 Javascript
AngularJS指令详解及示例代码
Aug 16 Javascript
轻松理解JavaScript之AJAX
Mar 15 Javascript
详解vue beforeRouteEnter 异步获取数据给实例问题
Aug 09 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
可快速识别放射性物质-国外大神教你diy一个开放式辐射探测器
2020/03/12 无线电
做一个有下拉功能的留言版
2006/10/09 PHP
mysql中存储过程、函数的一些问题
2007/02/14 PHP
php Mysql日期和时间函数集合
2007/11/16 PHP
php通过前序遍历树实现无需递归的无限极分类
2015/07/10 PHP
thinkPHP中session()方法用法详解
2016/12/08 PHP
简单谈谈 php 文件锁
2017/02/19 PHP
PHP实现数组转JSon和JSon转数组的方法示例
2018/06/14 PHP
ext combox 下拉框不出现自动提示,自动选中的解决方法
2010/02/24 Javascript
JQuery扩展插件Validate 5添加自定义验证方法
2011/09/05 Javascript
jQuery中setTimeout的几种使用方法小结
2013/04/07 Javascript
jquery模拟实现鼠标指针停止运动事件
2016/01/12 Javascript
JavaScript制作简单的日历效果
2016/03/10 Javascript
JS组件系列之Bootstrap table表格组件神器【二、父子表和行列调序】
2016/05/10 Javascript
jQuery文本框得到与失去焦点动态改变样式效果
2016/09/08 Javascript
详解AngularJS 路由 resolve用法
2017/04/24 Javascript
详解js常用分割取字符串的方法
2019/05/15 Javascript
nodejs对项目下所有空文件夹创建gitkeep的方法
2019/08/02 NodeJs
详解JS深拷贝与浅拷贝
2020/08/04 Javascript
小程序实现密码输入框
2020/11/16 Javascript
在Python中使用SQLite的简单教程
2015/04/29 Python
Python爬虫实例爬取网站搞笑段子
2017/11/08 Python
Python迭代器定义与简单用法分析
2018/04/30 Python
Python过滤txt文件内重复内容的方法
2018/10/21 Python
Python中import导入不同目录的模块方法详解
2020/02/18 Python
python如何处理程序无法打开
2020/06/16 Python
python实现图片,视频人脸识别(opencv版)
2020/11/18 Python
Html5中的桌面通知Notification的实现
2018/09/25 HTML / CSS
HTML5 常用语法一览(列举不支持的属性)
2010/01/26 HTML / CSS
新员工试用期自我鉴定
2014/04/17 职场文书
2014光棍节大学生联谊活动方案
2014/10/10 职场文书
学校政风行风整改方案
2014/10/25 职场文书
2014年仓库管理员工作总结
2014/11/18 职场文书
民政局标准版离婚协议书
2014/12/01 职场文书
MBA推荐信怎么写
2015/03/25 职场文书
Python 数据可视化工具 Pyecharts 安装及应用
2022/04/20 Python