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 相关文章推荐
ExtJS 学习专题(一) 如何应用ExtJS(附实例)
Mar 11 Javascript
Jquery插件之打造自定义的select标签
Nov 30 Javascript
jQuery 属性选择器element[herf*='value']使用示例
Oct 20 Javascript
封装了jQuery的Ajax请求全局配置
Feb 05 Javascript
angularjs客户端实现压缩图片文件并上传实例
Jul 06 Javascript
高性能JavaScript循环语句和条件语句
Jan 20 Javascript
使用JS在浏览器中判断当前网络连接状态的几种方法
May 05 Javascript
jQuery表单验证之密码确认
May 22 jQuery
json对象及数组键值的深度大小写转换问题详解
Mar 30 Javascript
如何编写一个d.ts文件的步骤详解
Apr 13 Javascript
js利用递归与promise 按顺序请求数据的方法
Aug 30 Javascript
koa2的中间件功能及应用示例
Mar 05 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中的加密功能
2006/10/09 PHP
修改了一个很不错的php验证码(支持中文)
2007/02/14 PHP
php文件服务实现虚拟挂载其他目录示例
2014/04/17 PHP
PHP使用ffmpeg给视频增加字幕显示的方法
2015/03/12 PHP
了解PHP的返回引用和局部静态变量
2015/06/04 PHP
PHP实现冒泡排序的简单实例
2016/05/26 PHP
PHP从数组中删除元素的四种方法实例
2017/05/12 PHP
php中钩子(hook)的原理与简单应用demo示例
2019/09/03 PHP
Eval and new funciton not the same thing
2012/12/27 Javascript
多个表单中如何获得这个文件上传的网址实现js代码
2013/03/25 Javascript
js读写(删除)Cookie实例详解
2013/04/17 Javascript
js处理json以及字符串的比较等常用操作
2013/09/08 Javascript
jQuery的one()方法用法实例
2015/01/19 Javascript
window.close(); 关闭浏览器窗口js代码的总结介绍
2016/07/14 Javascript
ES6概念 Symbol toString()方法
2016/12/25 Javascript
简单谈谈React中的路由系统
2017/07/25 Javascript
解决Vue 浏览器后退无法触发beforeRouteLeave的问题
2017/12/24 Javascript
Vue2 轮播图slide组件实例代码
2018/05/31 Javascript
Vue开发环境中修改端口号的实现方法
2019/08/15 Javascript
vue+element-ui+axios实现图片上传
2019/08/20 Javascript
js回调函数仿360开机
2019/12/26 Javascript
[07:25]DOTA2-DPC中国联赛2月5日Recap集锦
2021/03/11 DOTA
教你安装python Django(图文)
2013/11/04 Python
python3读取MySQL-Front的MYSQL密码
2017/05/03 Python
python批量替换页眉页脚实例代码
2018/01/22 Python
浅谈python爬虫使用Selenium模拟浏览器行为
2018/02/23 Python
解决PyCharm的Python.exe已经停止工作的问题
2018/11/29 Python
详解Python的循环结构知识点
2019/05/20 Python
python3将变量写入SQL语句的实现方式
2020/03/02 Python
Python如何批量获取文件夹的大小并保存
2020/03/31 Python
关于Python字符编码与二进制不得不说的一些事
2020/10/04 Python
CSS3实现任意图片lowpoly动画效果实例
2017/05/11 HTML / CSS
如何用border-image实现文字气泡边框的示例代码
2020/01/21 HTML / CSS
在购买印度民族服饰:Soch
2020/09/15 全球购物
2014年党支部书记工作总结
2014/12/04 职场文书
2015年妇女工作总结
2015/05/14 职场文书