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 相关文章推荐
Flash对联广告的关闭按钮讨论
Jan 30 Javascript
JS记录用户登录次数实现代码
Jan 15 Javascript
在JS数组特定索引处指定位置插入元素
Jul 27 Javascript
JavaScript中跨域调用Flash的方法
Aug 11 Javascript
javascript函数命名的三种方式及区别介绍
Mar 22 Javascript
JavaScript中split与join函数的进阶使用技巧
May 03 Javascript
jquery.Callbacks的实现详解
Nov 30 Javascript
JS正则子匹配实例分析
Dec 22 Javascript
详解Vue中过度动画效果应用
May 25 Javascript
浅谈redux以及react-redux简单实现
Aug 28 Javascript
详解关于element el-button使用$attrs的一个注意要点
Nov 09 Javascript
jQuery实现朋友圈查看图片
Sep 11 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缓存技术详细总结
2013/08/07 PHP
PHPUnit安装及使用示例
2014/10/29 PHP
PHP基于curl后台远程登录正方教务系统的方法
2016/10/14 PHP
PHP魔术方法以及关于独立实例与相连实例的全面讲解
2016/10/18 PHP
PHP+iframe图片上传实现即时刷新效果
2016/11/18 PHP
自写的利用PDO对mysql数据库增删改查操作类
2018/02/19 PHP
PHP实现打包zip并下载功能
2018/06/12 PHP
PHP实现获取ip地址的5种方法,以及插入用户登录日志操作示例
2019/02/28 PHP
js 图片轮播(5张图片)
2008/12/30 Javascript
jquery validate使用攻略 第四步
2010/07/01 Javascript
JavaScript 放大镜 移动镜片效果代码
2011/05/09 Javascript
jQuery判断密码强度实现思路及代码
2013/04/24 Javascript
获取非最后一列td值并将title设为该值的方法
2013/10/30 Javascript
jQuery中eq()方法用法实例
2015/01/05 Javascript
jQuery+css实现的时钟效果(兼容各浏览器)
2016/01/27 Javascript
jQuery回到顶部的代码
2016/07/09 Javascript
Javascript 实现简单计算器实例代码
2016/10/23 Javascript
input获取焦点时底部菜单被顶上来问题的解决办法
2017/01/24 Javascript
原生JavaScript实现Ajax异步请求
2017/11/19 Javascript
angularjs请求数据的方法示例
2019/08/06 Javascript
extjs图形绘制之饼图实现方法分析
2020/03/06 Javascript
[20:46]Ti4循环赛第三日VG vs DK
2014/07/12 DOTA
python实现对excel进行数据剔除操作实例
2017/12/07 Python
pytorch:torch.mm()和torch.matmul()的使用
2019/12/27 Python
python中的插入排序的简单用法
2021/01/19 Python
Tory Burch德国官网:美国时尚生活品牌
2018/01/03 全球购物
GUESS Factory加拿大:牛仔裤、服装及配饰
2019/09/20 全球购物
会计专业大学生职业生涯规划书
2014/02/11 职场文书
数学教师个人总结
2015/02/06 职场文书
教师自荐信范文
2015/03/06 职场文书
小学生表扬稿范文
2015/05/05 职场文书
最新农村养殖致富:资金投入较低的创业项目有哪些?
2019/09/26 职场文书
python实现过滤敏感词
2021/05/08 Python
JavaScript高级程序设计之变量与作用域
2021/11/17 Javascript
JavaCV实现照片马赛克效果
2022/01/22 Java/Android
世界十大动漫制作公司排行榜,迪士尼上榜,第二是美国代表性文化符
2022/03/18 欧美动漫