Javascript oop设计模式 面向对象编程简单实例介绍

 更新时间:2016年12月13日 11:36:00   投稿:lqh  
这篇文章主要介绍了Javascript oop设计模式 面向对象编程简单实例介绍的相关资料,这里附有实例代码帮助大家学习理解,需要的朋友可以参考下

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);

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

相关文章

  • uniapp插件uview下表单无法动态校验的问题解决

    uniapp插件uview下表单无法动态校验的问题解决

    最近项目中用到了uview 在做表单时用到了校验,发现校验不友好的结果,下面这篇文章主要给大家介绍了关于uniapp插件uview下表单无法动态校验的问题解决,需要的朋友可以参考下
    2022-12-12
  • 详解JavaScript中localStorage使用要点

    详解JavaScript中localStorage使用要点

    localStorage主要用来替代cookie,解决cookie(可参考cookie使用要点)读写困难、容量有限的问题,对js localstorage的使用相关知识感兴趣的朋友一起学习吧
    2016-01-01
  • JavaScript数组去重的六种方式

    JavaScript数组去重的六种方式

    在平时的前端开发中,常常会遇到数组去重的场景,比如表单校验重复的数据,有重复数据不让提交,或者对后端返回的数据进行去重展示等,同时它也是一道经典的前端JavaScript基础面试题,本期一起来带大家看看去重的各种花样方法,需要的朋友可以参考下
    2024-12-12
  • 浅述Javascript的外部对象

    浅述Javascript的外部对象

    本文主要对Javascript的外部对象进行介绍,列举了具体实例。便于理解。有需要的朋友可以看下
    2016-12-12
  • 判断文件是否正在被使用的JS代码

    判断文件是否正在被使用的JS代码

    这篇文章主要介绍了判断文件是否正在被使用的JS代码,有需要的朋友可以参考一下
    2013-12-12
  • JS实现控制表格只显示行边框或者只显示列边框的方法

    JS实现控制表格只显示行边框或者只显示列边框的方法

    这篇文章主要介绍了JS实现控制表格只显示行边框或者只显示列边框的方法,涉及javascript使用表格对象的rules属性的技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-03-03
  • js如何操作localstorage

    js如何操作localstorage

    这篇文章主要介绍了js如何操作localstorage,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-04-04
  • JavaScript中的迭代器和生成器详解

    JavaScript中的迭代器和生成器详解

    这篇文章主要介绍了JavaScript中的迭代器和生成器详解,本文讲解了迭代器、声明自定义迭代器、生成器:一种更好的方式来构建迭代器、生成器高级特性等内容,需要的朋友可以参考下
    2014-10-10
  • js改变html的原有内容实现方法

    js改变html的原有内容实现方法

    下面小编就为大家带来一篇js改变html的原有内容实现方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-10-10
  • JavaScript 删除或抽取字符串指定字符的方法(极为常用)

    JavaScript 删除或抽取字符串指定字符的方法(极为常用)

    这篇文章主要给大家分享了极为常用的JavaScript 删除或抽取字符串指定字符的所有方法,具有一定的参考价值,需要的小伙伴可以参考一下
    2021-12-12

最新评论