JavaScript中的面向对象

huanongying

2013-08-18

JavaScript是一种基于对象的语言。由于不存在class(类)的概念，所以不是真正的面向对象语言。

本文是对JavaScript中实现封装、继承等面向对象特性学习的笔记。

一、类

function SimpleDemo(param1, param2){
     this.param1 = param1;
     this.param2 = param2;
}

这是JavaScript中类的定义，与普通function不同的是，"类"以大写开头，实则是一个构造函数。

使用这个类需要使用关键字“new”

eg:

var demo = new SimpleDemo('p1', 'p2');
alert( '类的属性：1.' + demo.param1 + '，2.' + demo.param2 );

JavaScript的类中定义方法有多种方法。

1.直接在已创建的对象中定义：

demo.toString = function(){
     return 'param1:' + this.param1 + ',param2:' + this.param2;
}

缺点：只有在该对象中使用，对于其他通过new SimpleDemo()来创建的对象均不能使用该方法。

改进：

2.直接在类中定义：

function SimpleDemo(param1, param2){
     this.param1 = this.param1;
     this.param2 = this.param2;
     this.toString = function(){          //注意定义的方法有返回值的话，toString后不能加"()"，加了就不能有返回值。
          return '参数1：' + this.param1 + '，参数2：' + this.param2;
     }
}

可直接调用：alert(new SimpleDemo('apple', 'orange').toString());

同理，可以通过这种方式定义多个方法。

缺点：类中若定义多个方法，则每次产生一个对象的时候都会将所有代码复制一遍，显然不是最优雅的解决办法。

改进：

3.使用函数的prototype对象

关于prototype对象：所有函数都包含一个prototype的属性，这个属性指向一个prototype对象。

//关于prototype对象的详细描述敬请期待

function SimpleDemo(param1, param2){
     this.param1 = param1;
     this.param2 = param2;
}
SimpleDemo.prototype.toString = function(){
     return '参数1：' + this.param1 + ', 参数2：' + this.param2;
}
window.onload = function(){
    alert(new SimpleDemo('apple', 'orange').toString());
}

或同时定义多个方法：

SimpleDemo.prototype = {
     toString : function(){
          return '参数1：' + this.param1 + '，参数2：' + this.param2;
     },
     sayHello : function(){
          return 'Hello World!!';
     }
}

二、静态类

var sDemo = function(){};
sDemo.name = 'static class';
sDemo.discription = 'This is a static class demo';
sDemo.distance = 0;
sDemo.forward = function(){
     this.distance++;
}
sDemo.forward = function(){
    this.distance--;
}
window.onload = function(){
          alert(sDemo.distance);      //结果为["0"]
          sDemo.forward();
          sDemo.forward();
          sDemo.backward();
          alert(sDemo.distance);      //结果为["2"]
}

因为是静态类，所以没有必要使用prototype对象。用了也会报错。

三、继承

使用apply方法来继承父类成员，使用for/in循环来继承父类prototype对象的方法。

function People(){
          this.type = 'human';
}
People.prototype = {
          getType : function(){
                    return 'this is a mankind';
          },
          getActions : function(){
                    return 'talk/walk/hear/smell.etc';
          }
}

function Student(name, sex, age){
          People.apply(this, arguments);
          for(var index in People.prototype){          //JavaScript中的for循环使用用来遍历数组，此处为for/in循环，用来遍历对象的属性成员
                    var proto = this.constructor.prototype;
                    if(!proto[index]){     //当前类的prototype继承父类的prototype
                              proto[index] = People.prototype[index];
                    }
                    proto[index]['super'] = People.prototype;      //???
          }
          this.name = name;
          this.sex = sex;
          this.age = age;
}

window.onload = function(){
          var s1 = new Student('Hungry', 'male', 14);
          alert(s1.getType());      //结果为["this is a mankind"]
          alert(s1.getActions());
}

参考资料：

1.HTML5 Canvas 游戏开发实战, by 张路斌, 机械出版社, 2013年4月

2.JavaScript:The Definitive Guide, by David Flanagan(O'Reilly).

javascript 面向对象