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

前端之家收集整理的这篇文章主要介绍了Javascript oop设计模式 面向对象编程简单实例介绍前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

Javascript oop设计模式 面向对象编程

最初我们写js代码的时候是这么写

function checkEmail(){
//验证邮箱
}

function checkPassword(){
//验证密码
}

这种方式会造成全局变量的严重污染,再过渡到

checkName : function(){};
checkEmail: function(){};
checkPassword: funcion(){};

}

//也可如此写
var checkObject = {} // || function(){}
checkObject.checkName = function(){};
checkObject.checkEmail = function(){};
checkObject.checkPassword = function(){};

//以上这两种写法不能复制一份,也就是说在new 方法创建新的对象的时候,新对象不能继承这些方法

以上是直接使用,而不是新建对象复制一份的,复制一份的话可以这么写

return { checkName:function(){},checkEmail:function(){},checkPassword:function(){} }

}
//使用的时候 可以

var a = checkObject();
a.checkName();

这么写可以实现对象的复制 但是这不符合面向对象,新创建的类和checkObject 没有任何关系 于是我们可以采用构造函数的方式书写代码

属性进行复制,但是这么做的话,每次都会有相对较大消耗,对于共有的方法,我们可以放在对象的原型上

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 书写的方式是一种面向过程书写代码的实现方式,添加了很多全局变量而且不利于别人复用,在别人使用时你也不可修改,我们可以改用面向对象方式来重写,我们把需求抽成一个对象,这个对象称之为类,面向对象一个重要特点就是封装,将属性方法封装在一个对象中,就像将物品放在一个旅行箱中,这样不管是使用和管理我们都方便,(虽然有时候感觉直接拿在外边摆放也很方便,但是东西一多便不利于管理)

//返回构造函数 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'); //构造器 实例化过程中被<a href="https://www.jb51.cc/tag/diaoyong/" target="_blank" class="keywords">调用</a>的<a href="https://www.jb51.cc/tag/fangfa/" target="_blank" class="keywords">方法</a> this.setName(name); this.setPrice(price); }

})();

Book.prototype = {
//静态公有属性
isJSBook: false,//静态公有方法
display: function () {
}

};
//对比Java 别被js 起的这些名字弄混了 其实Js 就模仿了一个New 其他的跟Java基本一样 类 全局变量 方法 有自己的理解比较好 以前未想明白
// java 为什么那么些

//为了看起来更像一个类 我们将原型上的方法 写到类里边

//返回构造函数 function _Book(newId,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'); //构造器 实例化过程中被<a href="https://www.jb51.cc/tag/diaoyong/" target="_blank" class="keywords">调用</a>的<a href="https://www.jb51.cc/tag/fangfa/" target="_blank" class="keywords">方法</a> this.setName(name); this.setPrice(price); } _Book.prototype = { //静态公有<a href="https://www.jb51.cc/tag/shuxing/" target="_blank" class="keywords">属性</a> isJSBook: false,//静态公有<a href="https://www.jb51.cc/tag/fangfa/" target="_blank" class="keywords">方法</a> display: function () { } }; return _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);

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

原文链接:https://www.f2er.com/js/43612.html

猜你在找的JavaScript相关文章