js练习3 --- 函数构造

漂流の少年

已于 2022-04-30 08:45:47 修改

阅读量445

点赞数 1

分类专栏： HTML+CSS+JavaScript 文章标签： javascript 原型模式开发语言

于 2022-04-30 08:44:46 首次发布

本文链接：https://blog.csdn.net/YINZHE__/article/details/124508193

版权

HTML+CSS+JavaScript 专栏收录该内容

35 篇文章 0 订阅

订阅专栏

第一题

请使用工厂模式、构造函数模式，原型模式和组合模式，分别创建对象student,其属性有id,name,class,age,hobbies,方法showHobbies()和addHobbies()。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title></title>
</head>
<body>
  <script>
    //工厂模式
    function createStudent(id,name,classNo,age,hobbies){
      let obj = new Object();
      obj.id = id;
      obj.name = name;
      obj.class = classNo;
      obj.age = age;
      obj.hobbies = hobbies;
      obj.showHobbies = function(){
        console.log(this.hobbies);
      };
      obj.addHobbies = function(newHobbies){
        this.hobbies = [...this.hobbies,...newHobbies];
      };
      return obj;
    }
    let student = createStudent("190350203","张三","1908013",21,["吃饭","睡觉"]);
    console.log("姓名：" + student.name + " 学号:" + student.id);
    student.showHobbies();
    student.addHobbies(["编程","看电影"]);
    student.showHobbies();

    //构造函数模式
    function Student2(id,name,classNo,age,hobbies){
      this.id = id;
      this.name = name;
      this.class = classNo;
      this.age = age;
      this.hobbies = hobbies;
      this.showHobbies = function(){
        console.log(this.hobbies);
      };
      this.addHobbies = function(newHobbies){
        this.hobbies = [...this.hobbies,...newHobbies];
      };
    }
    let student2 = new Student2("190350204","李四","1908011",20,["打游戏","听音乐"]);
    console.log("姓名：" + student2.name + " 学号:" + student2.id);
    student2.showHobbies();
    student2.addHobbies(["跑步"]);
    student2.showHobbies();

    //原型模式
    function Student3(){}
    Student3.prototype = {
      construct : Student3,
      id : "190350205",
      name : "王五",
      class : "1908012",
      hobbies : ["跳舞"],
      showHobbies: function(){
        console.log(this.hobbies);
      },
      addHobbies: function(newHobbies){
        this.hobbies = [...this.hobbies,...newHobbies];
      }
    }
    let student3 = new Student3();
    console.log("姓名：" + student3.name + " 学号:" + student3.id);
    student3.showHobbies();
    student3.addHobbies(["跑步"]);
    student3.showHobbies();

    //组合模式
    function Student4(id,name,classNo,age,hobbies){
      this.id = id;
      this.name = name;
      this.class = classNo;
      this.age = age;
      this.hobbies = hobbies;
    }
    Student4.prototype = {
      construct : Student4,
      showHobbies: function(){
        console.log(this.hobbies);
      },
      addHobbies: function(newHobbies){
        this.hobbies = [...this.hobbies,...newHobbies];
      }
    }
    let student4 = new Student4("190350206","赵六","1908013",22,["唱歌"]);
    console.log("姓名：" + student4.name + " 学号:" + student4.id);
    student4.showHobbies();
    student4.addHobbies(["跑步"]);
    student4.showHobbies();
  </script>
</body>
</html>

第二题

应用构造函数创建一个自定义对象，通过自定义对象生成指定行数、列数、宽度和高度的表格。开发步骤提示：
(1)定义构造函数Table(),首先在函数中应用this关键字初始化对象中的属性，然后可以应用prototype属性为对象添加属性和方法。
(2)创建不同的对象实例并调用对象中方法生成表格。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title></title>
</head>
<body>
  <div id="box"></div>
  <div id="box2"></div>
  <script>
    function Table(row, col, width, height) {
        this.row = row;       //行数
        this.col = col;       //列数
        this.width = width;   //宽
        this.height = height; //高
    }
    Table.prototype.generate = function() {
        let row = this.row;
        let col = this.col;
        let width = this.width;
        let height = this.height;
        let html = '<table border="1" cellspacing="0" width="' + width + '" height="' + height + '">'
        for (let i = 0; i < row; i++) {
            html += '<tr>';
            for (let j = 0; j < col; j++) {
                html += '<td></td>';
            }
            html += '</tr>';
        }
        html += "<br>"
        return html;
    }
    let box = document.getElementById('box');
    let table1 = new Table(4, 4, 200, 100);
    box.innerHTML = table1.generate();
    let box2 = document.getElementById('box2');
    let table2 = new Table(6, 5, 200, 300);
    box2.innerHTML = table2.generate();
  </script>
</body>
</html>

第三题

根据后续表格中九大行星的数据，为每个行星设计对应的属性，设计2个方法：
1.显示每个行星的数据
2.比较任意两个行星的任意两个属性之间的倍数。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title></title>
</head>
<body>
  <script>
    function Planet(name, disToSun, quality, diameter, density, numOfSatellite, revolutionPeriod) {
        this.name = name;          //行星名称
        this.disToSun = disToSun;  //距离太阳(万公里)
        this.quality = quality;    //质量(千克)
        this.diameter = diameter;  //直径(千米)
        this.density = density;    //密度(克/立方厘米)
        this.numOfSatellite = numOfSatellite;     //卫星数量
        this.revolutionPeriod = revolutionPeriod; //公转周期(地球日)
    }
    Planet.prototype.showData = function() {
        console.log("行星名称：" + this.name + "\n距离太阳(公里)："+this.disToSun + "\n质量(千克)："+this.quality
        + "\n直径(千米)：" + this.diameter + "\n密度(克/立方厘米)：" + this.density + "\n卫星数量："+this.numOfSatellite
        + "\n公转周期(地球日)："+this.revolutionPeriod+"\n");
    }
    //anotherPlanet表示要比较的另一个planet对象,attr表示要比较的属性
    Planet.prototype.compare = function(anotherPlanet, attr) {
      //先判断对象实例中有没有attr这个属性,name属性无法比较
      if(this.hasOwnProperty(attr)  && attr != "name") {
        return this[attr] / anotherPlanet[attr];
      }
      return false;
    }

    let mercury = new Planet("水星",5791*1e4,3.30e23,4880,5.427,0,87.7);
    let venus = new Planet("金星",1.08*1e8,4.869e24,12103,5.24,0,224.7);
    mercury.showData();       //显示水星数据
    venus.showData();         //显示金星数据
    console.log("水星/金星的直径之比：" + mercury.compare(venus,"diameter").toFixed(2));
    console.log("金星/水星的密度之比：" + venus.compare(mercury,"density").toFixed(2))
  </script>
</body>
</html>