JS学习第二十天总结

1.通过style方式获取的样式

• 只能拿到行内样式；
• 拿到的是字符串数据类型，带px；
• 简单的封装（使用[]可以传变量）；
• 存在问题：只能拿到行内样式，但是我们一般是不使用行内样式的。

function getAttr(attr){
    console.log(box.style[attr]);
}
getAttr("left");

2.currentStyle当前样式/window.getComputedStyle(obj,null)

• box.currentStyle.width IE6、7、8使用的方式
• window.getComputedStyle(box,null).width W3C推荐的
  • 拿到的是css样式，获取的是字符串类型的，带px的属性值。
• 背景颜色background-color的方式IE是不能获取的，需要使用backgroundColor。
• 兼容处理

function getAttr(obj,attribute){
	if(obj.currentStyle){
		return obj.currentStyle[attribute];
	}else{
		return window.getComputedStyle(obj,null)[attribute];
	}
}

3.数据类型

• 五种基本数据类型：number、string、Boolean、null、undefined。
• 引用数据类型：Object（Array、function…）。
• 对象：属性和方法。
• 对象创建方式：
  • var arr=new Array();/var date=new Date();/var obj=new Object();//构造函数方式
  • var obj={};//对象字面量方式

4.创建对象的封装

• 对象创建的工厂模式
• 构造函数模式

//工厂模式
function Person(name,age,gender){
	var obj={};
	obj.name=name;
	obj.age=age;
	obj.gender=gender;
	obj.sayName=function(){
		console.log(this.name);
	}
	return obj;
}
var p1=Person("zhangsan",32,"nan");
//构造函数模式
function Person(name,age,gender){
	this.name=name;
	this.age=age;
	this.gender=gender;
	this.sayName=function(){
		console.log(this.name);
	}
}
var p1=new Person("zhangsan",23,"nan");

5.this

• 以函数形式调用，指向window
• 以方法形式调用，指向方法调用者。
  • setInterval中this指向window，因为setInterval是window.setInterval的简写。
• 当以构造方法调用时，this指的是新创建的对象。

6.构造函数

• 就是函数
• 函数名首字母大写
• 认为是创建了一个类，实例化时要使用new关键字

7.数组方法的使用

• Array数组中没有的方法，我们可以再原型中添加自定义方法。
• prototype：原型
• 使用prototype改造构造函数
• prototype中，必须使用this关键字，否则无法明确指向

8.函数的回顾

• 函数两种创建方式
  • 函数声明：function fun(){}
  • 函数表达式：var fun=function(){};只能先声明后调用
• 变量作用域
  • 在函数中形成的是局部变量，在全局的就是全局变量(都是以window的属性形式存在)。
  • 全局中无法访问局部变量。
  • 函数内部可以再写函数。

9.闭包

• 函数里面嵌套函数，内部函数可以访问外部函数的变量。
• 函数访问了函数外部的变量，就是闭包。
• 用于创建需要隐藏的变量。