JS使用类和构造函数及回调的例子_js class 回调函数-优快云博客

该代码示例展示了如何在JavaScript中使用构造函数创建Person对象，包括设置姓名、年龄和证件号属性，并且结合回调函数来显示不同角色（教师或学生）的信息。Person类还包含一个静态方法generateID用于生成随机ID。用户点击按钮调用displayAll函数，展示班级中的一位老师和两位学生的详细信息。

<!DOCTYPE html>

<html>

<head>

    <title>展示类和构造函数的用法</title>>

<meta charset="utf-8">

<script>



//回调函数，显示信息

function showTeacherAlert(msg) {

    alert("教师信息: \n" + msg);

}

function showStudentAlert(msg) {

    alert("学生信息: \n" + msg);

}



function displayAll(){

    //构造函数

    var teacher = new Person({

                    name: "张三",

                    age: 18,

                    id:Person.generateID(8)}

                    ,showTeacherAlert

                    );

                   

    var student1 = new Person({

                    name: "李四",

                    age: 16,

                    id:Person.generateID(8)}

                    ,showStudentAlert

                    );



    var student2 = new Person({

                    name: "王五",

                    age: 15,

                    id:Person.generateID(8)}

                    ,showStudentAlert

                    );



    alert("一共1名老师和2名学生");

    teacher.print();

    student1.print();

    student2.print();

}



//自定义的构造函数，从而自定义自定义对象类型的属性和方法

function Person(info, callback){

    this.name = info.name;

    this.age = info.age;

    this.id = info.id;

    this.callback = callback;

    this.print = function() {

      var msg = "姓名:" + this.name + ", 年龄:" + this.age ;

      msg += (", 证件号:" + this.id);

      callback(msg);

    }

  }



  //静态函数，可以在任何地方调用，相对于静态函数

  Person.generateID = function(len) {

    let charSet = '0123456789';

    let ID = '';

    for(let i=0; i<len; i++) {

        let randomPoz = Math.floor(Math.random() * charSet.length);

        ID += charSet.charAt(randomPoz);

    }

    return ID;

};



</script>

</head>

<body>



<input type="button" onclick="displayAll()" value="显示班级信息" />



</body>

</html>