JavaScript进阶3-学习笔记

妖狐艹你老母 2022-10-13 01:54 119阅读 0赞

### 文章目录 ###

*   *  JavaScript进阶3-学习笔记
     *   *  闭包

## JavaScript进阶3-学习笔记 ##

//组件封装
    什么是封装？
    将冗余的代码精简化
    例如：写代码：a页面有一个函数，b页面也需要这个函数，很多人就是直接copy
    
    为什么要封装？
    提高代码复用率
    
    怎么封装？
    没有标准答案，每个人封装方式不同，难易程度不同
    目的：提高复用率，简化代码
    
    例子：https://blog.csdn.net/hhhmonkey/article/details/118385077
    封装方式一：使用div定义一个按钮，根据id渲染按钮
    如何写多个样式？
    封装方式二：样式可以使用：字符串、数组
    封装问题：
    必须定义div，必须明确调用$(id)，要显示写样式名
    
    改进一：
    可以使用自定义<btn>，实际上是用button标签去替换btn
    一、找到btn的上级
    二、创建button
    三、删除btn
    
    改进二：
    将样式写入html，不需要在js中引用
    指定一个标识样式，即不是真实的样式，只为选择器使用$(".btn")
    需要自定义属性，type，text用来指定需要参数
    1.找到所有的.btn的button
    2.将type，text中的信息取出
    3.动态整合button，不依赖于显示的样式名

封装方式二common.js：

//公共的方法 样式不同 标题不同 
    /** * @param {*} title 标题 * @param {*} style 样式 */
    function Btn(title,style){ 
        this.title = title;
        this.style = style;
    };
    Btn.prototype.toHtml = function(){ 
        if (typeof this.style === 'string') { 
            return '<button class="btn '+this.style+'">'+this.title+'</button>'
        }else{ // ["xxx",'yyyy']
            return '<button class="btn '+this.style.join(" ")+'">'+this.title+'</button>'
        }
    };

改进一截图：  
![在这里插入图片描述][20210705221931274.png]  
![在这里插入图片描述][20210705221910867.png]  
改进二截图：  
![在这里插入图片描述][20210705223128194.png]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hoaG1vbmtleQ_size_16_color_FFFFFF_t_70]

### 闭包 ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hoaG1vbmtleQ_size_16_color_FFFFFF_t_70 1]

//闭包 可以很简单，很复杂
    //知道对象实例化？
    
    //闭包： 一个函数引用函数外部局部变量
    
    //闭包一
    function f1(){ 
        var a = 10;  //相对于f2外部局部变量
        function f2() {  //f2可以访问a
            console.log(a)
        }
        f2();
    }
    f1();
    
    //闭包二
    function a(){ 
        var n = 0;  //外部局部变量
        this.add = function(){ //函数引用外部局部变量
            n++;
            console.log(n)
        }
    }
    var c = new a();
    console.log(c.n)  //因为n是局部
    c.add();
    c.add();
    
    //闭包三
    function a(){ 
        var n = 0;  //外部局部变量
        function add(){ //函数引用外部局部变量
            n++;
            console.log(n)
        }
        return add;
    }
    a()()    //柯里化格式 a()()()()()
    //1. a()-->add 2. add() 继续加()让返回的函数执行
    // var aa = a();
    // aa()
    // aa()
    
    // function a(){ 
    // return function(){ 
    // return function(){ 
    // return function(){ 
    // //
    // }
    // }
    // }
    // }
    // a()()()()
    
    //闭包四 可以多次执行
    var a = function(){ 
        var n = 0;
        return function(){   //闭包 匿名函数赋给a
            n++;
            console.log(n);
        }
    };
    var b = a();  //b---闭包
    var c = a();  //c---闭包
    b();  //1
    c();  //1
    
    //闭包有什么用
    //对象封装 能够将name缓存起来，避免污染
    var Person = function(){ 
        var name = "张三";  //get set 相当于对这个属性的操作
        return { 
            getName: function(){ //匿名函数 闭包
                return name;
            },
            setName: function(newName) { //匿名函数 闭包
                name = newName;
            }
        }
    }(); //加上这个括号表示立即执行 Person == {.....}
    console.log(Person.getName())
    Person.setName("xxxxx");
    console.log(Person.getName())
    
    //继承 人-----白人 黑人
    var Person = function(){ 
        var name = "张三";  //get set 相当于对这个属性的操作
        return { 
            getName: function(){ //匿名函数 闭包
                return name;
            },
            setName: function(newName) { //匿名函数 闭包
                name = newName;
            }
        }
    };
    var BlackPerson = function (){ }
    BlackPerson.prototype = Person(); //为什么不需要new() 因为已经是一个实例对象(字面量对象)
    var p = new BlackPerson();  //p是一个对象，对象中有getName函数，函数引用name形成闭包
    p.setName("yyyy");
    console.log(p.getName())
    
    
    //闭包 难----变化太多 有很多种用法 不难----一个函数引用函数外部局部变量
    //原型 在你身上找不到---去原型上找----继续去原型的原型上找
    
    //什么场景 需要维护一个函数的一些信息不变， 可以一直存在 被缓存
    //可以多层嵌套 看你怎么使用
    
    //缺点： 忽略
    //不易理解， 占用内存
    
    //优点：
    //可以缓存数据， 封装， 柯里化， 很灵活
    
    //dom在闭包中又引用自己 ie678
    // var obj = document.querySelectorAll("button");
    // for(var i=0; i<obj.length; i++) { 
    // obj[i].onclick = function(){ 
    // alert(obj.getName)
    // }
    // }

[20210705221931274.png]: /images/20221005/5ad9f44fb13649328d94af3e99d9f2ef.png
[20210705221910867.png]: /images/20221005/51368e2837804fcfaa4f91d423919c65.png
[20210705223128194.png]: /images/20221005/63106d8ffa15461b9fb2fd4afc33af82.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hoaG1vbmtleQ_size_16_color_FFFFFF_t_70]: /images/20221005/e2c8607472724e3c83a58b15e59c4fd7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hoaG1vbmtleQ_size_16_color_FFFFFF_t_70 1]: /images/20221005/7c535ffb0ee94740a60926ef2aa97597.png