javascript的原型方式建立类

最新推荐文章于 2025-09-20 12:07:14 发布

最新推荐文章于 2025-09-20 12:07:14 发布 · 127 阅读

文章标签：

#JavaScript #prototype #ViewUI

javascript 专栏收录该内容

5 篇文章

订阅专栏

本文介绍使用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();