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 相关文章推荐
Jquery 插件开发笔记整理
Jan 17 Javascript
有关JavaScript的10个怪癖和秘密分享
Aug 28 Javascript
javascript:void(0)的作用示例介绍
Oct 28 Javascript
JS实现的网页倒计时数字时钟效果
Mar 02 Javascript
javascript实现随机读取数组的方法
Aug 03 Javascript
Bootstrap布局之栅格系统学习笔记
May 04 Javascript
js实现股票实时刷新数据案例
May 14 Javascript
node使用UEditor富文本编辑器的方法实例
Jul 11 Javascript
JS库之Waypoints的用法详解
Sep 13 Javascript
JavaScript重复元素处理方法分析【统计个数、计算、去重复等】
Dec 14 Javascript
JS如何实现手机端输入验证码效果
May 13 Javascript
js实现点击烟花特效
Oct 14 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
php实现Linux服务器木马排查及加固功能
2014/12/29 PHP
PHP网站开发中常用的8个小技巧
2015/02/13 PHP
Yii2选项卡的简单使用
2017/05/26 PHP
结合JQ1.9通过js正则判断各种浏览器版本的方法
2013/12/30 Javascript
浅谈javascript中this在事件中的应用
2015/02/15 Javascript
XML、HTML、CSS与JS的区别整理
2016/02/18 Javascript
Vue.js实现拖放效果的实例
2016/09/30 Javascript
jQuery实现复选框的全选和反选
2017/02/02 Javascript
react-navigation 如何判断用户是否登录跳转到登录页的方法
2017/12/01 Javascript
小试SVG之新手小白入门教程
2019/01/08 Javascript
Vue实现日历小插件
2019/06/26 Javascript
vue中@change兼容问题详解
2019/10/25 Javascript
Vue 根据条件判断van-tab的显示方式
2020/08/03 Javascript
JavaScript日期库date-fn.js使用方法解析
2020/09/09 Javascript
vue二选一tab栏切换新做法实现
2021/01/19 Vue.js
在Linux命令行终端中使用python的简单方法(推荐)
2017/01/23 Python
python3.5 email实现发送邮件功能
2018/05/22 Python
Python中的单行、多行、中文注释方法
2018/07/19 Python
对Python发送带header的http请求方法详解
2019/01/02 Python
Python定义函数功能与用法实例详解
2019/04/08 Python
python统计指定目录内文件的代码行数
2019/09/19 Python
python GUI库图形界面开发之PyQt5信号与槽机制、自定义信号基础介绍
2020/02/25 Python
pycharm开发一个简单界面和通用mvc模板(操作方法图解)
2020/05/27 Python
Python list和str互转的实现示例
2020/11/16 Python
Python日志打印里logging.getLogger源码分析详解
2021/01/17 Python
CSS3中的@keyframes关键帧动画的选择器绑定
2016/06/13 HTML / CSS
New Era英国官网:美国棒球帽品牌
2018/03/21 全球购物
英国领先的露营和露营车品牌之一:OLPRO
2019/08/06 全球购物
英国屋顶用品和材料超市:Roofing Supplies UK
2019/08/24 全球购物
群众路线剖析材料
2014/02/02 职场文书
大学生优秀班干部事迹材料
2014/05/26 职场文书
学习普通话的体会
2014/11/07 职场文书
大学军训通讯稿(2016最新版)
2015/12/21 职场文书
关于企业的执行力标语大全
2020/01/06 职场文书
Nginx设置日志打印post请求参数的方法
2021/03/31 Servers
Windows server 2012 配置Telnet以及用法详解
2022/04/28 Servers