javascript 面向对象编程(工厂模式、构造函数模式、原型模式)
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 面向对象编程(工厂模式、构造函数模式、原型模式)的更多相关文章
- (三)Javascript面向对象编程:非构造函数的继承
Javascript面向对象编程:非构造函数的继承 这个系列的第一部分介绍了"封装",第二部分介绍了使用构造函数实现"继承". 今天是最后一个部分,介绍不使 ...
- javascript面向对象系列第一篇——构造函数和原型对象
× 目录 [1]构造函数 [2]原型对象 [3]总结 前面的话 一般地,javascript使用构造函数和原型对象来进行面向对象编程,它们的表现与其他面向对象编程语言中的类相似又不同.本文将详细介绍如 ...
- Javascript 面向对象编程2:构造函数的继承
这个系列的第一部分,主要介绍了如何"封装"数据和方法,以及如何从原型对象生成实例.对象之间的"继承"的五种方法.比如,现在有一个"动物"对象 ...
- 转载:javascript面向对象编程:非构造函数的继承
一.什么是"非构造函数"的继承? 比如,现在有一个对象,叫做"中国人". var Chinese = { nation:'中国' }; 还有一个对象,叫做&qu ...
- Javascript面向对象编程:非构造函数的继承
今天是最后一个部分,介绍不使用构造函数实现"继承". 一.什么是"非构造函数"的继承? 比如,现在有一个对象,叫做"中国人". var Ch ...
- (二)Javascript面向对象编程:构造函数的继承
Javascript面向对象编程:构造函数的继承 这个系列的第一部分,主要介绍了如何"封装"数据和方法,以及如何从原型对象生成实例. 今天要介绍的是,对象之间的"继承 ...
- Javascript面向对象编程(二):构造函数的继承 作者:yuan一峰
Javascript面向对象编程(二):构造函数的继承 作者: 阮一峰 日期: 2010年5月23日 这个系列的第一部分,主要介绍了如何"封装"数据和方法,以及如何从原型对象生 ...
- JavaScript面向对象编程(一)原型与继承
原型(prototype) JavaScript是通过原型(prototype)进行对象之间的继承.当一个对象A继承自另外一个对象B后,A就拥有了B中定义的属性,而B就成为了A的原型.JavaScri ...
- JavaScript面向对象编程(二)构造函数和类
new关键字和构造函数 在文章JavaScript面向对象编程(一)原型与继承中讨论啦JavaScript中原型的概念,并且提到了new关键字和构造函数.利用new关键字构造对象的实例代码如下: // ...
随机推荐
- 模拟算法+栈 HDU 1022
Train Problem I Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)T ...
- 几种OutOfMemoryError
JAVA虚拟机OutOfMemoryError主要包括以下四类:java.lang.OutOfMemoryError: Java heap spacejava.lang.OutOfMemoryErro ...
- centos 安装 redis
1. 下载地址:$ wget http://download.redis.io/releases/redis-3.0.3.tar.gz 2. 解压缩$ tar -zvxf redis-3.0.3.ta ...
- vscode 插件设置
VS Code 安装插件 prettier Beautify vscode 首选项 --> 设置 "editor.detectIndentation": false, &qu ...
- Add current boost to a USB charger
The popular USB interface can charge a portable device while transferring data. But for high-capacit ...
- Android中MVC模型(复合模式)
mvc是model,view,controller的缩写,mvc包括三个部分: 1.模型(model)对象:是应用程序的主体部分,全部的业务逻辑都应该写在该层. 2.视图(view)对象:是应用程序中 ...
- VS2017安装后如何移动 Windows Kits文件夹
MS的回答 LINK Try the following technique: Close all programs, move the “Windows Kits” folder to anothe ...
- jQuery:validate表单验证基本使用
jquery.validate是jquery的一个验证框架,可以迅速验证一些常见的输入,并且可以自己扩充自己的验证方法! 这里先从介绍简单的使用方法:jquery.validate.js下载地址 1. ...
- 38 个免费开源的 CSS 下拉导航菜单
http://www.oschina.net/news/51624/38-open-source-css-dropdown-menus
- haitaolab.com 我的新网站,欢迎访问
从博客园到csdn,再到新浪云博客,最近终于下决心购买空间和域名建立自己的独立网站! 在这里也建议希望建立自己独立博客的朋友尽快行动吧! 我的新的网站“海淘实验室”专注于介绍和分享海淘资讯,欢迎大家访 ...