JS高級

一、函數高級

1、函數回調

// 回調的函數
function callback(data) {}
// 邏輯函數
function func(callback) {
    // 函數回調
    if (callback) callback(data);
}

// 函數回調的本質：在一個函數中(調用函數)，當滿足一定條件，調用參數函數(回調函數)
// 回調函數作為調用函數的參數傳入
// 回調函數通過參數將調用還是內部數據傳出

2、閉包

function outer() {
    var data = {}
    function inner() {
        return data;
    }
    return inner;
}

// 閉包目的：不允許提升變量作用域時，該函數的局部變量需要被其他函數使用
// 閉包本質：函數的嵌套，內層函數稱之為閉包
// 閉包的解決案例：①影響局部變量的生命周期，持久化局部變量；②解決變量污染

二、循環(huán)綁定

.html文件
<ul>
    <li>列表項</li>
    <li>列表項</li>
    <li>列表項</li>
</ul>

.js文件
var lis = document.querySelector('li');
for (var i = 0; i < lis.length; i++) {
    lis[i].onclick = function () {
        // 打印列表項的索引
        console.log(i);
    }
}
// 變量污染
// 獲取局部作用域解決
// 閉包解決
// 對象屬性解決

三、面向對象JS

1、屬性與方法

var obj = {}; | var obj = new Object();
// 屬性
obj.prop = "";
// 方法
obj.func = function () {}
// 刪除屬性與方法
delete obj.prop
delete obj.func

2、類字典結構使用

• 結構

var dict = {name: "zero", age: 18}

• 拓展

var dict = {"my-name": "zero", fn: function () {}, fun () {}}

• 使用

dict.name | dict["my-name"] | dict.fn()

3、構造函數（ES5）

function People(name, age) {
    this.name = name;
    this.age = age;
    this.eat = function () {
        return 'eat';
    }
}

4、繼承（ES5）

// 父級
function Sup(name) {
    this.name = name;
    this.fn = function () {
        console.log('fn class');
    }
}
// 原型
console.log(Sup.prototype);
console.log(sup.__proto__);
// 子級
function Sub(name) {
    // 繼承屬性
    Sup.call(this, name);
}
// 繼承方法
Sub.prototype = new Sup;
// 創(chuàng)建子級對象
var sub = new Sub("subClass");
// 使用屬性
console.log(sub.name);
// 使用方法
sub.fn();

// 指向自身構造函數
Sub.prototype.constructor = Sub;

5、類及繼承（ES6）

// 父類
class People {
    // 構造器
    constructor (name, age) {
        this.name = name;
        this.age = age;
    }
    // 實例方法
    eat () {
        console.log('吃吃吃');
    }
    // 類方法
    static create () {
        console.log('誕生');
    }
}
// 子類
class Student extends People {
    constructor (name, age) {
        // super關鍵詞
        super(name, age)
    }
}

四、定時器

• setInterval(持續(xù)性定時器)

  setInterval(函數, 毫秒數, 函數所需參數(可以省略));
  var timer = setInterval(function() {console.log("呵呵");}, 1000)
  
  

• setTimeout(一次性定時器)

  setTimeout(函數, 毫秒數, 函數所需參數(可以省略));
  setTimeout(function (data) {console.log(data);}, 1000, "數據");
  
  

清除定時器

    clearTimerout()|clearInterval()
    
    // 清除定時器
    document.onclick = function(){
        clearInterval(timer);
    }
    //timer表示的計時器的名字
    //清除所有定時器
    var timeout = setTimeout(function(){},1);
    for (var i = 0; i < timeout; i++) {
        clearTimeout(i);
    }