Javascript oop设计模式 面向对象编程简单实例介绍
Javascriptoop设计模式面向对象编程
最初我们写js代码的时候是这么写
functioncheckName(){
//验证姓名
}
functioncheckEmail(){
//验证邮箱
}
functioncheckPassword(){
//验证密码
}
这种方式会造成全局变量的严重污染，再过渡到
varcheckObject={
checkName:function(){};
checkEmail:function(){};
checkPassword:funcion(){};
}
//也可如此写
varcheckObject={}//||function(){}
checkObject.checkName=function(){};
checkObject.checkEmail=function(){};
checkObject.checkPassword=function(){};
//以上这两种写法不能复制一份，也就是说在new方法创建新的对象的时候，新对象不能继承这些方法
以上是直接使用，而不是新建对象复制一份的,复制一份的话可以这么写
varcheckObject=function(){
return{
checkName:function(){},
checkEmail:function(){},
checkPassword:function(){}
}
}
//使用的时候可以
vara=checkObject();
a.checkName();
这么写可以实现对象的复制但是这不符合面向对象，新创建的类和checkObject没有任何关系
于是我们可以采用构造函数的方式书写代码
varcheckObject=function(){
this.checkName=function(){}
this.checkEmail=function(){}
this.checkPassword=function(){}
}
//像这样我们便可以用CheckObject来创建新的对象了,通过new来创建对象，创建出来的每个对象都会对this上的属性进行复制,但是这么做的话，每次都会有相对较大消耗，对于共有的方法，我们可以放在对象的原型上
varcheckObject=function(){};
checkObject.prototype.checkName=function(){};
//...
//这样写要将prototype书写很多遍，所以我们可以这么写,并实现链式调用，将this返回
varcheckObject=function(){};
checkObject.prototype={
checkName:function(){
//验证姓名
returnthis;
},
checkEmail:function(){
//验证邮箱
returnthis
},
checkPassword:function(){
//验证密码
returnthis;
}
}
//这两种方式不可混用，否则后边会覆盖前边，此时我们调用只需
newcheckObject().checkName().checkEmail().checkPassword();
下面再来介绍一下面向对象和面向过程两种编程方式.page10
多个function书写的方式是一种面向过程书写代码的实现方式，添加了很多全局变量而且不利于别人复用，在别人使用时你也不可修改，我们可以改用面向对象方式来重写，我们把需求抽成一个对象，这个对象称之为类，面向对象一个重要特点就是封装，将属性和方法封装在一个对象中，就像将物品放在一个旅行箱中，这样不管是使用和管理我们都方便，(虽然有时候感觉直接拿在外边摆放也很方便，但是东西一多便不利于管理)
varBook=(function(){
//静态私有变量
varbookNum=0;
//静态私有方法
functioncheckBook(){
}
//返回构造函数
returnfunction(newId,newName,newPrice){
//私有变量
varname,price;
//私有方法
functioncheckId(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)
thrownewError('oopjavascript');
//构造器实例化过程中被调用的方法
this.setName(name);
this.setPrice(price);
}
})();
Book.prototype={
//静态公有属性
isJSBook:false,
//静态公有方法
display:function(){
}
};
//对比Java别被js起的这些名字弄混了其实Js就模仿了一个New其他的跟Java基本一样类全局变量方法有自己的理解比较好以前未想明白
//java为什么那么些
//为了看起来更像一个类我们将原型上的方法写到类里边
varBook=(function(){
//静态私有变量
varbookNum=0;
//静态私有方法
functioncheckBook(){
}
//返回构造函数
function_Book(newId,newName,newPrice){
//私有变量
varname,price;
//私有方法
functioncheckId(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)
thrownewError('oopjavascript');
//构造器实例化过程中被调用的方法
this.setName(name);
this.setPrice(price);
}
_Book.prototype={
//静态公有属性
isJSBook:false,
//静态公有方法
display:function(){
}
};
return_Book;
})();
下面再介绍一种创建对象的安全模式
//注意执行newBook方法之前this.title会先执行一次
varBook=function(title){
if(thisinstanceofBook){
alert(1);
this.title=title;
}else{
returnnewBook(title);
}
};
varbook=newBook('js');
alert(book.title);
感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！