教你如何在Javascript中定义并使用类

发布时间:2019-12-08编辑:脚本学堂
Javascript也是一种面向对象的语言,那么如何定义并使用自己的javascript类呢,请仔细阅读本文吧,幸福的大门为你而开,呵呵。

javascript也是一种面向对象的语言,那么如何定义并使用自己的javascript类呢,请仔细阅读本文吧,幸福的大门为你而开,呵呵。

1、类的定义
  在js中定义类有很多种方式,比如工厂方式、构造函数方式、原型方式、混全的构造函数/原型方式、动态原型方式、混合工厂方式等,这里只介绍动太原形方式。

  例如,定义一个“学生”类,字段有学号和姓名,方法有用于显示学生的学号和姓名。
  

复制代码 代码如下:

  //类名
    function Student(id,name)  {
    //字段
        this._id = id;
        this._name = name;

        if(typeof Student._initialized == "undefined") {
           
        //方法
            Student.prototype.showStudent = function() {
                return  "(" + this._id + ")" + this._name;
            };
           
            Student._initialized = true;
        }
    }

2、使用自定义的类
 

复制代码 代码如下:

function btnCreate_onclick() {
        var stu1 = new Student(txtID1.value,txtName1.value);
        var stu2 = new Student(txtID2.value,txtName2.value);
        alert("Student1: " + stu1.showStudent() + "n" + "Student2: " + stu2.showStudent());

}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Define Class in javascript</title>
<script type="text/javascript">
function Student(id,name) {
this._id = id;
this._name = name;
if(typeof Student._initialized == "undefined") {
Student.prototype.showStudent = function() {
return "(" + this._id + ")" + this._name;
};
Student._initialized = true;
}
}
function btnCreate_onclick() {
var stu1 = new Student(txtID1.value,txtName1.value);
var stu2 = new Student(txtID2.value,txtName2.value);
alert("Student1: " + stu1.showStudent() + "n" + "Student2: " + stu2.showStudent());
}
</script>
</head>
<body>
<div>
ID1:
<input id="txtID1" type="text" value="0211045" /><br />
Name1:
<input id="txtName1" type="text" value="Sathon" /><br />
ID2:
<input id="txtID2" type="text" value="0211048" /><br />
Name2:
<input id="txtName2" type="text" value="Leo Wanng" /><br />
<input id="btnCreate" type="button" value="Create" onclick="return btnCreate_onclick()" />
</div>
</body>
</html>

3、直接定义一个对象
 

复制代码 代码如下:
// 创建对象
var myobj = function()
     // 元素还没创建,未能访问
     var a,b,c;
     // 私有变量
 
     // 私有函数
     var ss=function(){alert};
 
     // 公共空间
     return {
         // 公共的属性,如,要转
         // 公共方法
         init: function() {
             alert('应用程序初
        }
    };
}(); // 程序底部