JavaScript设计模式之构造函数模式
2024-09-15 14:15:43
一、构造函数模式概念
构造函数用于创建特定类型的对象——不仅声明了使用过的对象,构造函数还可以接受参数以便第一次创建对象的时候设置对象的成员值。你可以自定义自己的构造函数,然后在里面声明自定义类型对象的属性或方法。
在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) {
if (!(this instanceof BB.zaomen(huawen)) {
return new BB.zaomen(huawen);
};
var _huawen = "普通";
if (huawen) {
_huawen = huawen;
}
this.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>
其他设计模式链接:
最新文章
- C站投稿189网盘视频源(UP主篇)
- Nancy之文件上传与下载
- VIEW SERVER STATE permission was denied on object 'server', database 'master'
- python学习——如何判断输入是数字
- OAF_开发系列19_实现OAF对话框提示dialogPage(案例)
- printf()输出
- VC++ 判断文件或文件夹是否存在的快捷方法 _access
- [Linux] LD_LIBRARY_PATH
- TCP/IP五层模型
- iOS-scrollview及其子类适配iOS7
- 转载 LayoutInflater的inflate函数用法详解
- 手动编译 Nginx 并安装 VeryNginx
- java IO 类库的基本架构
- Java文件上传细讲
- C# RichTextBox 滚动条 滚动到最新行
- Web 安全之 XSS 攻击与防御
- json转对象,奇怪的映射
- iOS开发-Launch Image和Launch Screen
- ROS学习(八)—— 理解ROS服务和参数
- C/C++中的位运算
热门文章
- -_-#setTimeout与setInterval
- Qt入门(17)——组装复杂的控件
- 【转】android开发中如何结束所有的activity
- (转载)PHP使用empty检查函数返回结果时报Fatal error: Can&#39;t use function return value in write context的问题
- [PHP] PHP Excel导出 以及编码问题
- C# 基础小知识之yield 关键字 语法糖
- 字符编码 ASCII,Unicode 和 UTF-8 概念扫盲
- oGitHub 注册
- POJ 1686 Lazy Math Instructor (模似题+栈的运用) 各种坑
- Codeforces 544E Remembering Strings 状压dp