码迷,mamicode.com
首页 > 其他好文 > 详细

面向对象第四天

时间:2016-11-11 23:21:09      阅读:251      评论:0      收藏:0      [点我收藏+]

标签:actor   类型   知识点   字符   doc   enter   错误   声明   静态   

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

   一、上次课知识点补充

       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: "姓名", // 指定表头显示的文本
width: 100, // 指定列的宽
align: "center" // 指定表头文字对齐方式
}, {
prop: "age",
title: "年龄",
width: 80,
align: "right"
}, {
prop: "count",
title: "金币数",
width: 150
}, {
prop: "gender",
title: "性别",
width: 60,
align: "center"
}, {
prop: "address",
title: "地址",
width: 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对象的属性; 函数的名字 存储的是 函数对象的地址。

 

面向对象第四天

标签:actor   类型   知识点   字符   doc   enter   错误   声明   静态   

原文地址:http://www.cnblogs.com/fatimah1214/p/6055591.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!