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

2019-11-19 18:31:56

字体：大中小

来源：转载

供稿：网友

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

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

上一篇：Bootstrap Img 图片样式(推荐)

下一篇：教大家轻松制作Bootstrap漂亮表格（table）