闭包，继承，事件冒泡，事件捕获，H5与Css新特性，本地存储

1.闭包

1. 什么是闭包？

当一个函数的返回值是另外一个函数,而返回的那个函数如果调用了其父函数的内部变量,且返回的那个函数在外部被执行,就产生了闭包。

  	function fn(){
	var num =0;
	num =num +1;
	return num;
}
	console.log(fun()) // 1
	console.log(fun()) // 1
	console.log(fun()) // 1

	function fn(){
	var num=0;
	return function(){
	num++;
	return num;
	}}
	var fn2=fn()
	console.log(fn2()) //1
	console.log(fn2()) //2
	console.log(fn2()) //3

闭包可以保持变量不会被垃圾回收机制回收(长存储)
缺点：导致变量一直占用内存，在IE中会导致内存泄漏
优点：避免全局变量污染环境

2.继承

2.1原型链继承

让一个引用数据类型继承另一个引用类型的属性和方法

//父级
//构造函数
function Person(name,sex){
this.name=name;//属性
this.sex=sex;
this.poop=function(){ //方法
console.log('hi')
}
}
//原型
Person.prototype.hobby=["11","22"]
Person.prototype=new Person('小白','男')
//实例化对象
var stu1=new Student();
var stu2=new Student();

优点：
可以把父级原型的属性和方法继承过来，简单，易于实现
缺点：
1.在父级构造函数中继承过来的属性值是一样的，无法实现多继承。
2.无法给父级构造函数传参

2.2 构造函数继承

在子类型的构造函数中调用父类型构造函数

//父级
function Person(name,sex){
this.name=name;
this.sex=sex;
}
Person.prototype.say=function(){
console.log('hi');
}
function Student(name,sex){
Person.call(this,name,sex)
}
var stu=new Student('小白',18，'男')
console.log(stu);

优点：
可以继承父级构造函数中的属性，并没用赋值(相当于复制父类的实例给子类，没有用到原型)
缺点：
父类原型的属性和方法访问不到(只能使用到父类的属性和方法，不能继承原型的属性和方法)

2. 3组合继承

使用原型链实现对原型属性和方法的继承，通过借用构造函数来实现对实例属性的继承

//父级
function Person(name,sex){
this.name=name;
this.sex=sex;
}
Person.prototype.say=function(){
console.log('hi');
}
//子类
function Student(name,sex){
Person.call(this,name,sex);//构造函数继承
}
Student.prototype=new Person();//原型链继承
var stu=new Student('小白'，"男")//实例化对象

缺点：
什么情况都会调用两次超类型的构造函数，一次创建子类原型，一次在子类型构造函数内部
优点：
1.可以向超类型传递参数
2.每个实例都有自己的属性
3.实现了代码复用

改变this指向的方法
它们的第一个参数都是要修改的this指向， 指向的对象
1.call
call的其他参数以散落的形式传递给调用call方法的函数
2.bind
bind返回一个函数，返回的函数就是调用bind方法的函数本身
3. apply
apple的其他参数以数组的形式传递给调用apply方法的函数

3.事件冒泡

事件开始时由最具体的元素接收，然后逐级向上传播到较为不具体的节点。
事件冒泡的过程就是 btn => div => body层层向上传递的过程。

<div id="div">
      <button id="btn">点击</button>
</div>
var btn = document.getElementById('btn');
var div = document.getElementById('div');

function btnClick() {
	console.log('点击了btn');
}
function divClick() {
	console.log('点击了div');
}
function bodyClick() {
	console.log('点击了body');
}

4.事件捕获

是不太具体的 DOM 节点应该更早接收到事件，而最具体的节点应该最后接收到事件。
事件捕获的过程就是 body => div =>btn 层层向下传递的过程。

btn.addEventListener('click', function() {
	console.log('btn点击了');
}, false)

div.addEventListener('click', function() {
	console.log('div点击了');
}, false)

5. H5 与 css3新特性

h5：

1、语义化标签 section header nav menu footer
2、表单元素的扩展 input 新增type的值 range date datetime search reset
3、拖放API： dragable 属性
4、canvas 画布 canvas.getContext(‘2d’)
5、video 视频 audio音频
6、地理定位

css3:

1， 选择器 nth- 属性选择器
2， background-image: url() url() url();
3， 边框样式 border-image

​ 4， 文本阴影text-shadow 盒子阴影Box-shadow
5，动画过度动画transition 和 动画 animation transform 旋转 平移 缩放 倾斜
6， 过渡动画和动画的区别：过渡动画只有开始和结束两个状态
7，@Font-face 特性

6. sessionStorage、localStorage、cookie的区别

1. . localStorage

localStorage 生命周期是永久，除非手动清除localStorage 否则这些信息将永远存在。
存放数据大小为一般为5MB,而且它仅在客户端（即浏览器）中保存，不参与和服务器的通信

var obj = {
	user: "李狗蛋",
	sex: "男",
	age: 18
}
//存储
obj = JSON.stringify(obj)
localStorage.setItem('obj', obj);
//查看
localStorage.getItem('obj');
//删除单条
localStorage.removeItem('obj');
// 清除所有的localStorage存储数据
localStorage.clear();

2.sessionStorage

仅在当前会话下有效，关闭页面或浏览器后被清除，存放数据大小为一般为 5MB。
仅在客户端（即浏览器）中保存，不参与和服务器的通信
​ sessionStorage 和 localStorage的方法完全相同
sessionStorage.setItem(‘str’, str)
sessionStorage存储的数据在当前对话结束时自动清除

3. sessionStorage与localStorage的区别

1.不同浏览器无法共享 localStorage 或 sessionStorage 中的信息
2.相同浏览器的不同页面间可以共享相同的 localStorage（页面属于相同域名和端口）
3.不同页面或标签页间无法共享 sessionStorage 的信息

4. cookie

优点：

1.具有极高的扩展性和可用性
2.通过加密和安全传输技术，减少 cookie 被破解的可能性
3.可以设置cookie的有效期

缺点：

1.cookie 的长度和数量的限制，cookie 长度不能超过 4KB，每个 domain 最多只能有 20 条 cookie
2.安全性问题，cookie被人拦截就会获取到所有session的信息