JavaScript设计模式之构造函数模式实例教程


Posted in Javascript onJuly 02, 2018

本文实例讲述了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.3water.com/code/HtmlJsRun测试运行效果如下:

JavaScript设计模式之构造函数模式实例教程

JavaScript设计模式之构造函数模式实例教程

更多关于JavaScript相关内容可查看本站专题:《javascript面向对象入门教程》、《JavaScript切换特效与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
JavaScript高级程序设计(第3版)学习笔记6 初识js对象
Oct 11 Javascript
浅谈javascript控制HTML5的全屏操控,浏览器兼容的问题
Oct 10 Javascript
AngularJS Select(选择框)使用详解
Jan 18 Javascript
认识less和webstrom的less配置方法
Aug 02 Javascript
Javascript迭代、递推、穷举、递归常用算法实例讲解
Feb 01 Javascript
js如何获取图片url的Blob值并预览示例代码
Mar 07 Javascript
el-select数据过多懒加载的解决(loadmore)
May 29 Javascript
原生js实现随机点名功能
Nov 05 Javascript
jQuery实现简单聊天室
Feb 08 jQuery
Vue 组件复用多次自定义参数操作
Jul 27 Javascript
vue.js+element 默认提示中英文操作
Nov 11 Javascript
JavaScript实现10秒后再次获取验证码
Dec 02 Javascript
vue-router 源码实现前端路由的两种方式
Jul 02 #Javascript
React Native基础入门之调试React Native应用的一小步
Jul 02 #Javascript
vue-router 源码之实现一个简单的 vue-router
Jul 02 #Javascript
JavaScript设计模式之单例模式简单实例教程
Jul 02 #Javascript
JavaScript设计模式之建造者模式实例教程
Jul 02 #Javascript
JS实现的JSON序列化操作简单示例
Jul 02 #Javascript
JS内部事件机制之单线程原理
Jul 02 #Javascript
You might like
fleaphp下不确定的多条件查询的巧妙解决方法
2008/09/11 PHP
PHP调用MsSQL Server 2012存储过程获取多结果集(包含output参数)的详解
2013/07/03 PHP
php文件夹与文件目录操作函数介绍
2013/09/09 PHP
PHP微信公众号开发之微信红包实现方法分析
2017/07/14 PHP
JQuery扩展插件Validate 5添加自定义验证方法
2011/09/05 Javascript
基于jquery库的tab新形式使用
2012/11/16 Javascript
Extjs4中的分页应用结合前后台
2013/12/13 Javascript
JavaScript中一个奇葩的IE浏览器判断方法
2014/04/16 Javascript
jQuery 隐藏和显示 input 默认值示例
2014/06/03 Javascript
JS创建类和对象的两种不同方式
2014/08/08 Javascript
基于BootStrap Metronic开发框架经验小结【七】数据的导入、导出及附件的查看处理
2016/05/12 Javascript
JS实现动态修改table及合并单元格的方法示例
2017/02/20 Javascript
vue权限路由实现的方法示例总结
2018/07/29 Javascript
深入理解移动前端开发之viewport
2018/10/19 Javascript
编写更好的JavaScript条件式和匹配条件的技巧(小结)
2019/06/27 Javascript
vue 中 命名视图的用法实例详解
2019/08/14 Javascript
关于vue路由缓存清除在main.js中的设置
2019/11/06 Javascript
微信小程序仿抖音视频之整屏上下切换功能的实现代码
2020/05/24 Javascript
[47:42]完美世界DOTA2联赛PWL S2 GXR vs Ink 第一场 11.19
2020/11/20 DOTA
tornado框架blog模块分析与使用
2013/11/21 Python
pycham查看程序执行的时间方法
2018/11/29 Python
解决Python对齐文本字符串问题
2019/08/28 Python
python在OpenCV里实现投影变换效果
2019/08/30 Python
python logging设置level失败的解决方法
2020/02/19 Python
Flask和pyecharts实现动态数据可视化
2020/02/26 Python
Python如何使用PIL Image制作GIF图片
2020/05/16 Python
铭立家具面试题
2012/12/06 面试题
会计专业毕业生自荐信范文
2013/12/20 职场文书
创业计划书中要认真思考的问题
2013/12/28 职场文书
初中家长寄语
2014/04/02 职场文书
《花瓣飘香》教学反思
2014/04/15 职场文书
小学优秀班集体申报材料
2014/05/25 职场文书
会计专业求职信
2014/08/10 职场文书
生物工程专业求职信
2014/09/03 职场文书
2015年感恩父亲节演讲稿
2015/03/19 职场文书
Windows server 2012搭建FTP服务器
2022/04/29 Servers