JavaScript设计模式之构造函数模式实例教程
更新时间：2018年07月02日 15:22:04 作者：CangoWu
这篇文章主要介绍了JavaScript设计模式之构造函数模式,结合实例形式分析了构造函数模式的概念、功能、定义及使用方法,需要的朋友可以参考下
本文实例讲述了JavaScript设计模式之构造函数模式。分享给大家供大家参考，具体如下：
一、构造函数模式概念
构造函数用于创建特定类型的对象——不仅声明了使用过的对象，构造函数还可以接受参数以便第一次创建对象的时候设置对象的成员值。你可以自定义自己的构造函数，然后在里面声明自定义类型对象的属性或方法。
在JavaScript里，构造函数通常是认为用来实现实例的，JavaScript没有类的概念，但是有特殊的构造函数。通过new关键字来调用自定义的构造函数，在构造函数内部，this关键字引用的是新创建的对象。
二、构造函数模式的作用和注意事项
模式作用：
1.用于创建特定类型的对象
2.第一次声明的时候给对象赋值
3.自己声明构造函数，赋予属性和方法
注意事项：
1.声明函数的时候处理业务逻辑
2.区分和单例的区别，配合单例实现初始化
3.构造函数大写字母开头
三、构造函数模式代码和实战总结
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>构造函数模式</title>
</head>
<body>
<!--<script>
function Car(model,year,miles){
if(!(this instanceof Car)){
return new Car(model,year,miles);
}
this.model = model;
this.year = year;
this.miles = miles;
this.output = function(){
return this.model + "走了" + this.miles + "公里";
}
}
var tom = new Car("大叔",2009,20000);
var dudu = Car("Dudu",2010,5000);
console.log(typeof tom);
console.log(tom.output());
console.log(typeof dudu);
console.log(dudu.output());
</script>-->
<script>
//1.用于创建特定类型的对象
//2.这样的函数名会被人笑话
//3.js开发的时候写单引号
//4.js里构造函数比较特殊的地方 new
//5.其他的语言里 比如PHP 里人家实现 有一个关键字 A class
//6.zaomen就是构造函数 他又充当了类的概念
var AA = {
zaomen:function(huawen) {
if (!(this instanceof AA.zaomen)) {
console.log(123);
return new AA.zaomen(huawen);
};
var _huawen = "普通";
if (huawen) {
_huawen = huawen;
}
this.suo = "普通";
this.huawen = _huawen;
this.create = function () {
return "【锁头】" + this.suo + "【花纹】" + this.huawen;
}
}
};
var BB = {
zaomen:function(huawen,suo) {
if (!(this instanceof BB.zaomen)) {
return new BB.zaomen(huawen,suo);
};
var _huawen = "普通";
if (huawen) {
_huawen = huawen;
}
this._suo = "普通";
if (suo) {
_suo = suo;
}
this.suo = _suo;
this.huawen = _huawen;
this.create = function () {
return "【锁头】" + this.suo + "【花纹】" + this.huawen;
}
}
};
/*function zaomen(huawen){
if(!(this instanceof zaomen)){
return new zaomen();
}
var _huawen = "普通";
if(huawen){
_huawen = huawen;
}
this.suo = "普通";
this.huawen = _huawen;
this.create = function(){
return "【锁头】" + this.suo + "【花纹】" + this.huawen;
}
}*/
var xiaozhang = AA.zaomen();
alert("xiaozhang" + xiaozhang.create());
var xiaoli = BB.zaomen("绚丽",'123');
alert("xiaoli" + xiaoli.create());
</script>
</body>
</html>
使用在线HTML/CSS/JavaScript代码运行工具 http://tools.jb51.net/code/HtmlJsRun测试运行效果如下：
更多关于JavaScript相关内容可查看本站专题：《javascript面向对象入门教程》、《JavaScript切换特效与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》
希望本文所述对大家JavaScript程序设计有所帮助。
相关文章
这篇文章主要介绍了JavaScript实现下拉菜单的显示和隐藏的相关资料，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-01-01
这篇文章主要介绍了JS实现的进制转换，浮点数相加，数字判断操作,结合实例形式分析了JavaScript数值运算、判断相关操作技巧,需要的朋友可以参考下2019-11-11
今天小编就为大家分享一篇解决layui数据表格table的横向滚动条显示问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-09-09
Javascript中return与闭包对大家来说应该都不陌生，下面本文就给大家介绍了Javascript中return的使用与闭包。文中给出了详细的示例代码，对大家的理解和学习具有一定的参考借鉴价值，感兴趣的朋友们下面来一起看看吧。2017-01-01
这篇文章主要简单介绍了javascript对象模型和function对象，以及相关的示例代码，非常实用，需要的小伙伴参考下2014-12-12
这篇文章主要为大家详细介绍了JS实现简易留言板，节点进行操作，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-03-03
单例模式也称作为单子模式，更多的也叫做单体模式。为软件设计中较为简单但是最为常用的一种设计模式。这篇文章主要介绍了Javascript实现单例模式的相关资料,需要的朋友可以参考下2016-01-01
这篇文章主要教大家学习使用Bootstrap栅格系统，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-05-05
自制的文件上传JS控件可支持IE、chrome、firefox etc
这篇文章主要介绍了自制的文件上传JS控件可支持IE、chrome、firefox etc,需要的朋友可以参考下2014-04-04
js导出table到excel，在百度可以搜索很多的方法，但是其兼容性是相当差的，本文制定了一个可以同时兼容FF和IE的方法，感兴趣的朋友可以参考下2013-09-09
最新评论