javascript面向对象学习

简介

在javascript 中我们最通常的做法是定义一个一个的方法(function) ，然后通过个个function 之间的调用来实现某个功能，也就是可以这样讲，function 似乎是js 中的一个最小组织单元, 我们已经熟悉了各种面向对象对象语言(java,c#..), 我们已经习惯了使用各各类来封装各个操作，让后通过各个对象之间的交互来实现某一个功能，JavaScript 是否也支持面向对象操作呢? 接下来将以demo 方式来演示javascript 面向对象的实现方式

1. 封装

我们将一个最简单的例子来演示，定义一个Student 类，有名字和年龄属性

1.1 借用已有的Object 对象实现

javascript 中有一个基本对象Object, 最简单的方式，我们可以这样定义一个类

var student = new Object();

student.name = “zhangsan”;

student.age = 23;

这个类只有两个属性name 与age ，我们可以通过student.name 来获取姓名，但定义这样的类其实劣势很明显：类的封装并不直观，有没有更好的实现方式呢？

Var Student = function(name,age){// 或function Student(name,age){..

this.name = name;

this.age = age;

}

var student = new Student('zhangsan',23);

alert(student.name);

这段代码实现的功能和上面的代码作用是一样的，但是这种方式的实现更加直观了，更加接近于我们比较熟悉的java 风格的类定义方式,this 也是javascript 中的关键字，作用和java 中的this 类似，表示指向自身的一个指针

有类属性，接下来我们就可以对这两个属性进行操作了，这时候就是方法发挥作用的时候了，定义类的方法通常也有两种方式

1.2 封装在类的内部

var Student = function(name,age){

this.name = name;

this.age = age;

this.getAge = function(){

return this.age;

};

this.setAge ＝ function(age){

this.age = age;

};

this.getName=function(){

return this.name;

};

this.setName=function(name){

this.name = name;

};

}

var student = new Student('zhangsan',23);

alert(student.getName());// 显示 zhangsan

student.setName(‘ 张三’);// 修改一下名字

alert(student.getName());// 显示修改后的名字”张三“

这个‘类’是否很熟悉，几乎和我们平时写的domain 类一模一样～而且对对象的操作也也我们操作java 对象的方式完全一至

1.3prototype 方式实现

以上方式我们采用仿java 格式的实现方式，其实javascript 中还有一个实现方式prototype

var Student = function(name,age){

this.name = name;

this.age= age;

}

Student.prototype.setName = function(name){

this.name = name;

};

Student.prototype.getName = function(){

return this.name;

};

Student.prototype.setAge = function(age){

this.age = age;

};

Student.prototype.getAge = function(){

retrn this.age;

};

2. 继承

假如现在有两个类型的学生研究生(Master) 和博士生(Doctor), 我们需要获取他们的学历信息，我们可能这样定义两个类

function Master(){

this.degree = function(){

return “Master Degree”;

}

}

function Doctor(){

this.degree = function(){

return “Doctor Degree”;

}

}

这个类里我们发现都有两个相同的方法degree, 只是显示方式不同而已，如果在java 里有这样的代码我们的做法是什么呢？这里我们还是沿用上面的例子Student ，然后在不同的子类中实现不同的逻辑

var Student = function(name,age){

this.name = name;

this.age = age;

//setter and getters

degree = function(){};// 这里我们在父类定义一个空的方法，实现留给子类

}

 

// 定义子类

Master.prototype = Student.prototype;// 将父类的方法' 复制' 到子类

var Master = function(name,age){

Student.prototype.call(this,name,age);// 调用父类的构造函数

}

Master.prototype.degree = function(){// 重写父类的方法

return “Master degree”;

};

var master = new Master('zhangsan',23);

alert(master.degree());

var student = new Student('lisi',20);

alert(student.degree());// 显示空