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 相关文章推荐
js绑定事件this指向发生改变的问题解决方法
Apr 23 Javascript
使用jQuery避免鼠标双击的解决方案
Aug 21 Javascript
jquery获取div距离窗口和父级dv的距离示例
Oct 10 Javascript
老生常谈遮罩层 滚动条的问题
Apr 29 Javascript
JavaScript选择排序算法原理与实现方法示例
Aug 06 Javascript
React 路由懒加载的几种实现方案
Oct 23 Javascript
jQuery实现数字自动增加或者减少的动画效果示例
Dec 11 jQuery
JavaScript之实现一个简单的Vue示例
Jan 17 Javascript
vue请求本地自己编写的json文件的方法
Apr 25 Javascript
微信小程序实现的绘制table表格功能示例
Apr 26 Javascript
微信小程序上传图片到php服务器的方法
May 23 Javascript
el-table-column 内容不自动换行的解决方法
Aug 14 Vue.js
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中与数组相关的函数
2007/03/22 PHP
php 中的str_replace 函数总结
2007/04/27 PHP
php strrpos()与strripos()函数
2013/08/31 PHP
Thinkphp中Create方法深入探究
2014/06/16 PHP
Smarty变量调节器失效的解决办法
2014/08/20 PHP
php函数与传递参数实例分析
2014/11/15 PHP
ExtJs的Date格式字符代码
2010/12/30 Javascript
jQuery.position()方法获取不到值的安全替换方法
2015/03/13 Javascript
JavaScript之数组(Array)详解
2015/04/01 Javascript
jquery原理以及学习技巧介绍
2015/11/11 Javascript
jQuery获取复选框被选中数量及判断选择值的方法详解
2016/05/25 Javascript
JS工作中的小贴士之”闭包“与事件委托的”阻止冒泡“
2016/06/16 Javascript
javascript中数组和字符串的方法对比
2016/07/20 Javascript
js获取页面引用的css样式表中的属性值方法(推荐)
2016/08/19 Javascript
jQuery Easyui datagrid行内实现【添加】、【编辑】、【上移】、【下移】
2016/12/19 Javascript
微信小程序实现上传图片功能
2018/05/28 Javascript
JavaScript中发出HTTP请求最常用的方法
2018/07/12 Javascript
angular2组件中定时刷新并清除定时器的实例讲解
2018/08/31 Javascript
详解如何使用koa实现socket.io官网的例子
2018/11/04 Javascript
vue filter 完美时间日期格式的代码
2019/08/14 Javascript
Vue实现导航栏的显示开关控制
2019/11/01 Javascript
vue-cli3.0实现一个多页面应用的历奇经历记录总结
2020/03/16 Javascript
javascript设计模式 ? 组合模式原理与应用实例分析
2020/04/14 Javascript
详解利用python+opencv识别图片中的圆形(霍夫变换)
2019/07/01 Python
浅谈Python里面None True False之间的区别
2020/07/09 Python
5分钟快速掌握Python定时任务框架的实现
2021/01/26 Python
Homestay中文官网:全球寄宿家庭
2018/10/18 全球购物
大学优秀班主任事迹材料
2014/05/02 职场文书
厂区绿化方案
2014/05/08 职场文书
领导干部作风整顿剖析材料
2014/10/11 职场文书
2014幼儿园家长工作总结
2014/11/10 职场文书
工程部经理岗位职责
2015/02/02 职场文书
爱心捐书倡议书
2015/04/27 职场文书
工程质量保证书
2015/05/09 职场文书
微信搭讪开场白
2015/05/28 职场文书
2016大一新生军训感言
2015/12/08 职场文书