javascript 面向对象编程(工厂模式、构造函数模式、原型模式)

CreateTime--2018年3月29日17:09:38

Author:Marydon

一、工厂模式

/**
* 工厂模式
*/
function factoryFunction() {
// 1.创建一个Object对象(人)
var person = new Object();
// 或者 var person = {};
// 2.对象的属性(对应人的特征)
person.name = "Marydon";
person.qq = "2982586911";
person.website = "www.cnblogs.com/Marydon20170307";
// 3.对象的方法(对应人的行为)
person.operation = function() {
alert("正在演示工厂模式");
};
return person;
}

  调用:

factoryFunction().operation();

  适用场景:

  个人不推荐使用,因为构造函数模式完全可以取代。

二、构造函数模式

/**
* 构造函数模式
* @注意:首字母要大写,用于和普通函数区分
*/
function ConstructorFunction() {
this.name = "Marydon";
this.qq = "2982586911";
this.website = "www.cnblogs.com/Marydon20170307";
// 这个两个this指的是同一对象哦!
this.operation = function() {
alert(this.name);
}; }

  调用:

// 创建对象,对象创建后,该对象里面的this指的就是cf
var cf = new ConstructorFunction();
cf.operation();// 弹出Marydon

  适用场景:

  个人比较推荐使用

三、原型模式

/**
* 原型模式
* @注意:使用前,必须实例化
*/
function prototypeFunction() {};
prototypeFunction.prototype.name = "Marydon";
prototypeFunction.prototype.qq = "2982586911";
prototypeFunction.prototype.website = "www.cnblogs.com/Marydon20170307"; prototypeFunction.prototype.operation = function() {
alert("正在演示原型模式");
};

  调用:

// 不能这样直接调用
// prototypeFunction().operation();
// 必须得先创建这个对象
var pf = new prototypeFunction();

  适用场景:

   给已经存在的对象添加方法时使用

  比如:String对象没有trim()方法,Date对象没有format()方法,对其进行自定义封装时,需要用到。

四、还用一种经常使用

/**
* 使用JSONObject创建
*/
var jsonObjectFunction = {
name :"Marydon",
qq : "2982586911",
website : "www.cnblogs.com/Marydon20170307",
operation : function() {
alert("正在演示JSON对象");
} };

  调用:

// 直接调用
jsonObjectFunction.operation();

  适用场景:

   比较典型的就是ajax函数对象,另外,许多封装的插件也是使用的这种方式。

五、结语

   很多时候需要混合使用,最常见的是:构造函数+原型函数 模式

 

javascript 面向对象编程(工厂模式、构造函数模式、原型模式)的更多相关文章

  1. (三)Javascript面向对象编程:非构造函数的继承

    Javascript面向对象编程:非构造函数的继承   这个系列的第一部分介绍了"封装",第二部分介绍了使用构造函数实现"继承". 今天是最后一个部分,介绍不使 ...

  2. javascript面向对象系列第一篇——构造函数和原型对象

    × 目录 [1]构造函数 [2]原型对象 [3]总结 前面的话 一般地,javascript使用构造函数和原型对象来进行面向对象编程,它们的表现与其他面向对象编程语言中的类相似又不同.本文将详细介绍如 ...

  3. Javascript 面向对象编程2:构造函数的继承

    这个系列的第一部分,主要介绍了如何"封装"数据和方法,以及如何从原型对象生成实例.对象之间的"继承"的五种方法.比如,现在有一个"动物"对象 ...

  4. 转载:javascript面向对象编程:非构造函数的继承

    一.什么是"非构造函数"的继承? 比如,现在有一个对象,叫做"中国人". var Chinese = { nation:'中国' }; 还有一个对象,叫做&qu ...

  5. Javascript面向对象编程:非构造函数的继承

    今天是最后一个部分,介绍不使用构造函数实现"继承". 一.什么是"非构造函数"的继承? 比如,现在有一个对象,叫做"中国人". var Ch ...

  6. (二)Javascript面向对象编程:构造函数的继承

    Javascript面向对象编程:构造函数的继承   这个系列的第一部分,主要介绍了如何"封装"数据和方法,以及如何从原型对象生成实例. 今天要介绍的是,对象之间的"继承 ...

  7. Javascript面向对象编程(二):构造函数的继承 作者:yuan一峰

    Javascript面向对象编程(二):构造函数的继承   作者: 阮一峰 日期: 2010年5月23日 这个系列的第一部分,主要介绍了如何"封装"数据和方法,以及如何从原型对象生 ...

  8. JavaScript面向对象编程(一)原型与继承

    原型(prototype) JavaScript是通过原型(prototype)进行对象之间的继承.当一个对象A继承自另外一个对象B后,A就拥有了B中定义的属性,而B就成为了A的原型.JavaScri ...

  9. JavaScript面向对象编程(二)构造函数和类

    new关键字和构造函数 在文章JavaScript面向对象编程(一)原型与继承中讨论啦JavaScript中原型的概念,并且提到了new关键字和构造函数.利用new关键字构造对象的实例代码如下: // ...

随机推荐

  1. hdu 3586 树形dp+二分

    题目大意:给定n个敌方据点,1为司令部,其他点各有一条边相连构成一棵 树,每条边都有一个权值cost表示破坏这条边的费用,叶子节点为前线.现要切断前线和司令部的联系,每次切断边的费用不能超过上限lim ...

  2. seebug的反爬虫技术初探

    1.通过request库无法直接爬取,返回521 >>> import requests >>> req = requests.get('https://www.s ...

  3. 【洛谷】P1196 [NOI2002]银河英雄传说【带权并查集】

    P1196 [NOI2002]银河英雄传说 题目描述 公元五八○一年,地球居民迁至金牛座α第二行星,在那里发表银河联邦创立宣言,同年改元为宇宙历元年,并开始向银河系深处拓展. 宇宙历七九九年,银河系的 ...

  4. 04-RocketMQ入门及其使用(一)

    视频开始主要介绍数据库逻辑以及分表相关的设计. 关键的数据库读写分析操作---

  5. 内功心法 -- java.util.LinkedList<E> (6)

    写在前面的话:读书破万卷,编码如有神--------------------------------------------------------------------下文主要对java.util ...

  6. JDK及JRE中bin工具说明

    jre/bin工具说明:javac:Java编译器,将Java源代码换成字节代 java:Java解释器,直接从类文件执行Java应用程序代码 appletviewer(小程序浏览器):一种执行HTM ...

  7. BFC与hasLayout

    BFC与hasLayout都是CSS布局上的概念. 几个月前在微博上才了解什么是BFC,算是对布局有点初步的了解. hasLayout则是IE6.7产生许多bug的根源. 一.BFC Floats, ...

  8. Pylons Controller里面Session.commit()总是出现rollback

    Pylons Controller里面执行修改数据库表,总是不成功. 然后通过各种手段: 1.js打印返回值 2.不修改表单提交和修改表单提交,结果比较: 3.通过在Pylons Controller ...

  9. Redis 3.0版本启动时出现警告的解决办法

    原文:http://m.blog.csdn.net/article/details?id=50864933 Redis 3.0.7版本启动时出现警告的解决办法 发表于2016/3/12 12:52:4 ...

  10. DevExpress Winform 通用控件打印方法(允许可自定义边距) z

    DevExpress Winform 通用控件打印方法,包括gridcontrol,treelist,pivotGridControl,ChartControl,LayoutControl...(所有 ...