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背投广告代码的完善
Apr 08 Javascript
JS 日期比较大小的简单实例
Jan 13 Javascript
一款由jquery实现的整屏切换特效
Sep 15 Javascript
JavaScript严格模式详解
Nov 18 Javascript
Bootstrap精简教程中秋大放送
Sep 15 Javascript
js基础之DOM中元素对象的属性方法详解
Oct 28 Javascript
基于vue+ bootstrap实现图片上传图片展示功能
May 17 Javascript
如何解决React官方脚手架不支持Less的问题(小结)
Sep 12 Javascript
Vue项目服务器部署之子目录部署方法
May 12 Javascript
vue实现计步器功能
Nov 01 Javascript
vue使用axios实现excel文件下载的功能
Jul 16 Javascript
JS+css3实现幻灯片轮播图
Aug 14 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+SQL 注入攻击的技术实现以及预防办法
2010/12/29 PHP
PHP显示今天、今月、上月、今年的起点/终点时间戳的代码
2011/05/25 PHP
PHP+memcache实现消息队列案例分享
2014/05/21 PHP
PHP url的pathinfo模式加载不同控制器的简单实现
2016/08/12 PHP
Swoole源码中如何查询Websocket的连接问题详解
2020/08/30 PHP
jquery怎样实现ajax联动框(二)
2013/03/08 Javascript
onbeforeunload与onunload事件异同点总结
2013/06/24 Javascript
javascript中match函数的用法小结
2014/02/08 Javascript
javascipt:filter过滤介绍及使用
2014/09/10 Javascript
深入浅析jQuery对象$.html
2016/08/22 Javascript
Vue中render函数的使用方法
2018/01/31 Javascript
JS原生带缩略图的图片切换效果
2018/10/10 Javascript
node.js中ws模块创建服务端和客户端,网页WebSocket客户端
2019/03/06 Javascript
Angular中innerHTML标签的样式不起作用的原因解析
2019/06/18 Javascript
微信小程序实现签字功能
2019/12/23 Javascript
Python正则表达式的使用范例详解
2014/08/08 Python
python爬虫headers设置后无效的解决方法
2017/10/21 Python
python读取和保存视频文件
2018/04/16 Python
python实现判断一个字符串是否是合法IP地址的示例
2018/06/04 Python
python bmp转换为jpg 并删除原图的方法
2018/10/25 Python
对python 读取线的shp文件实例详解
2018/12/22 Python
wxPython窗体拆分布局基础组件
2019/11/19 Python
Python函数式编程指南:对生成器全面讲解
2019/11/19 Python
tensorflow的ckpt及pb模型持久化方式及转化详解
2020/02/12 Python
python 基于opencv操作摄像头
2020/12/24 Python
几个CSS3的flex弹性盒模型布局的简单例子演示
2016/05/12 HTML / CSS
HTML5 Web 存储详解
2016/09/16 HTML / CSS
含精油的天然有机化妆品:Indemne
2019/08/27 全球购物
男女钓鱼靴和甲板鞋:XTRATUF
2021/01/09 全球购物
法务专员岗位职责
2014/01/02 职场文书
网上蛋糕店创业计划书
2014/01/24 职场文书
社区消防工作实施方案
2014/03/21 职场文书
学生会干部自我鉴定2014
2014/09/18 职场文书
人民检察院起诉书
2015/05/20 职场文书
小学五年级班主任工作经验交流材料
2015/11/02 职场文书
网络研修随笔感言
2015/11/18 职场文书