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 相关文章推荐
jquery不会自动回收xmlHttpRequest对象 导致了内存溢出
Jun 18 Javascript
可自定义速度的js图片无缝滚动示例分享
Jan 20 Javascript
javascript与有限状态机详解
May 08 Javascript
JavaScript中的toLocaleDateString()方法使用简介
Jun 12 Javascript
JS实现单击输入框弹出选择框效果完整实例
Dec 14 Javascript
轻松掌握jQuery中wrap()与unwrap()函数的用法
May 24 Javascript
Node.js检测端口(port)是否被占用的简单示例
Sep 29 Javascript
Node.js发送HTTP客户端请求并显示响应结果的方法示例
Apr 12 Javascript
JS字符串常用操作方法实例小结
Jun 24 Javascript
node省市区三级数据性能测评实例分析
Nov 06 Javascript
详解微信小程序中var、let、const用法与区别
Jan 11 Javascript
Vue 列表页带参数进详情页的操作(router-link)
Nov 13 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对字符串的递增运算分析
2010/08/08 PHP
PHP引用符&的用法详细解析
2013/08/22 PHP
PHP远程采集图片详细教程
2014/07/01 PHP
js 页面传参数时 参数值含特殊字符的问题
2009/12/13 Javascript
jQueryUI如何自定义组件实现代码
2010/11/14 Javascript
JavaScript创建类/对象的几种方式概述及实例
2013/05/06 Javascript
jQuery的one()方法用法实例
2015/01/19 Javascript
jQuery中(function($){})(jQuery)详解
2015/07/15 Javascript
jQuery实现提示密码强度的代码
2015/07/15 Javascript
纯js代码实现未知宽高的元素在指定元素中垂直水平居中显示
2015/09/12 Javascript
JS实现动态增加和删除li标签行的实例代码
2016/10/16 Javascript
浅谈js算法和流程控制
2016/12/29 Javascript
Angular.JS通过指令操作DOM的方法
2017/05/10 Javascript
React-router 4 按需加载的实现方式及原理详解
2017/05/25 Javascript
javascript获取指定区间范围随机数的方法
2017/09/08 Javascript
解决Layui数据表格中checkbox位置不居中的方法
2018/08/15 Javascript
详解如何为你的angular app构建一个第三方库
2018/12/07 Javascript
JavaScript常用事件介绍
2019/01/21 Javascript
解决antd Form 表单校验方法无响应的问题
2020/10/27 Javascript
Python文件去除注释的方法
2015/05/25 Python
Python中的TCP socket写法示例
2018/05/11 Python
关于python写入文件自动换行的问题
2018/06/23 Python
对python中if语句的真假判断实例详解
2019/02/18 Python
Python3.5 Pandas模块之Series用法实例分析
2019/04/23 Python
django搭建项目配置环境和创建表过程详解
2019/07/22 Python
Python通过递归获取目录下指定文件代码实例
2019/11/07 Python
python3 tcp的粘包现象和解决办法解析
2019/12/09 Python
Pyinstaller打包Scrapy项目的实现步骤
2020/09/22 Python
使用Python判断一个文件是否被占用的方法教程
2020/12/16 Python
Python如何实现Paramiko的二次封装
2021/01/30 Python
html5-Canvas可以在web中绘制各种图形
2012/12/26 HTML / CSS
Zavvi西班牙:电子游戏、极客服装、Blu-ray、Funko Pop等
2019/05/03 全球购物
在DELPHI中调用存储过程和使用内嵌SQL哪种方式更好
2016/11/22 面试题
社区党总支书记先进事迹材料
2014/01/24 职场文书
应届生求职信范文
2014/05/26 职场文书
统计学教授推荐信
2014/09/18 职场文书