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打印网页部分内容的脚本
Nov 17 Javascript
JavaScipt中的Math.ceil() 、Math.floor() 、Math.round() 三个函数的理解
Apr 29 Javascript
js获取网页高度(详细整理)
Dec 28 Javascript
jQuery去掉字符串起始和结尾的空格(多种方法实现)
Apr 01 Javascript
jquery获取元素索引值index()示例
Feb 13 Javascript
jquery让返回的内容显示在特定div里(代码少而精悍)
Jun 23 Javascript
Angularjs在初始化未完毕时出现闪烁问题的解决方法分析
Aug 05 Javascript
BootStrap日期控件在模态框中选择时间下拉菜单无效的原因及解决办法(火狐下不能点击)
Aug 18 Javascript
javascript设计模式之module(模块)模式
Aug 19 Javascript
element-ui的回调函数Events的用法详解
Oct 16 Javascript
详解vue中async-await的使用误区
Dec 05 Javascript
vue制作toast组件npm包示例代码
Oct 29 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中的实现trim函数代码
2007/03/19 PHP
php启用zlib压缩文件的配置方法
2013/06/12 PHP
摘自织梦CMS的HTTP文件下载类
2015/08/08 PHP
在WordPress中使用wp-cron插件来设置定时任务
2015/12/10 PHP
分析php://output和php://stdout的区别
2018/05/06 PHP
JavaScript 实现模态对话框 源代码大全
2009/05/02 Javascript
jQuery事件 delegate()使用方法介绍
2012/10/30 Javascript
js获得参数的getParameter使用示例
2014/02/26 Javascript
setTimeout学习小结
2017/02/08 Javascript
Vue.js递归组件构建树形菜单
2017/12/24 Javascript
React diff算法的实现示例
2018/04/20 Javascript
Angular网络请求的封装方法
2018/05/22 Javascript
Python 时间处理datetime实例
2008/09/06 Python
使用python解析xml成对应的html示例分享
2014/04/02 Python
Python开发的实用计算器完整实例
2017/05/10 Python
Python 多核并行计算的示例代码
2017/11/07 Python
python selenium自动上传有赞单号的操作方法
2018/07/05 Python
Pytorch to(device)用法
2020/01/08 Python
Python实现结构体代码实例
2020/02/10 Python
python+OpenCV实现图像拼接
2020/03/05 Python
python实现FTP循环上传文件
2020/03/20 Python
python plt可视化——打印特殊符号和制作图例代码
2020/04/17 Python
树莓派4B安装Tensorflow的方法步骤
2020/07/16 Python
利用CSS3的特性改变文本选中时的颜色
2013/09/11 HTML / CSS
手工制作的音乐盒:Music Box Attic
2019/09/05 全球购物
《两个铁球同时着地》教学反思
2014/02/13 职场文书
承诺书的格式范文
2014/03/28 职场文书
课堂打架检讨书200字
2014/11/21 职场文书
青年文明号申报材料
2014/12/23 职场文书
工作失误检讨书
2015/01/26 职场文书
河童之夏观后感
2015/06/11 职场文书
2016年领导干部正风肃纪心得体会
2015/10/09 职场文书
2019年描写人生经典诗句大全
2019/07/08 职场文书
《别在吃苦的年纪选择安逸》读后感3篇
2019/11/30 职场文书
JavaScript 定时器详情
2021/11/11 Javascript
MySQL深分页问题解决思路
2022/12/24 MySQL