JavaScript类的定义以及单例实现
2016-10-06 本文已影响51人
im宇
写在前面：
这是一篇菜鸟的学习笔记，记录效果实现过程，而没有考虑安全、兼容、性等问题。供新手参考，也希望前辈们指点。
我遇到的JavaScript问题
- 全局变量的滥用，命名出现了冲突（比如flag就经常用作全局变量）
- 只会使用面向过程的写法而没有使用过JavaScript面向对象的机制
- 遇到了一些需要使用单例模式的场景，而js对单例的实现不会写
首先，先记录JavaScript中的类的定义
这是自己通过网络资料写的一段类定义代码，不知道规范定义是否也如此。那就暂且先记录下来吧，以后遇到更好的在来更新。_
需要注意的是“公布方法”引用类成员需要在前面加"this."，而“私有方法”则需在定义时引入添加参数"_this"，然后在方法里面使用该参数进行访问类成员
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JSClassDemo</title>
<script type="text/javascript">
//一个js类
function Person(){
this.name = "zji";
this.sex;
this.setName = function(name){
this.name = name;
}
this.getName = function(){
return this.name;
}
this.setSex = function(sex){
this.sex = sex;
}
//公布方法，可以随便访问类成员
this.outdoorCall = function(){
alert(this.name);
indoorCall(this);//可以调用私有方法
alert(this.getName());//可以调用公布方法
}
//私有方法,需要传递this才能访问类成员
var indoorCall = function(_this){
alert(_this.sex);
}
}
//使用该类实例
function mmdShowToast(name,sex){
var p = new Person();
p.setName(name);
p.setSex(sex);
p.outdoorCall();
//p.indoorCall();无法访问
}
</script>
</head>
<body>
<button id="send" onclick="mmdShowToast('im宇','男')">显示Toast</button>
</body>
</html>
接着，来看看单例模式的实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>JSClassDemo</title>
<script type="text/javascript">
//一个js类
function Person(){
if(Person.instance !== undefined){
return Person.instance;
}
Person.instance = this;
this.name = "zji";
this.setName = function(name){
this.name = name;
}
this.getName = function(){
return this.name;
}
}
//使用该类实例
function mmdShowToast(name,sex){
var p = new Person();
var q = new Person();
p.setName(name);
q.setName("q引用把名字改为imyu");
alert("p的name="+p.getName()+"\nq的name="+q.getName());
}
</script>
</head>
<body>
<button id="send" onclick="mmdShowToast('im宇','男')">显示Toast</button>
</body>
</html>
实际上加入单例的代码只是下面的四行：
if(Person.instance !== undefined){
return Person.instance;
}
Person.instance = this;
