Javascript oop设计模式 面向对象编程简单实例介绍


Posted in Javascript onDecember 13, 2016

Javascript oop设计模式 面向对象编程

最初我们写js代码的时候是这么写

function checkName(){
    //验证姓名
  }

  function checkEmail(){
    //验证邮箱
  }

  function checkPassword(){
    //验证密码
  }

这种方式会造成全局变量的严重污染,再过渡到

var checkObject = {

  checkName : function(){};
  checkEmail: function(){};
  checkPassword: funcion(){}; 

}

//也可如此写
var checkObject = {} // || function(){}
checkObject.checkName = function(){};
checkObject.checkEmail = function(){};
checkObject.checkPassword = function(){};


//以上这两种写法不能复制一份,也就是说在new 方法创建新的对象的时候,新对象不能继承这些方法

以上是直接使用,而不是新建对象复制一份的,复制一份的话可以这么写

var checkObject = function(){

    return {
      checkName:function(){},
      checkEmail:function(){},
      checkPassword:function(){}
    }
  }
//使用的时候 可以

var a = checkObject();
a.checkName();

这么写可以实现对象的复制 但是这不符合面向对象,新创建的类和checkObject 没有任何关系
于是我们可以采用构造函数的方式书写代码

var checkObject = function(){
    this.checkName = function(){}
    this.checkEmail = function(){}
    this.checkPassword = function(){}
  }
//像这样我们便可以用CheckObject 来创建新的对象了,通过new 来创建对象,创建出来的每个对象都会对this上的属性进行复制,但是这么做的话,每次都会有相对较大消耗,对于共有的方法,我们可以放在对象的原型上

var checkObject = function(){};
checkObject.prototype.checkName = function(){};
//...


//这样写要将prototype 书写很多遍 ,所以我们可以这么写,并实现链式调用,将this返回

var checkObject = function(){};
checkObject.prototype={
  checkName:function(){
    //验证姓名
    return this;
  },

  checkEmail:function(){
    //验证邮箱
    return this
  },

  checkPassword:function(){
    //验证密码
    return this;
  }  

}

// 这两种方式不可混用,否则后边会覆盖前边,此时我们调用只需

new checkObject().checkName().checkEmail().checkPassword();

下面再来介绍一下面向对象和面向过程两种编程方式 .page 10

多个function 书写的方式是一种面向过程书写代码的实现方式,添加了很多全局变量而且不利于别人复用,在别人使用时你也不可修改,我们可以改用面向对象方式来重写,我们把需求抽成一个对象,这个对象称之为类,面向对象一个重要特点就是封装,将属性和方法封装在一个对象中,就像将物品放在一个旅行箱中,这样不管是使用和管理我们都方便,(虽然有时候感觉直接拿在外边摆放也很方便,但是东西一多便不利于管理)

var Book = (function () {
    //静态私有变量
    var bookNum = 0;
    //静态私有方法
    function checkBook() {
    }

    //返回构造函数
    return function (newId, newName, newPrice) {
      //私有变量
      var name, price;
      //私有方法
      function checkId(id) {
      }
      //特权方法
      this.getPrice = function () {
      };
      this.getName = function () {
      };
      this.setName = function (name) {
        this.name = name
      };
      this.setPrice = function () {
      };
      //公有属性
      this.id = newId;
      //公有方法
      this.copy = function () {
      };
      bookNum++;
      if (bookNum > 100)
        throw new Error('oop javascript');

      //构造器 实例化过程中被调用的方法
      this.setName(name);
      this.setPrice(price);

    }
  })();

  Book.prototype = {
    //静态公有属性
    isJSBook: false,
    //静态公有方法
    display: function () {
    }

  };
  //对比Java 别被js 起的这些名字弄混了 其实Js 就模仿了一个New 其他的跟Java基本一样 类 全局变量 方法 有自己的理解比较好 以前未想明白
  // java 为什么那么些

//为了看起来更像一个类 我们将原型上的方法 写到类里边

var Book = (function () {
    //静态私有变量
    var bookNum = 0;
    //静态私有方法
    function checkBook() {
    }

    //返回构造函数
     function _Book(newId, newName, newPrice) {
      //私有变量
      var name, price;
      //私有方法
      function checkId(id) {
      }
      //特权方法
      this.getPrice = function () {
      };
      this.getName = function () {
      };
      this.setName = function (name) {
        this.name = name
      };
      this.setPrice = function () {
      };
      //公有属性
      this.id = newId;
      //公有方法
      this.copy = function () {
      };
      bookNum++;
      if (bookNum > 100)
        throw new Error('oop javascript');

      //构造器 实例化过程中被调用的方法
      this.setName(name);
      this.setPrice(price);

    }
    _Book.prototype = {
      //静态公有属性
      isJSBook: false,
      //静态公有方法
      display: function () {
      }

    };
    return _Book;
  })();

下面再介绍一种创建对象的安全模式   

//注意 执行new Book 方法之前 this.title 会先执行一次
  var Book = function (title) {
    if (this instanceof Book) {
      alert(1);
      this.title = title;
    }else{
      return new Book(title);
    }
  };

  var book = new Book('js');
  alert(book.title);

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

Javascript 相关文章推荐
javascript之bind使用介绍
Oct 09 Javascript
使用Mootools动态添加Css样式表代码,兼容各浏览器
Dec 12 Javascript
jquery弹出层类代码分享
Dec 27 Javascript
node.js中的querystring.stringify方法使用说明
Dec 10 Javascript
jquery分页插件jquery.pagination.js使用方法解析
Apr 01 Javascript
vue通过路由实现页面刷新的方法
Jan 25 Javascript
JS实现的邮箱提示补全效果示例
Jan 30 Javascript
Vue中 v-if 和v-else-if页面加载出现闪现的问题及解决方法
Oct 12 Javascript
vue-router 起步步骤详解
Mar 26 Javascript
《javascript设计模式》学习笔记七:Javascript面向对象程序设计组合模式详解
Apr 08 Javascript
vue3.0 上手体验
Sep 21 Javascript
javascript之Object.assign()的痛点分析
Mar 03 Javascript
教大家轻松制作Bootstrap漂亮表格(table)
Dec 13 #Javascript
AngularJS自定义控件实例详解
Dec 13 #Javascript
Node.js中process模块常用的属性和方法
Dec 13 #Javascript
Angular ng-repeat遍历渲染完页面后执行其他操作详细介绍
Dec 13 #Javascript
node.js 和HTML5开发本地桌面应用程序
Dec 13 #Javascript
AngularJS中$apply方法和$watch方法用法总结
Dec 13 #Javascript
vue.js学习之递归组件
Dec 13 #Javascript
You might like
PHP EOT定界符的使用详解
2008/09/30 PHP
同台服务器使用缓存APC效率高于Memcached的演示代码
2010/02/16 PHP
php 常用算法和时间复杂度
2013/07/01 PHP
使用配置类定义Codeigniter全局变量
2014/06/12 PHP
PHP面向对象五大原则之依赖倒置原则(DIP)详解
2018/04/08 PHP
Javascript 面向对象特性
2009/12/28 Javascript
制作高质量的JQuery Plugin 插件的方法
2010/04/20 Javascript
玩转jQuery按钮 请告诉我你最喜欢哪些?
2012/01/08 Javascript
js实现快速分享功能(你的文章分享工具)
2013/06/25 Javascript
jquery ajax中使用jsonp的限制解决方法
2013/11/22 Javascript
浮动的div自适应居中显示的js代码
2013/12/23 Javascript
js/jQuery简单实现选项卡功能
2014/01/02 Javascript
jquery 通过name快速取值示例
2014/01/24 Javascript
浅谈Javascript中substr和substring的区别
2015/09/30 Javascript
JavaScript中数组的合并以及排序实现示例
2015/10/24 Javascript
学习Bootstrap滚动监听 附调用方法
2016/07/02 Javascript
webpack+vue.js快速入门教程
2016/10/12 Javascript
用v-html解决Vue.js渲染中html标签不被解析的问题
2016/12/14 Javascript
JS 插件dropload下拉刷新、上拉加载使用小结
2017/04/13 Javascript
js数组去重的N种方法(小结)
2018/06/07 Javascript
Angular 利用路由跳转到指定页面的指定位置方法
2018/08/31 Javascript
小程序点击图片实现png转jpg
2019/10/22 Javascript
js实现简单贪吃蛇游戏
2020/05/15 Javascript
在vue中created、mounted等方法使用小结
2020/07/21 Javascript
RC4文件加密的python实现方法
2015/06/30 Python
python更改已存在excel文件的方法
2018/05/03 Python
python中csv文件的若干读写方法小结
2018/07/04 Python
python生成多个只含0,1元素的随机数组或列表的实例
2018/11/12 Python
python读取xlsx的方法
2018/12/25 Python
python 使用三引号时容易犯的小错误
2020/10/21 Python
Nisbets爱尔兰:英国最大的厨房和餐饮设备供应商
2019/01/26 全球购物
机械工程及自动化专业求职信
2014/09/03 职场文书
纪念九一八事变83周年国旗下讲话稿
2014/09/15 职场文书
公司领导班子四风对照检查材料
2014/09/27 职场文书
就业推荐表院系意见
2015/06/05 职场文书
python 如何做一个识别率百分百的OCR
2021/05/29 Python