关于JS面向对象问题总结

    小记：撰写本文参考了大量网友的JS面向对象编程心得，其中摘录了部分网友博客的代码和语录，因某些原因，这些代码和语录未注明出处，请网友们见谅，如有需要，请与作者联系（[e-mail]）,本文将标注出处！本文中所有代码均在VS2005上调试通过！

1 使用function自定义类

function在JS中是一个很特殊的对象，其特殊性表现在它的多重身份上：function既可以声明普通的函数，这一点和其他语言中的函数概念相同（比如VB中声明一个函数用Function，声明一个过程用Sub，注意VB不区分大小写，而JS区分大小写）；除此以外，function还可以用作类型的声明和实现、对象的构造函数，以及类引用等。

下面的代码演示了如何使用function定义一个类，以及使用prototype属性为自定义类添加实例方法。

 

<script type="text/javascript">

//使用function自定义"人"类及其构造函数

function Person(name,sex,age,address){ //此处function首字母小写

this.name=name; //自定义类用this关键词

this.sex=sex;

this.age=age;

this.address=address;

this.vocationDesc=function (vocation) { //在类内部定义方法

       document.write("<br />这种直接在‘类内部’定义的方法只能用【类的实例】调用，不能用【类】调用，称之为【类的实例方法】.<br />");

       document.write("<br />职业描述："+vocation+"<br />");

}

}

//使用function自定义类的另一种表达式：className = new Function( [参数1, [... 参数N,]] 类体 );此处Function首字母大写

Person.eduBackground="本科"; //为自定义类添加其它属性

Person.prototype.descript=function () { //使用prototype属性为自定义类添加其它方法

 document.write("<br />这种使用‘prototype（原型）’定义的方法只能用【类的实例】调用，不能用【类】调用，称之为【类的实例方法】.");

 var str="<br />姓名："+this.name

              +"<br />性别："+this.sex

              +"<br />年龄："+this.age

              +"<br />地址："+this.address

              +"<br />教育背景："+this.eduBackground+"<br />";

       document.write(str);

};

Person.print = function() { //在类外部定义方法

       document.write("<br />这种直接在‘类外部’定义的方法只能用【类】调用，不能用【类的实例】调用，称之为【类方法】.<br />");

}

 

var person=new Person("舒畅","女","20","北京");//新建类Person的实例person，注意JS区分大小写

person.eduBackground="硕士";

 

document.write(">>类的实例调用:person.descript();【开始】+++++++++++++<br>");

person.descript();//类的实例调用

document.write(">>类的实例调用:person.descript();【结束】+++++++++++++<br>");

 

 

document.write(">>类的实例调用:person.vocationDesc('演员');【开始】+++++++++++++<br>");

person.vocationDesc("演员"); //类的实例调用

document.write(">>类的实例调用:person.vocationDesc('演员');【结束】+++++++++++++<br>");

 

document.write(">>类调用:Person.print();【开始】--------------<br>");

Person.print();//类调用

document.write(">>类调用:Person.print();【结束】--------------<br>");

 

</script>

运行结果如下：

*注：prototype（原型）属性是JS中所有对象的固有属性。可以使用prototype属性为JS中已有对象（比如Array、Date等对象，这些已有对象可以称之为类）的原型添加功能，但这些对象不能被赋予不同的原型。然而，用户自定义的对象可以被赋给新的原型。

2 使用new Object()方法自定义类

下面的代码演示了如何使用new Object()方法自定义类：

 

<script type="text/javascript">

Student=new Object(); //创建了一个没有属性的通用对象Student，此处我们称之为类，类似我们上一目中用new Function()方法定义类.

//直接给类赋予属性

Student.name="";

Student.sex="";

Student.address="";

//直接给类赋予方法

Student.Student=function (name,sex,address) {

this.name=name;

this.sex=sex;

this.address=address;

}

Student.synopsis=function () {  //直接给类赋予方法

document.write("姓名："+this.name+"，性别："+this.sex+"，地址："+this.address+"<br>");

document.write("使用new Object()自定义类，不允许有实例，不允许用prototype属性为其定义方法！一切只能用类调用。");

}

Student.Student("舒畅","女","北京"); //类方法调用

Student.synopsis(); //类方法调用

 

}

 

</script>

运行结果如下：

3 关于JS面向对象继承问题

JS本身并没有提供继承的语法支持，但我们可以采用复制属性和对象的方法实现继承。其中我们使用for(…in…)语句遍历对象的所有属性和方法。

下面的代码演示了JS关于面向对象继承操作：

<script type="text/javascript">

function Person(){} //定义父类

//使用prototype属性为自定义类添加实例属性

Person.prototype.name="";

Person.prototype.sex="";

Person.prototype.age="";

Person.prototype.address="";

Person.prototype.eduBackground="本科";

//使用prototype属性为自定义类添加实例方法

Person.prototype.init=function(name,sex,age,address,eduBackground){

     this.name=name;

     this.age=age;

  this.sex=sex;

     this.address=address;

     this.eduBackground=eduBackground;

}

Person.prototype.descript=function () {

 var str="<br />姓名："+this.name

             +"，性别："+this.sex

             +"，年龄："+this.age

             +"，地址："+this.address

             +"，教育背景："+this.eduBackground+"<br />";

      document.write(str);

};

 

var person=new Person();//JS区分大小写

person.init("盖茨","男","55","上海","硕士");

document.write("父类操作：<br />");

document.write("<br />父类descript()操作<br />");

person.descript();

 

//********************下面实现类Worker继承类Person操作*****************

 

function Worker(){} //定义子类

//使用for(..in..)语句将父类Person的实例属性和方法复制给子类Worker

//使子类Worker继承父类Person的属性和方法

for(p in Person.prototype){

      Worker.prototype[p]=Person.prototype[p];

      //alert(Person.prototype[p]);

}

//重写Worker类的descript()方法

Worker.prototype.descript=function(){

      var str="<br />姓名："+this.name

             +"，性别："+this.sex

             +"，年龄："+this.age

             +"，地址："+this.address

             +"，教育背景："+this.eduBackground

             +"，职业：工人<br />";

      document.write(str);

  }

//新增子类的实例方法

Worker.prototype.vocationDesc=function(){

      document.write("<br />职业：工人");

}

 

var worker=new Worker();

worker.init("舒畅","女","20","北京","硕士");

document.write("<br />子类操作：<br />");

document.write("<br />子类重写父类descript()操作<br />");

worker.descript();

document.write("<br />子类新增vocationDesc()操作<br />");

worker.vocationDesc();

 

</script>

运行结果如下：

也可以使用下面的方法实现继承操作

<script language="javascript" type="text/javascript">

<!--

function superClass() {

    this.supertest = superTest; //attach method superTest

}

function subClass() {

    this.inheritFrom = superClass; //1.使用这种方法也可以实现继承

    this.inheritFrom();//2.使用这种方法也可以实现继承

    /*或者采用下面的方式

     *this.inheritFrom = superClass;

     *superClass.call(this);

 */

this.subtest = subTest; //attach method subTest

}

 

function superTest() {

    return "superTest";

}

 

function subTest() {

    return "subTest";

}

 

var newClass = new subClass();

document.write("子类方法："+newClass.subtest()+"<br />"); // yields "subTest"

document.write("子类调用父类方法："+newClass.supertest()+"<br />"); // yields "superTest"

 

</script>

运行结果如下：

 

4 关于JS面向对象多态问题

JS中多态的实现可以采用