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 相关文章推荐
EasyUI的treegrid组件动态加载数据问题的解决办法
Dec 11 Javascript
Extjs4中的分页应用结合前后台
Dec 13 Javascript
优化javascript的执行效率一些方法总结
Dec 25 Javascript
jQuery oLoader实现的加载图片和页面效果
Mar 14 Javascript
js实现目录链接,内容跟着目录滚动显示的简单实例
Oct 15 Javascript
JS插件plupload.js实现多图上传并显示进度条
Nov 29 Javascript
原生js实现弹出层登录拖拽功能
Dec 05 Javascript
百度地图API之百度地图退拽标记点获取经纬度的实现代码
Jan 12 Javascript
微信小程序 侧滑删除(左滑删除)
May 23 Javascript
解决vue-router进行build无法正常显示路由页面的问题
Mar 06 Javascript
通过实例解析js简易模块加载器
Jun 17 Javascript
vue实现图片上传预览功能
Dec 23 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文件怎么打开 如何执行php文件
2011/12/21 PHP
thinkphp实现面包屑导航(当前位置)例子分享
2014/05/10 PHP
PHP闭包实例解析
2014/09/08 PHP
PHP实现获取文件后缀名的几种常用方法
2015/08/08 PHP
ThinkPHP进程计数类Process用法实例详解
2015/09/25 PHP
java解析json方法总结
2019/05/16 PHP
js检测客户端不是firefox则提示下载
2007/04/07 Javascript
JavaScript 学习点滴记录
2009/04/24 Javascript
跟我学习javascript的最新标准ES6
2015/11/20 Javascript
深入理解Ajax的get和post请求
2016/06/02 Javascript
javascript三种代码注释方法
2016/06/02 Javascript
js实现百度搜索提示框
2017/02/05 Javascript
JS中setTimeout和setInterval的最大延时值详解
2017/02/13 Javascript
Bootstrap实现的标签页内容切换显示效果示例
2017/05/25 Javascript
原生js获取left值和top值的三种方法
2017/08/02 Javascript
JS对象与JSON互转换、New Function()、 forEach()、DOM事件流等js开发基础小结
2017/08/10 Javascript
Angular动画实现的2种方式以及添加购物车动画实例代码
2018/08/09 Javascript
在js代码拼接dom对象到页面上的模板总结
2018/10/21 Javascript
如何在Angular8.0下使用ngx-translate进行国际化配置
2019/07/24 Javascript
node.js 微信开发之定时获取access_token
2020/02/07 Javascript
Vue axios与Go Frame后端框架的Options请求跨域问题详解
2020/03/03 Javascript
JavaScript中的全局属性与方法深入解析
2020/06/14 Javascript
Python的Django框架可适配的各种数据库介绍
2015/07/15 Python
浅谈Python 集合(set)类型的操作——并交差
2016/06/30 Python
PyQt5 QTable插入图片并动态更新的实例
2019/06/18 Python
Python中url标签使用知识点总结
2020/01/16 Python
python3.8.1+selenium实现登录滑块验证功能
2020/05/22 Python
python软件都是免费的吗
2020/06/18 Python
scrapy利用selenium爬取豆瓣阅读的全步骤
2020/09/20 Python
python 使用三引号时容易犯的小错误
2020/10/21 Python
css3实现画半圆弧线的示例代码
2017/11/06 HTML / CSS
浅谈html5与APP混合开发遇到的问题总结
2018/03/20 HTML / CSS
德国W家官网,可直邮中国的母婴商城:Windeln.de
2021/03/03 全球购物
党员四风剖析材料
2014/08/27 职场文书
2015年新教师个人工作总结
2015/10/14 职场文书
Vue操作Storage本地化存储
2022/04/29 Vue.js