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 相关文章推荐
Jquery 设置标题的自动翻转
Oct 03 Javascript
五个jQuery图片画廊插件 推荐
May 12 Javascript
JS子父窗口互相操作取值赋值的方法介绍
May 11 Javascript
js动态添加事件并可传参数示例代码
Oct 21 Javascript
jquery拖拽排序简单实现方法(效果增强版)
Feb 16 Javascript
Angularjs整合微信UI(weui)
Mar 15 Javascript
全面了解构造函数继承关键apply call
Jul 26 Javascript
使用JS在浏览器中判断当前网络连接状态的几种方法
May 05 Javascript
微信小程序如何获知用户运行小程序的场景教程
May 17 Javascript
Angular 4.0学习教程之架构详解
Sep 12 Javascript
微信小程序实现topBar底部选择栏效果
Jul 20 Javascript
详解Node.js异步处理的各种写法
Jun 09 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中鲜为人知的10个函数
2014/02/28 PHP
优化WordPress中文章与评论的时间显示
2016/01/12 PHP
php array_walk 对数组中的每个元素应用用户自定义函数详解
2016/11/18 PHP
php获取ajax的headers方法与内容实例
2017/12/27 PHP
Uglifyjs(JS代码优化工具)入门 安装使用
2020/04/13 Javascript
js实现两个值相加alert出来精确到指定位
2013/09/25 Javascript
为JS扩展Array.prototype.indexOf引发的问题及解决办法
2015/01/21 Javascript
有关easyui-layout中的收缩层无法显示标题的解决办法
2016/05/10 Javascript
微信小程序项目实践之主页tab选项实现
2018/07/18 Javascript
基于jquery实现九宫格拼图小游戏
2018/11/30 jQuery
通过npm或yarn自动生成vue组件的方法示例
2019/02/12 Javascript
jsonp跨域获取百度联想词的方法分析
2019/05/13 Javascript
详解async/await 异步应用的常用场景
2019/05/13 Javascript
vue滑动吸顶及锚点定位的示例代码
2020/05/10 Javascript
在Vue中使用Viser说明(基于AntV-G2可视化引擎)
2020/10/28 Javascript
[52:06]完美世界DOTA2联赛决赛日 Inki vs LBZS 第一场 11.08
2020/11/10 DOTA
[58:59]完美世界DOTA2联赛PWL S3 access vs CPG 第一场 12.13
2020/12/16 DOTA
python算法学习之计数排序实例
2013/12/18 Python
Python入门及进阶笔记 Python 内置函数小结
2014/08/09 Python
python的random模块及加权随机算法的python实现方法
2017/01/04 Python
python使用pyqt写带界面工具的示例代码
2017/10/23 Python
PyQt5每天必学之像素图控件QPixmap
2018/04/19 Python
WxPython建立批量录入框窗口
2019/02/27 Python
python安装pil库方法及代码
2019/06/25 Python
Python 中 -m 的典型用法、原理解析与发展演变
2019/11/11 Python
详解前端HTML5几种存储方式的总结
2016/12/27 HTML / CSS
浅谈HTML5 服务器推送事件(Server-sent Events)
2017/08/01 HTML / CSS
牛津在线药房:Oxford Online Pharmacy
2020/11/16 全球购物
公司市场部岗位职责
2013/12/02 职场文书
教师实习自我鉴定
2013/12/14 职场文书
重阳节演讲稿:尊敬帮助老人 弘扬传统美德
2014/09/25 职场文书
教师对照四风自我剖析材料
2014/09/30 职场文书
创业计划书之小型广告公司
2019/10/22 职场文书
win11如何查看端口是否被占用? Win11查看端口是否占用的技巧
2022/04/05 数码科技
Python中Schedule模块使用详解 周期任务神器
2022/04/19 Python
在MySQL中你成功的避开了所有索引
2022/04/20 MySQL