首页 > 代码库 > 面向对象第四天
面向对象第四天
总感觉今天的学习效率不高，好多东西都不知道，像傻了一样。总结了一下今天的知识点，都是很琐碎的东西，为了以后还是决定记录一下。
一、上次课知识点补充
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="http://www.mamicode.com/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 = http://www.mamicode.com/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 = http://www.mamicode.com/[{
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对象的属性； 函数的名字 存储的是 函数对象的地址。
面向对象第四天