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事件机制扩展插件 jquery鼠标右键事件。
Dec 26 Javascript
JS 按钮点击触发(兼容IE、火狐)
Aug 07 Javascript
jquery实现漫天雪花飞舞的圣诞祝福雪花效果代码分享
Aug 20 Javascript
利用Angularjs和原生JS分别实现动态效果的输入框
Sep 01 Javascript
Bootstrap CSS组件之导航(nav)
Dec 17 Javascript
快速解决select2在bootstrap模态框中下拉框隐藏的问题
Aug 10 Javascript
Three.js实现简单3D房间布局
Dec 30 Javascript
零基础之Node.js搭建API服务器的详解
Mar 08 Javascript
echarts大屏字体自适应的方法步骤
Jul 12 Javascript
微信小程序之左右布局的实现代码
Dec 13 Javascript
vue实现树状表格效果
Dec 29 Vue.js
一篇文章了解正则表达式的替换技巧
Feb 24 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
基于magic_quotes_gpc与magic_quotes_runtime的区别与使用介绍
2013/04/22 PHP
提高PHP编程效率的方法
2013/11/07 PHP
浅析iis7.5安装配置php环境
2015/05/10 PHP
PHP全功能无变形图片裁剪操作类与用法示例
2017/01/10 PHP
Laravel下生成验证码的类
2017/11/15 PHP
JS在IE和FF下attachEvent,addEventListener学习笔记
2009/11/26 Javascript
JavaScript如何从listbox里同时删除多个项目
2013/10/12 Javascript
js document.write()使用介绍
2014/02/21 Javascript
提升PHP安全:8个必须修改的PHP默认配置
2014/11/17 Javascript
Jquery对象和Dom对象的区别分析
2014/11/20 Javascript
jQuery 中DOM 操作详解
2015/01/13 Javascript
js淡入淡出的图片轮播效果代码分享
2015/08/24 Javascript
原生js实现autocomplete插件
2016/04/14 Javascript
Jquery ui datepicker设置日期范围,如只能隔3天【实现代码】
2016/05/04 Javascript
Bootstrap+jfinal实现省市级联下拉菜单
2016/05/30 Javascript
Google 地图叠加层实例讲解
2016/08/06 Javascript
Vue.js实现拖放效果的实例
2016/09/30 Javascript
js获取指定字符前/后的字符串简单实例
2016/10/27 Javascript
手机移动端实现 jquery和HTML5 Canvas的幸运大奖盘特效
2016/12/06 Javascript
jquery仿ps颜色拾取功能
2017/03/08 Javascript
vue项目或网页上实现文字转换成语音播放功能
2020/06/09 Javascript
React Ant Design树形表格的复杂增删改操作
2020/11/02 Javascript
[35:34]Liquid vs Winstrike 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
初学Python实用技巧两则
2014/08/29 Python
python绘制散点图并标记序号的方法
2018/12/11 Python
django的settings中设置中文支持的实现
2019/04/28 Python
Python搭建Spark分布式集群环境
2019/07/05 Python
Python中Subprocess的不同函数解析
2019/12/10 Python
Python3爬虫中Selenium的用法详解
2020/07/10 Python
python中append函数用法讲解
2020/12/11 Python
世界领先的以旅馆为主的在线预订平台:Hostelworld
2016/10/09 全球购物
金融管理应届生求职信
2014/02/20 职场文书
秋季运动会广播稿(30篇)
2014/09/13 职场文书
避暑山庄导游词
2015/02/04 职场文书
寻衅滋事罪辩护词
2015/05/21 职场文书
Java使用jmeter进行压力测试
2021/07/09 Java/Android