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).

相关推荐