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使用DeviceOne开发实战（三）仿微信应用
这篇文章主要介绍了JavaScript使用DeviceOne开发实战（三）仿微信应用的相关资料,需要的朋友可以参考下2015-12-12
这篇文章主要介绍了JavaScript中关于this指向的4种情况，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-04-04
这篇文章主要介绍了JavaScript中的new 命令，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下2019-05-05
下面小编就为大家分享一篇js 取消页面可以选中文字的功能方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-01-01
这篇文章主要介绍了JS实现的打字机效果,结合完整实例形式分析了javascript定时触发自定义函数模拟打字输出效果的相关实现技巧,需要的朋友可以参考下2016-06-06
人脸识别在现在很多地方都可以用的到,例如支付,解锁等,本文就来介绍一下小程序实现人脸识别,具有一定的参考价值,感兴趣的可以了解一下2023-10-10
这篇文章主要介绍了利用aotu.js实现微信自动添加通讯录中的联系人,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2020-05-05
JavaScript Eval 函数使用,需要的朋友可以参考下。2010-03-03
本文主要介绍了js数据存储和DOM编程的相关知识。具有很好的参考价值，下面跟着小编一起来看下吧2017-02-02
大家都知道js是不能跨域的，但我们有时候就要这么用，怎么办呢？办法总是有的.2009-09-09
最新评论