闭包,继承,事件冒泡,事件捕获,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的信息

相关文章

Css3如何实现鼠标移上变长特效?(图文+视频)
css3怎么实现鼠标悬停图片时缓慢变大效果?(图文+视频)
jquery如何实现点击网页回到顶部效果?(图文+视频)
css3边框阴影效果怎么做?(图文+视频)
css怎么实现圆角边框和圆形效果?(图文+视频教程)
Css3如何实现旋转移动动画特效