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

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