JavaScript设计模式之构造函数模式实例教程
程序员文章站
2022-07-23 07:59:16
本文实例讲述了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工厂模式和构造函数模式创建对象方法解析
-
JavaScript设计模式之单例模式原理与用法实例分析
-
JavaScript设计模式之构造器模式(生成器模式)定义与用法实例分析
-
JavaScript设计模式之原型模式分析【ES5与ES6】
-
前端笔记之JavaScript面向对象(三)初识ES6&underscore.js&EChart.js&设计模式&贪吃蛇开发
-
JavaScript设计模式之观察者模式(发布订阅模式)原理与实现方法示例
-
JavaScript设计模式之工厂模式和抽象工厂模式定义与用法分析
-
javascript设计模式之对象工厂函数与构造函数详解
-
JavaScript创建对象方式总结【工厂模式、构造函数模式、原型模式等】
-
JavaScript设计模式之模板方法模式原理与用法示例