IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> JavaScript知识库 -> js练习3 --- 函数构造 -> 正文阅读

[JavaScript知识库]js练习3 --- 函数构造

第一题

请使用工厂模式、构造函数模式,原型模式和组合模式,分别创建对象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>
  JavaScript知识库 最新文章
ES6的相关知识点
react 函数式组件 & react其他一些总结
Vue基础超详细
前端JS也可以连点成线(Vue中运用 AntVG6)
Vue事件处理的基本使用
Vue后台项目的记录 (一)
前后端分离vue跨域,devServer配置proxy代理
TypeScript
初识vuex
vue项目安装包指令收集
上一篇文章      下一篇文章      查看所有文章
加:2022-05-03 09:22:46  更:2022-05-03 09:22:49 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁

360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年11日历 -2024/11/23 22:07:10-

图片自动播放器
↓图片自动播放器↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码