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 相关文章推荐
通过身份证号得到出生日期和性别的js代码
Nov 23 Javascript
JavaScript使用IEEE 标准进行二进制浮点运算产生莫名错误的解决方法
May 28 Javascript
在linux中使用包管理器安装node.js
Mar 13 Javascript
JavaScript的RequireJS库入门指南
Jul 01 Javascript
jquery if条件语句的写法
May 19 Javascript
教你JS中的运算符乘方、开方及变量格式转换
Aug 09 Javascript
JSONP跨域请求
Mar 02 Javascript
vue打包之后生成一个配置文件修改接口的方法
Dec 09 Javascript
vue-cli3 karma单元测试的实现
Jan 18 Javascript
koa2服务端使用jwt进行鉴权及路由权限分发的流程分析
Jul 22 Javascript
vue 更改连接后台的api示例
Nov 11 Javascript
vue-cli3项目升级到vue-cli4 的方法总结
Mar 19 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教程 基本语法
2009/10/23 PHP
PHP 日志缩略名的创建函数代码
2010/05/26 PHP
深入理解PHP中的Session和Cookie
2013/06/21 PHP
PHP中FTP相关函数小结
2016/07/15 PHP
PHP whois查询类定义与用法示例
2019/04/03 PHP
thinkphp5.1 框架导入/导出excel文件操作示例
2020/05/25 PHP
jquery 页面全选框实践代码
2010/04/02 Javascript
页面调用单个swf文件,嵌套出多个方法。
2011/11/21 Javascript
JS解决url传值出现中文乱码的另类办法
2013/04/08 Javascript
js实现鼠标悬停图片上时滚动文字说明的方法
2015/02/17 Javascript
JavaScript实现图片DIV竖向滑动的方法
2015/04/25 Javascript
jQuery UI设置固定日期选择特效代码分享
2015/08/27 Javascript
基于jQuery和hwSlider实现内容左右滑动切换效果附源码下载(一)
2016/06/22 Javascript
JS仿hao123导航页面图片轮播效果
2016/09/01 Javascript
原生js仿jquery一些常用方法(必看篇)
2016/09/20 Javascript
微信小程序 火车票查询实例讲解
2016/10/17 Javascript
JavaScript 巧学巧用
2017/05/23 Javascript
JS中的事件委托实例浅析
2018/03/22 Javascript
vue实现微信浏览器左上角返回按钮拦截功能
2020/01/18 Javascript
使用 Vue-TCB 快速在 Vue 应用中接入云开发的方法
2020/02/10 Javascript
vue组件开发之tab切换组件使用详解
2020/08/21 Javascript
Python 的内置字符串方法小结
2016/03/15 Python
python 基础教程之Map使用方法
2017/01/17 Python
详谈python中冒号与逗号的区别
2018/04/18 Python
python3中函数参数的四种简单用法
2018/07/09 Python
python程序中的线程操作 concurrent模块使用详解
2019/09/23 Python
Numpy与Pytorch 矩阵操作方式
2019/12/27 Python
ubuntu 安装pyqt5和卸载pyQt5的方法
2020/03/24 Python
Python configparser模块封装及构造配置文件
2020/08/07 Python
Django自带用户认证系统使用方法解析
2020/11/12 Python
linux下进程间通信的方式
2013/01/23 面试题
小学生自我评价范例
2013/09/24 职场文书
机电一体化毕业生求职信
2013/11/02 职场文书
协议书模板
2014/04/23 职场文书
高中历史教学反思
2016/02/19 职场文书
MySql中的json_extract函数处理json字段详情
2022/06/05 MySQL