闭包
闭包的第一层含义：访问函数（冰箱）内部的变量（大象），可以通过在该函数定义另一个函数（冰箱门，冰箱入口）来访问。
通过在f1函数内部定义函数f2，从而可以访问到f1内部定义的变量num.这是最简单的闭包形式。
<script type="text/javascript">
function f1(){
let num = 1 ;
function f2(){
alert(num);
}
return f2;
}
let result = f1();
result();
</script>
JS闭包用途：
1、一个是可以读取函数内部的变量
2、另一个就是让这些变量的值始终保持在内存中。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS闭包</title>
</head>
<body>
<ul>
<li>
<a href="##">今日头条1</a>
</li>
<li>
<a href="##">今日头条2</a>
</li>
<li>
<a href="##">今日头条3</a>
</li>
<li>
<a href="##">今日头条4</a>
</li>
</ul>
</body>
<script type="text/javascript">
var lilist = document.getElementsByTagName("li");
for (var i =0 ;i<lilist.length;i++){
(function(m){
lilist[i].onclick = function(){
alert(m);
}
})(i);
}
</script>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS闭包</title>
</head>
<body>
</body>
<script type="text/javascript">
for(var i=0; i<4; i++){
(function(m){
setTimeout(function(){ //异步执行
console.log(m);
},3000);
})(i);
}
</script>
</html>
JS运动相关：
clientWidth:可视区域宽 width+（padding-left）+（padding-right）
clientHeight；可视区域高
offsetWidth:占位宽 width+（padding-left）+（padding-right）+border_width
offsetHeight:占位高
offsetLeft: 表示元素到版式的左侧距离或者offsetParent 值不为null的父元素的距离
scrollwidth :获取对象的滚动宽度
scrollLeft:左侧卷起来的宽度
scrollTop: 上边卷起来的高度
ES6相关：
let var const
<script type="text/javascript">
/*块级变量定义 不会影响污染顶层变量*/
let username ="lisi";
if(true){
let username = "zhaowu";
console.log(username); //zhaowu
}
console.log(username); //lisi
/*const*/
const age=20;
// age=15; //重新赋值 会报错 Uncaught TypeError: Assignment to constant variable.
console.log(age);
/*var */
console.log(sex); // undefined
var sex = "男";
console.log(sex); // 男
</script>
箭头函数：
<script type="text/javascript">
function addnum(num) {
return num + 1 ;
}
console.log(addnum(2)); //3
var addnum2 = (num)=>num+5;
console.log(addnum2(3)); //8
/*箭头函数可以不改变函数的上下文 this*/
var person = {
personname:"lisi",
walk:function(){
setInterval(function(){
console.log("walk"+this.personname); //walkundefined this指向的是window
},1000);
},
walk2:function(){
setInterval(()=>{
console.log("walk2"+this.personname);//walk2lisi this 指向的person对象
},1500);
}
}
person.walk();
person.walk2();
</script>
面向对象类的继承：
Class基本语法：
ES5中使用构造函数定义并生成新的对象（模拟类-类继承）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ES5类</title>
</head>
<body>
</body>
<script type="text/javascript">
function Point(x,y){
this.x=x;
this.y=y;
}
Point.prototype.show=function(){
console.log("Point:",this.x,this.y);
}
var p = new Point(1,3);
p.show(); //Point: 1 3
</script>
</html>
ES6中引入了Class(类)作为对象的模板：
ES6中的class是一个语法糖（核心内容同ES5）
与ES5不同的是类内定义的方法是不可枚举的。
注意： 方法前不加function,方法之间不用逗号分隔，如果没有写constructor()方法，会添加一个默认的constructor.
<script type="text/javascript">
function Point(x,y){
this.x=x;
this.y=y;
}
Point.prototype.show=function(){
console.log("Point:",this.x,this.y);
}
var p = new Point(1,3);
p.show(); //Point: 1 3
class Pointu{
constructor(){
this.x=2;
this.y=5;
}
show(){
console.log("Pointu:",this.x,this.y);
}
}
let pu = new Pointu();
pu.show(); //Pointu: 2 5
</script>
ES6 Class 静态方法，静态属性
静态方法指的是Class本身的方法，而不是定义在实例对象上的方法。
通过关键字static定义静态方法，静态方法中的this指向类本身。
class Foo{
static classMethod(){
console.log(this);
return "hello";
}
}
Foo.classMethod(); /* 结果class Foo{
static classMethod(){
console.log(this);
return "hello";
}
}*/
var foo = new Foo();
foo.classMethod(); //报错Uncaught TypeError: foo.classMethod is not a function
ES6 Class的继承
ES6中通过Class实现继承的语法： extends
<script type="text/javascript">
class Point{
constructor(x,y){
this.x=x;
this.y=y;
}
}
class ColorPoint extends Point{
constructor(x,y,color){
super(x,y); //调用父类的constructor
this.color=color;
}
show(){
console.log(this.x,this.y,this.color);
}
}
var clp = new ColorPoint(3,78,29);
clp.show(); //3 78 29
</script>