Javascript oop深入学习笔记(三)--javascript中类的实现

时间:2023-01-13 14:32:19

一、类的实现机制

  在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>