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和JQuery实用代码片段(一)
Apr 07 Javascript
JavaScript中的console.time()函数详细介绍
Dec 29 Javascript
javascript之with的使用(阿里云、淘宝使用代码分析)
Oct 11 Javascript
JQuery.dataTables表格插件添加跳转到指定页
Jun 09 jQuery
Node.js+Express+MySql实现用户登录注册功能
Jul 10 Javascript
layui之select的option叠加问题的解决方法
Mar 08 Javascript
JS实现十分钟倒计时代码实例
Oct 18 Javascript
教你完全理解ReentrantLock重入锁
Jun 03 Javascript
layui 解决form表单点击无反应的问题
Oct 25 Javascript
Vue 中如何将函数作为 props 传递给组件的实现代码
May 12 Javascript
vuex实现购物车的增加减少移除
Jun 28 Javascript
HTML+JS实现在线朗读器
Feb 15 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
Yii实现单用户博客系统文章详情页插入评论表单的方法
2015/12/28 PHP
PHP全局变量与超级全局变量区别分析
2016/04/01 PHP
PHP getName()函数讲解
2019/02/03 PHP
解决php扩展安装不生效问题
2019/10/25 PHP
PHP快速导出百万级数据到CSV或者EXCEL文件
2020/11/27 PHP
textContent在Firefox下与innerText等效的属性
2007/05/12 Javascript
IE8 原生JSON支持
2009/04/13 Javascript
简单时间提示DEMO从0开始一直进行计时
2013/11/19 Javascript
JS实现OCX控件的事件响应示例
2014/09/17 Javascript
使用bootstrap3开发响应式网站
2016/05/12 Javascript
Javascript农历与公历相互转换的简单实例
2016/10/09 Javascript
Angular4绑定html内容出现警告的处理方法
2017/11/03 Javascript
Element-ui table中过滤条件变更表格内容的方法
2018/03/02 Javascript
微信小程序MUI侧滑导航菜单示例(Popup弹出式,左侧滑动,右侧不动)
2019/01/23 Javascript
Vue 实现点击空白处隐藏某节点的三种方式(指令、普通、遮罩)
2019/10/23 Javascript
[02:55]2018DOTA2国际邀请赛勇士令状不朽珍藏Ⅲ饰品一览
2018/08/01 DOTA
Python六大开源框架对比
2015/10/19 Python
详解Python中最难理解的点-装饰器
2017/04/03 Python
python负载均衡的简单实现方法
2018/02/04 Python
python实现蒙特卡罗方法教程
2019/01/28 Python
Keras实现支持masking的Flatten层代码
2020/06/16 Python
HTML5单页面手势滑屏切换原理分析
2017/07/10 HTML / CSS
全球酒店比价网:HotelsCombined
2017/06/20 全球购物
在c#中using和new这两个关键字有什么意义
2013/05/19 面试题
行政助理岗位职责
2013/11/10 职场文书
学习焦裕禄精神践行三严三实心得体会
2014/10/13 职场文书
群众路线教育实践活动整改落实情况汇报
2014/10/28 职场文书
2015年12.4全国法制宣传日活动总结
2015/03/24 职场文书
2015年家长学校工作总结
2015/04/22 职场文书
员工辞职信范文大全
2015/05/12 职场文书
毕业设计致谢词
2015/05/14 职场文书
色戒观后感
2015/06/12 职场文书
学会感恩主题班会
2015/08/12 职场文书
Pytorch 如何实现常用正则化
2021/05/27 Python
Debian11 Xfce终端光标的颜色怎么设置?
2022/08/14 数码科技
浅谈css清除浮动(clearfix和clear)的用法
2023/05/21 HTML / CSS