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继承的实现
Oct 24 Javascript
JavaScript中document对象使用详解
Jan 06 Javascript
jquery实现增加删除行的方法
Feb 03 Javascript
深入了解JavaScript中的Symbol的使用方法
Jul 28 Javascript
js数组常见操作及数组与字符串相互转化实例详解
Nov 10 Javascript
jQuery form插件之ajaxForm()和ajaxSubmit()的可选参数项对象
Jan 23 Javascript
JavaScript 控制字体大小设置的方法
Nov 23 Javascript
vue.js实现单选框、复选框和下拉框示例
Jul 18 Javascript
Three.js开发实现3D地图的实践过程总结
Nov 20 Javascript
JS实现的简单拖拽购物车功能示例【附源码下载】
Jan 03 Javascript
js实现多个标题吸顶效果
Jan 08 Javascript
vue Element左侧无限级菜单实现
Jun 10 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
PHP 彩色文字实现代码
2009/06/29 PHP
解析PHP中如何将数组变量写入文件
2013/06/06 PHP
浅谈ThinkPHP的URL重写
2014/11/25 PHP
浅谈php命令行用法
2015/02/04 PHP
ThinkPHP文件缓存类代码分享
2015/04/22 PHP
10条php编程小技巧
2015/07/07 PHP
用php代码限制国内IP访问我们网站
2015/09/26 PHP
JTrackBar水平拖动效果
2007/07/15 Javascript
js中格式化日期时间型数据函数代码
2010/11/08 Javascript
Jquery实现的一种常用高亮效果示例代码
2014/01/28 Javascript
JS实现网页滚动条感应鼠标变色的方法
2015/02/26 Javascript
jquery判断复选框是否被选中的方法
2015/10/16 Javascript
深入理解事件冒泡(Bubble)和事件捕捉(capture)
2016/05/28 Javascript
基于vue2.0+vuex+localStorage开发的本地记事本示例
2017/02/28 Javascript
AngularJS中table表格基本操作示例
2017/10/10 Javascript
vue使用mint-ui实现下拉刷新和无限滚动的示例代码
2017/11/06 Javascript
vue-cli3.0+element-ui上传组件el-upload的使用
2018/12/03 Javascript
深入解析koa之中间件流程控制
2019/06/17 Javascript
如何基于原生javaScript生成带图片的二维码
2019/11/21 Javascript
vue使用transition组件动画效果的实例代码
2021/01/28 Vue.js
Python3实现将文件树中所有文件和子目录归档到tar压缩文件的方法
2015/05/22 Python
Python生成任意范围任意精度的随机数方法
2018/04/09 Python
详解Python中字符串前“b”,“r”,“u”,“f”的作用
2019/12/18 Python
tensorflow 2.0模式下训练的模型转成 tf1.x 版本的pb模型实例
2020/06/22 Python
意大利奢侈品零售商:ilDuomo Novara
2019/09/11 全球购物
西班牙在线宠物食品和配件商店:bitiba
2019/10/11 全球购物
历史学专业个人的自我评价
2013/10/13 职场文书
应届生船舶驾驶求职信
2013/10/19 职场文书
探亲假请假条
2014/04/11 职场文书
商务助理求职信范文
2014/04/20 职场文书
上课玩手机的检讨书
2014/10/01 职场文书
结婚通知短信大全
2015/04/17 职场文书
健康教育主题班会
2015/08/14 职场文书
年中了,该如何写好个人述职报告?
2019/07/02 职场文书
创业计划书之牛肉汤快餐店
2019/10/08 职场文书
css3 filter属性的使用简介
2021/03/31 HTML / CSS