JS面向对象基础讲解(工厂模式、构造函数模式、原型模式、混合模式、动态原型模式)


Posted in Javascript onAugust 16, 2014

什么是面向对象?面向对象是一种思想!(废话)。

面向对象可以把程序中的关键模块都视为对象,而模块拥有属性及方法。这样我们如果把一些属性及方法封装起来,日后使用将非常方便,也可以避免繁琐重复的工作。接下来将为大家讲解在JS中面向对象的实现。

 

工厂模式

工厂模式是软件工程领域一种广为人知的设计模式,而由于在ECMAScript中无法创建类,因此用函数封装以特定接口创建对象。其实现方法非常简单,也就是在函数内创建一个对象,给对象赋予属性及方法再将对象返回即可。

function createBlog(name, url) {
  var o = new Object();
  o.name = name;
  o.url = url;
  o.sayUrl= function() {
    alert(this.url);
  }
  return o;
}

var blog1 = createBlog('wuyuchang', 'https://3water.com/');

可以看到工厂模式的实现方法非常简单,解决了创建多个相似对象的问题,但是工厂模式却无从识别对象的类型,因为全部都是Object,不像Date、Array等,因此出现了构造函数模式。

构造函数模式

ECMAScript中构造函数可以创建特定类型的对象,类似于Array、Date等原生JS的对象。其实现方法如下:

function Blog(name, url) {
  this.name = name;
  this.url = url;
  this.alertUrl = function() {
    alert(this.url);
  }
}

var blog = new Blog('wuyuchang', 'https://3water.com/');
console.log(blog instanceof Blog);  // true, 判断blog是否是Blog的实例,即解决了工厂模式中不能

这个例子与工厂模式中除了函数名不同以外,细心的童鞋应该发现许多不同之处:

函数名首写字母为大写

(虽然标准没有严格规定首写字母为大写,但按照惯例,构造函数的首写字母用大写
没有显示的创建对象
直接将属性和方法赋值给了this对象
没有return语句
使用new创建对象
能够识别对象(这正是构造函数模式胜于工厂模式的地方)

构造函数虽然好用,但也并非没有缺点,使用构造函数的最大的问题在于每次创建实例的时候都要重新创建一次方法(理论上每次创建对象的时候对象的属性均不同,而对象的方法是相同的),然而创建两次完全相同的方法是没有必要的,因此,我们可以将函数移到对象外面(也许有些童鞋已经看出缺点,嘘!)。

function Blog(name, url) {
  this.name = name;
  this.url = url;
  this.alertUrl = alertUrl;
}

function alertUrl() {
  alert(this.url);
}

var blog = new Blog('sc3water', 'http://sc.3water.com/'),
  blog2 = new Blog('3water', 'https://3water.com/');
blog.alertUrl();  // http://sc.3water.com/
blog2.alertUrl();  // https://3water.com/

我们将alertUrl设置成全局函数,这样一来blog与blog2访问的都是同一个函数,可是问题又来了,在全局作用域中定义了一个实际只想让Blog使用的函数,显示让全局作用域有些名副其实,更让人无法接受的是在全局作用域中定义了许多仅供特定对象使用的方法,浪费空间不说,显然失去了面向对象封装性了,因此可以通过原型来解决此问题。

  原型模式

我们创建的每个函数都有prototype(原型)属性,这个属性是一个指针,指向一个对象,而这个对象的用途是包含可以由特定类型的所有实例共享的属性和方法。使用原型对象的好处就是可以让所有对象实例共享它所包含的属性及方法。

function Blog() {
}

Blog.prototype.name = 'wuyuchang';
Blog.prototype.url = 'http://tools.3water.com/';
Blog.prototype.friend = ['fr1', 'fr2', 'fr3', 'fr4'];
Blog.prototype.alertInfo = function() {
  alert(this.name + this.url + this.friend );
}

// 以下为测试代码
var blog = new Blog(),
  blog2 = new Blog();
blog.alertInfo();  // wuyuchanghttp://tools.3water.com/fr1,fr2,fr3,fr4
blog2.alertInfo();  // wuyuchanghttp://tools.3water.com/fr1,fr2,fr3,fr4

blog.name = 'wyc1';
blog.url = 'http://***.com';
blog.friend.pop();
blog2.name = 'wyc2';
blog2.url = 'http://+++.com';
blog.alertInfo();  // wyc1http://***.comfr1,fr2,fr3
blog2.alertInfo();  // wyc2http://+++.comfr1,fr2,fr3

原型模式也不是没有缺点,首先,它省略了构造函数传递初始化参数这一环节,结果所有实例在默认情况下都取得了相同的属性值,这样非常不方便,但这还是不是原型的最大问题,原型模式的最大问题在于共享的本性所导致的,由于共享,因此因此一个实例修改了引用,另一个也随之更改了引用。因此我们通常不单独使用原型,而是结合原型模式与构造函数模式。

混合模式(原型模式 + 构造函数模式)

function Blog(name, url, friend) {
  this.name = name;
  this.url = url;
  this.friend = friend;
}

Blog.prototype.alertInfo = function() {
  alert(this.name + this.url + this.friend);
}

var blog = new Blog('wuyuchang', 'http://tools.3water.com/', ['fr1', 'fr2', 'fr3']),
  blog2 = new Blog('wyc', 'http://**.com', ['a', 'b']);

blog.friend.pop();
blog.alertInfo();  // wuyuchanghttp://tools.3water.com/fr1,fr2
blog2.alertInfo();  // wychttp://**.coma,b

混合模式中构造函数模式用于定义实例属性,而原型模式用于定义方法和共享属性。每个实例都会有自己的一份实例属性,但同时又共享着方法,最大限度的节省了内存。另外这种模式还支持传递初始参数。优点甚多。这种模式在ECMAScript中是使用最广泛、认同度最高的一种创建自定义对象的方法。

动态原型模式

动态原型模式将所有信息封装在了构造函数中,而通过构造函数中初始化原型(仅第一个对象实例化时初始化原型),这个可以通过判断该方法是否有效而选择是否需要初始化原型。

function Blog(name, url) {
  this.name = name;
  this.url = url;

  if (typeof this.alertInfo != 'function') {
    // 这段代码只执行了一次
    alert('exe time');
    Blog.prototype.alertInfo = function() {
      alert(thia.name + this.url);
    }
  }
}

var blog = new Blog('wuyuchang', 'http://tools.3water.com'),
  blog2 = new Blog('wyc', 'http:***.com');

可以看到上面的例子中只弹出一次窗,'exe time',即当blog初始化时,这样做blog2就不在需要初始化原型,对于使用这种模式创建对象,可以算是perfect了。

此博文参考《JavaScript高级程序设计》第3版,但语言都经过简化,例子也重写过,如果有什么不懂的地方请留言回复,作者将更新博客。

Javascript 相关文章推荐
js跑马灯代码(自写)
Apr 17 Javascript
JavaScript实现简单的数字倒计时
May 15 Javascript
Node.js中Request模块处理HTTP协议请求的基本使用教程
Mar 31 Javascript
js获取Html元素的实际宽度高度的方法
May 19 Javascript
JS实现简单表格排序操作示例
Oct 07 Javascript
Vue中使用Sortable的示例代码
Apr 07 Javascript
微信小程序自定义多选事件的实现代码
May 17 Javascript
bootstrap动态调用select下拉框的实例代码
Aug 09 Javascript
Node.js模拟发起http请求从异步转同步的5种用法
Sep 26 Javascript
关于layui表单中按钮自动提交的解决方法
Sep 09 Javascript
javascript 高级语法之继承的基本使用方法示例
Nov 11 Javascript
js实现聊天对话框
Feb 08 Javascript
Node.js安装教程和NPM包管理器使用详解
Aug 16 #Javascript
Node.js中的事件驱动编程详解
Aug 16 #Javascript
Node.js文件操作详解
Aug 16 #Javascript
Node.js中使用Buffer编码、解码二进制数据详解
Aug 16 #Javascript
Node.js中创建和管理外部进程详解
Aug 16 #Javascript
Node.js模块加载详解
Aug 16 #Javascript
JS遍历Json字符串中键值对先转成JSON对象再遍历
Aug 15 #Javascript
You might like
Zend Framework教程之视图组件Zend_View用法详解
2016/03/05 PHP
Yii2 如何在modules中添加验证码的方法
2017/06/19 PHP
XML的代替者----JSON
2007/07/21 Javascript
Mootools 1.2教程 输入过滤第一部分(数字)
2009/09/15 Javascript
jQuery.Validate 使用笔记(jQuery Validation范例 )
2010/06/25 Javascript
理解Javascript_09_Function与Object
2010/10/16 Javascript
如何用ajax来创建一个XMLHttpRequest对象
2012/12/10 Javascript
JS实现淘宝幻灯片效果的实现方法
2013/03/22 Javascript
node.js实现多图片上传实例
2014/06/03 Javascript
使用jquery.qrcode生成彩色二维码实例
2014/08/08 Javascript
javascript实现类似于新浪微博搜索框弹出效果的方法
2015/07/27 Javascript
将页面table内容与样式另存成excel文件的方法
2015/08/05 Javascript
JS实现的网页背景闪电闪烁效果代码
2015/10/17 Javascript
完美实现js选项卡切换效果(一)
2017/03/08 Javascript
BootstrapTable加载按钮功能实例代码详解
2017/09/22 Javascript
Layui表格行工具事件与数据回填方法
2019/09/13 Javascript
python基于mysql实现的简单队列以及跨进程锁实例详解
2014/07/07 Python
对于Python的框架中一些会话程序的管理
2015/04/20 Python
让Python代码更快运行的5种方法
2015/06/21 Python
python学习之matplotlib绘制散点图实例
2017/12/09 Python
Python列表(List)知识点总结
2019/02/18 Python
Python使用dict.fromkeys()快速生成一个字典示例
2019/04/24 Python
pyinstaller打包多个py文件和去除cmd黑框的方法
2019/06/21 Python
Django使用中间件解决前后端同源策略问题
2019/09/02 Python
Python倒排索引之查找包含某主题或单词的文件
2019/11/13 Python
python 实现检验33品种数据是否是正态分布
2019/12/09 Python
Python  Asyncio模块实现的生产消费者模型的方法
2021/03/01 Python
时装界的“朋克之母”:Vivienne Westwood
2017/07/06 全球购物
城市规划毕业生求职信
2013/10/10 职场文书
电子商务专业学生的自我鉴定
2013/11/28 职场文书
建筑人员岗位职责
2013/12/25 职场文书
战友聚会邀请函
2014/01/18 职场文书
工艺工程师岗位职责
2014/03/04 职场文书
保密工作承诺书
2014/08/29 职场文书
校运会新闻稿
2015/07/17 职场文书
深入理解go slice结构
2021/09/15 Golang