閉包
閉包的第一層含義：訪問函數（冰箱）內部的變量（大象），可以通過在該函數定義另一個函數（冰箱門，冰箱入口）來訪問。
通過在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>