JS高级

一、函数高级

1、函数回调

// 回调的函数
function callback(data) {}
// 逻辑函数
function func(callback) {
    // 函数回调
    if (callback) callback(data);
}

// 函数回调的本质：在一个函数中(调用函数)，当满足一定条件，调用参数函数(回调函数)
// 回调函数作为调用函数的参数传入
// 回调函数通过参数将调用还是内部数据传出

2、闭包

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

// 闭包目的：不允许提升变量作用域时，该函数的局部变量需要被其他函数使用
// 闭包本质：函数的嵌套，内层函数称之为闭包
// 闭包的解决案例：①影响局部变量的生命周期，持久化局部变量；②解决变量污染

二、循环绑定

.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;
// 创建子级对象
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(持续性定时器)

  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);
    }