美文网首页
023 JS高级

023 JS高级

作者: 泷汰泱 | 来源:发表于2019-10-11 10:00 被阅读0次

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

    相关文章

      网友评论

          本文标题:023 JS高级

          本文链接:https://www.haomeiwen.com/subject/fyrdectx.html