zoukankan      html  css  js  c++  java
  • 面向对象第四天

       总感觉今天的学习效率不高,好多东西都不知道,像傻了一样。总结了一下今天的知识点,都是很琐碎的东西,为了以后还是决定记录一下。

       一、上次课知识点补充

           1.delete

             可以删除对象的指定属性。  注意:在操作DOM对象时,只能删除通过"."或"[]"方式添加的自定义属性。

          2.arguments

            伪数组对象,用来存储实参。

            arguments.callee:返回正在执行的函数

            arguments.length:返回实参的个数

           用途:可以用在不定项形参个数的函数实现。

       二、新知识点

         1. 构造函数的执行过程

            (1) 先创建一个空对象;(2)将构造函数的作用域 交给 上述对象 || this -> 空对象;(3) 开始执行构造函数内部代码;(4) return this;

                   注意:在构造函数中,如果显式 返回一个 基本数据类型 数据 会被忽略掉。当然返回对象就不会。

         2. 表格案例

    <!DOCTYPE html>

    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>表格</title>
    <link rel="stylesheet" href="table.css">
    </head>
    <body>
    <div id="userList"></div>
    <script>
    /*
    1. 实现一个对象来创建表格
    2. 通过 组合方式创建对象
    3. 表格的头 (可配置 宽 显示文本 对齐方式 列显示的顺序)
    4. 给Table构造函数 定义形参,对象--内部的属性 为表格的配置项
    5. 实现renderHead方法
    6. 实现renderBody方法
    7. 实现draw方法
    */
    // 1
    function Table(config) {
    // 用户配置信息 存储到 Table对象上 ==》this
    // 过滤无效参数
    if (!config || !config.target || !config.data || !config.model) {
    console.info("参数异常。");
    return this;
    }
    this.target = config.target;
    this.model = config.model;
    this.data = config.data;
    this.tclass = config.tclass;
    // 创建表格标签,并保存到 this上
    this.table = document.createElement('table');
    // 如果指定表格的样式
    if (this.tclass) {
    this.table.className = this.tclass;
    }
    }
    // 2:
    Table.prototype = {
    constructor: Table,
    // 渲染表格头
    renderHead: function() {
    var tHead = document.createElement('thead'),
    tr = document.createElement('tr'),
    th;

    tHead.appendChild(tr);
    // 遍历列信息
    for (var i = 0, l = this.model.length; i < l; i++) {
    var temp = this.model[i]; // 临时存储当前编列的列信息
    // 创建列
    th = document.createElement('th');
    // 显示文字
    th.innerHTML = temp.title;
    // 如果用户指定列宽度
    if (temp.width) {
    th.style.width = temp.width + 'px';
    }
    // 如果指定列对齐方式
    if (temp.align) {
    th.style.textAlign = temp.align;
    }
    // 将当前创建的列添加到tr上
    tr.appendChild(th);
    }
    // 把thead添加到table上
    this.table.appendChild(tHead);
    // 测试
    // document.querySelector(this.target).appendChild(this.table);
    },
    // 渲染表格体
    renderBody: function() {
    var tBody = document.createElement('tbody'),
    tr,
    td;
    // a: 遍历数据
    for(var i = 0,l = this.data.length;i < l;i++){
    // 创建数据行
    tr = document.createElement('tr');
    for(var j = 0,ml = this.model.length; j < ml; j++){
    td = document.createElement('td');
    td.innerHTML = this.data[i][ this.model[j].prop ];
    tr.appendChild(td);
    }
    tBody.appendChild(tr);
    }
    this.table.appendChild(tBody);
    },
    draw: function() {
    this.renderHead();
    this.renderBody();
    document.querySelector(this.target).appendChild(this.table);
    }
    };

    var rdata = [{
    name: 'tom',
    age: 18,
    count: 100, // 在网站充值的 金币数量 100币 = 100 rmb
    gender: '男',
    address: '北京'
    }, {
    name: 'jim',
    age: 22,
    count: 0,
    gender: '女',
    address: '上海'
    }, {
    name: 'hanmei',
    age: 20,
    count: 100000,
    gender: '男',
    address: '天津'
    }];

    var t = new Table({
    target: "#userList", // 表格要渲染到的容器
    model: [ // 表格头配置
    // 第一列 title 显示文本
    {
    prop: "name", // 指定 渲染数据对象的 对应属性
    title: "姓名", // 指定表头显示的文本
    100, // 指定列的宽
    align: "center" // 指定表头文字对齐方式
    }, {
    prop: "age",
    title: "年龄",
    80,
    align: "right"
    }, {
    prop: "count",
    title: "金币数",
    150
    }, {
    prop: "gender",
    title: "性别",
    60,
    align: "center"
    }, {
    prop: "address",
    title: "地址",
    160,
    align: "center"
    }
    ],
    data: rdata, // 指定表格体 数据部分
    tclass: "gridtable" // 表格样式
    });
    t.draw();
    </script>
    </body>
    </html>

           3. 实力成员与静态成员

           (1)概念:

                  实例成员:通过构造函数创建出来的对象上的成员,称为实例成员;

                  静态成员:函数对象上的成员,被称为静态成员。

           (2)区别:实例成员必须先创建实例,再访问;而静态成员直接通过函数的名字即可访问。

                在实际开发时,如果遇到工具类方法,此时可以考虑写成 静态成员。

                静态成员 相对于 实例成员 好处为:不需要创建对象,直接通过函数名字来访问成员。

           4. 递归:函数调用自己

             案例1:求阶乘

                   function Factorial(n){

                      if(n<0) return undefined;

                      else if(n==0||n==1) return 1;

                      else return Factorial(n-1)*n;

                  }

                 console.log(Factorial(5));

            案例2:等差数列: 求等差数列的第n项值

              //n:表示第几项   v:初始值   d:等差

                 function Arithmetic(n,v,d){

                   if(n<1) return undefined;

                   else if(n==1) return  v;

                   else return Arithmetic(n-1,v,d)+d ;

             }

              console.log(Arithmetic(5,2,3));

           案例3:递归-遍历后代

                 function  printChildren(node){

                   var node;

                   if(node.firstChild){   //如果 node有第一个子节点,表明其有后代节点

                      nodes=node.childNodes;     // 获取当前node的所有节点,然后遍历

                      for(var i=0;l=nodes.length,i<l;i++){

                              console.log(nodes[i]); //打印节点

                               if(nodes[i].firstChild)  printChildren(nodes[i]);

                        }

                }

          }

          printChildren(document.getElementById('dv'));

          5. 词法作用域

            定义:变量的作用域 是由代码 书写的位置决定 而不是 变量被使用的位置决定;只有函数可以限定作用域。

            包括全局作用域和局部作用域。

          6. js中的预解析

              词法分析:在此阶段。如果代码有语法错误会直接抛出异常

              预解析会变量名提升和函数名提升

          7. in简介

              语法: in 左边的操作数必须为 字符串类型 ,表示属性的名字,如果不是,会尝试将其转换成字符串,如果失败了,就报错。 

                    右边的操作数 为 对象。不为对象,报错。

                   含义:判断对象是否能访问到该属性,如果能,就返回true,否则返回false。

          8. 小知识点

             声明的全局变量都是 window对象的属性; 函数的名字 存储的是 函数对象的地址。

  • 相关阅读:
    Elasticsearch 索引文档如何使用自动生成 Id?
    Spring Boot 缓存 知识点
    table的各种用法
    Spring Boot 整合 Elasticsearch
    Spring Boot 集成 Kafka
    Spring Boot 2实现分布式锁——这才是实现分布式锁的正确姿势!
    Spring Cloud 与 Spring Boot 版本兼容关系
    Spring Boot 之:Spring Boot Admin
    JVM 性能调优工具
    Spring Boot 之:Actuator 监控
  • 原文地址:https://www.cnblogs.com/fatimah1214/p/6055591.html
Copyright © 2011-2022 走看看