正文
Javascript oop深入学习笔记（三）--javascript中类的实现
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
一、类的实现机制
在javascript中可以使用function关键字来定义一个类。在函数内通过this指针引用的变量或则方法都会成为类的成员。
function classDemo(){
var $testProperty = "xz1024";
this.property = $testProperty;
this.method = function(){
return "this is a test method";
}
}
var $obj = new classDemo();
document.write($obj.property+"<br />");
document.write($obj.method());
在javascript中，function本身定义就是累的构造函数，来看看使用new创建对象的过程
1、当解释器遇到new操作符时边创建一个空对象。
2、开始运行classDemo这个函数，并将其中的this指针都指向这个新建的对象。
3、因为当给对象不存在的属性赋值时，解释器就会为对象创建该属性。
4、当函数执行完后，new操作符就返回初始化后的对象。
通过整个过程，javascript实现了一个简单的面向对象的机制。由此可见，在javacript中，function的定义实际上就是实现一个对象的构造器，是通过函数来完成的。当然，这种方式的缺点也很明显：
1、讲所有初始化语句、成员定义都放到一起，代码逻辑不侵袭，不易实现复杂功能。
2、每创建一个类的实例，都要执行一次构造函数，构造函数中定义的属性和方法总是被重复创建。
另一种定义机制，prototype对象，可以解决构造函数中定义类成员带来得缺点。
二、使用prototype对象定义类成员
当new一个function时，该对象的成员将自动赋予所创建的对象。
<script>
//定义一个只有一个属性testProp的类
function testClass(){
this.testProp = 1;
}
//使用函数的prototype属性给类定义新成员
testClass.prototype.showProp = function(){
document.write(this.testProp);
}
//创建一个实例
var $obj = new testClass();
//调用通过prototype原型对象定义的showProp方法
$obj.showProp();
</script>
prototype是一个javascript对象，可以为prototype对象添加、修改、删除方法和属性，从而为一个类添加成员定义。
需要注意的，原型对象的定义必须在创建类实例的语句之前，否则它将不会起作用。
prototype对象专用户设计类成员，它是和一个类紧密相关的。prototype还有一个重要属性：constructor，表示对该构造函数的引用。
<script>
function testClass(){
alert('xz1024.com');
}
//调用类的构造函数
testClass.prototype.constructor();
</script>
三、优化javascript类的设计模式
使用无类型对象的构造方法来指定prototype对象，从而实现类的成员定义：
<script>
function Person(){
console.log('这里可以做一些初始化工作..');
/*this.personName = "xz";
this.personAge = 20;*/
}
Person.prototype ={
personName : "tiger",
personAge : 18,
showInfo : function(){
document.write(this.personName + "," + this.personAge );
}
}; var $p = new Person();
$p.showInfo();
</script>
四、JS中的共有成员、私有成员和静态成员
私有成员即在类的内部实现中可以共享成员，不对外公开。Javascript并没有特殊的机制来定义私有成员，但是在JS中，一个函数内部定义的变量陈志伟局部变量，该变量不能够被此函数外的程序访问，却可以被函数内部定义的嵌套函数所访问，在JS中实现私有成员的过程中，正是利用了这一性质。
在内的构造函数中可以为类添加成员，通过这种方式定义的类成员，实际上共享了再构造函数内部定义的局部变量，这个变量就可以看作类的私有成员。
<script>
function testClass(){
var $prop = 'this is a private property'; //私有属性成员$prop
function propMethod(){ //私有方法成员propMethod
document.write($prop);
}
this.methodOne = function(){
//在公有成员中改变私有属性的值
$prop = '$prop has been changed';
};
this.methodTwo = function(){
propMethod(); //在共有成员中调用私有方法
}
} var $obj = new testClass();
$obj.methodOne(); //调用公有方法methodOne
$obj.methodTwo(); //调用公有方法methodTwo
</script>
五、Javascript类的静态成员
静态成员属于一个类的成员，它可以通过“类名.静态成员名”的方式访问。在javascript中，可以给一个函数对象直接添加成员来实现静态成员，因为函数也是一个对象，所以对象的相关操作，对函数同样适用。
<script>
function classDemo(){ //构造函数
}
classDemo.staticProperty = 'sample';
classDemo.staticMethod = function(){
document.write(classDemo.staticProperty);
}
//调用静态方法
classDemo.staticMethod();
</script>
