javascript的原型方式建立类

今天我们讲讲用javascript的原型方式来建立javascript的类。

function Abc(){

}

Abc.prototype.attr1 = "attr1";
Abc.prototype.attr2 = "attr2";
Abc.prototype.method1 = function(){
      alert("{[attr1:"+this.attr1+",attr2:"+this.attr2+"]}");
}

var abc1 = new Abc();
abc1.attr1 = "changed attr1";
abc1.method1();

var abc2 = new Abc();
abc2.method1();

 

通过运行，我们知道对象abc1运行method1方法，弹出的是{[attr1:changed attr1,attr2:attr2]}的消息框，而abc2运行method1方法，弹出的是{[attr1:attr1.attr2:attr2]}的消息框。可以发现用javascript的纯原型方式定义的类中，类的初始化的方法体为空，且不能传递参数，原型方式创建的对象，其引用是相同的。为了解决这些问题，现在用混合方式来创建类，既属性用构造函数方式定义，方法用原型方式定义。

function Abc(attr1,attr2){
      this.attr1 = attr1;
      this.attr2 = attr2;
}

Abc.prototype.method1 = function(){
      alert("{[attr1:"+this.attr1+",attr2:"+this.attr2+"]}");
}

var abc1 = new Abc("attr1","attr2");
abc1.attr1 = "changed attr1";
abc1.method1();

var abc2 = new Abc("attr3","attr4");
abc2.method1();

 

运行后，对象abc1调用method1方法，弹出{[attr1:changed attr1,attr2:attr2]}的消息框，对象abc2调用method1方法，弹出{[attr1:attr3,attr2:attr4]}的消息框。

通过上面的javascript代码可以发现，属性和方法没有定义在构造方法中，这样可读性较差，且出错后不容易调试，那么我们下面对它改进一下，采用动态原型方式定义类。

function Abc(attr1,attr2){
      this.attr1 = attr1;
      this.attr2 = attr2;
      if(typeof Abc.flag == "undefined"){
            Abc.prototype.method1 = function(){
                  alert("{[attr1:"+this.attr1+",attr2:"+this.attr2+"]}");
            }
            Abc.flag = true;
      }
}

var abc1 = new Abc("attr1","attr2");
abc1.method1();

var abc2 = new Abc("attr3","attr4");
abc2.method1();