JavaScript-入门第三周学习笔记4

最新推荐文章于 2024-07-12 16:27:40 发布

ruioruioruio

最新推荐文章于 2024-07-12 16:27:40 发布

阅读量398

点赞数

分类专栏： JavaScript学习笔记文章标签： javascript 前端

本文链接：https://blog.csdn.net/LRHJJ/article/details/124575207

版权

JavaScript学习笔记专栏收录该内容

18 篇文章 0 订阅

订阅专栏

一、函数的执行原理

        1、程序加载时
           创建执行环境栈（ECS）：保存函数调用顺序的数组
           首先压入全局执行环境（全局EC）
           全局EC引用着全局对象window
           window中保存着全局变量

        2、定义函数时
           创建函数对象：封装代码段
           在函数对象中有一个scope（作用域）属性：记录着函数来自的作用域是哪里
           全局函数的scope都是window

        3、调用前
           在执行环境栈（ECS）压入新的EC（函数的EC）
           创建活动对象（AO）：保存着本次函数调用时用到的局部变量
           在函数的EC中有一个scope chain（作用域链）属性引用AO
           AO有一个parent属性是函数的scope引用着的对象

4、调用时：正是因为前面三步，我们才有了变量的使用规则：优先使用自己的，自己没有找全局，全局没有就报错

5、调用完：函数的EC会出栈，AO自动释放，局部变量也就自动释放了

作用域：2种
1、全局：随处可用，可以反复使用，缺点：容易被污染

2、函数：只能在函数内部使用，不会被污染，缺点：一次性的，是会自动释放的

两链一包：
作用域链：以函数的EC的scope chain属性为起点，经过AO，逐级引用，形成的一个链式结构
作用：查找变量，带来变量的使用规则

二、闭包

        希望保护一个可以【反复使用的局部变量】的一种词法结构 - 其实还是一个函数，写法和以前不同
   何时使用：希望保护一个可以【反复使用的局部变量】的时候
   如何使用：
       1、两个函数进行嵌套
       2、外层函数创建出受保护的变量
       3、外层函数return出内层函数
       4、内层函数要去操作受保护的变量

   强调：
       1、判断是不是闭包，有没有两个函数嵌套，返回内层函数，内层函数在操作受保护的变量
       2、外层函数调用了几次，就创建了几个闭包，受保护的变量就有了几个副本
       3、同一次外层函数调用，返回的内层函数，都是在操作同一个受保护的变量

   缺点：受保护的变量，永远都不会被释放，使用过多，内存泄漏 - 不可多用
   问题：应该在哪里用呢？
       1、三个事件需要防抖节流
           1、elem.onmousemove - 鼠标移动事件
           2、input.oninput - 每次输入/改变就会触发
           3、window.onresize - 每次窗口的大小发生变化就会触发

        //防抖节流公式：
            elem.on需要防抖节流的事件=function(){
                fdjl();//内层函数只要一旦移动就会触发
            }

            function f1(){
                var timer=null;//3
                return function(){//
                    if(timer){clearTimeout(timer);timer=null;}
                    timer=setTimeout(function(){
                        //操作
                    },1000)
                }
            } 
            
            var fdjl=f1();

三、Object

        对象 - Array/String/RegExp...对象具有属性和方法，都是预定义好的，现在我们可以学习自定义对象
面向对象：三大特点：封装、继承、多态
        1、开发方式：面向对象和面向过程？
   面向过程：经过 - 开始->结束，我们一直的开发方式都是面向过程，先干什么在干什么最后干什么
   面向对象：对象（属性和方法），js有一句话万物皆对象，假设一个人是一个对象的话：
                               属性：姓名、性别、身高、体重、爱好、智商、情商...
                               方法：吃饭、睡觉、拉粑粑、跑步、走路、打字、学习...
   为什么要面向对象：现实中所有的数据都必须包含在一个事物中才有意义
   何时使用面向对象：以后做任何操作都要封装在一个对象中

        2、封装：创建自定义对象：3种方法
① 直接量方式：var obj={
               "属性名":属性值,
               ...
               "方法名":function(){},
               ...
       }
       强调：（1）其实属性名和方法名的""可以不加 - 暂时建议你加上
     （2）访问对象的属性和方法
                                obj.属性名   ===   obj["属性名"]
                                obj.方法名()   ===   obj["方法名"]();
                                建议使用.去访问属性和方法，更简单
                                JS中一切都是对象，一切对象的底层都是hash数组
             （3）访问到不存在的属性，返回undefined
     （4）可以随时随地的添加新属性和新方法
（5）如果我希望遍历出对象所有的东西，使用for in，obj[i]才能拿到，不要用.会出问题
（6）如果你希望在对象的方法里使用对象自己的属性：写为this.属性名

难点：this的指向：
               1、单个元素绑定事件：this->单个元素
               2、多个元素绑定事件：this->当前触发的元素
               3、函数中使用this，this->谁在调用此方法，this指的就是谁
               4、定时器中this->window

            ② 预定义构造函数方式：var obj=new Object();//空对象
                                                    //需要自己后续慢慢追加属性和方法
                                                    obj.属性名=属性值
                                                    obj.方法名=function(){}

以上两个方法都有一个缺陷：一次只能创建一个对象，适合创建单个对象的时候（第一种方法），第二种方法永远不远

            ③ 自定义构造函数方法：2步
           1、创建自定义构造函数

function 类名(name,age,salary){
                this.name=name;
                this.age=age;
                this.salary=salary;
            }
            //千万不要在里面创建方法，每个对象都会创建一个方法，浪费内存 - 明天，继承将统一的方法放到原型上

2、调用构造函数创建出对象
var obj=new 类名(实参1,...)