• 原生---JavaScript


    js

    基础

    基本知识

    • 数据类型

      • 数据类型

        在js中有六种数据类型

        (基本数据类型) String :在双引放单引 Number :包括整数与浮点数; 如何数值超过Number.Max_value则会返回infinity(无穷的数值类型);NaN也是一个数值类型。但他想表示这不是一个数值类型;对于精确度比较高的,千万不要使用JS运算,比如0.1+0.2得到的结果不准确。 Boolean Null :使用typeof检查是Object类型 Undefined 未定义,当我们声明一个变量,但没有赋值,输出时就会返加Undefined (引用数据类型) Object 对象

      • 数据类型的判断函数

        1-1、typeof 不可以判断null Object 1-2、instanceof 对typeof进行补充,用来判定Object(具体) 语法: 目标 instanceof  类型 ----判断左边是否是右边的实例    1-3、“===” 对typeof进行补充, 可以用来判断 null undefined

      • 数据类型的转换

        1、a.toString()与String(a)函数转字符串 ---前者有局限性,当a是null或Undefined类型时,会出现错误。 2、Number(a)函数转为数值类型 --null、boolean比较特别,他在一定方面代表的是数字,会转为数字。而不是NaN; 3、转布尔值的Boolean(a)函数(比较重要) --【数字类型】0,NaN【字符类型】空串 ""以及【null】【Undefined】【Object】上面除了Object都转为false

    • 转意字符

       换行   对应HTML     制表(tab) 对应HTML  

    • 数值解析

      • 数字解析

        parseInt(a),parseFloat(a)两个函数 列举:0.123.4c.123 ---parseInt(a),解析得0,原理是从左到右只解析数字,遇非数字结束。除此还可以用来解析进制数parseInt(123,8) 深入应用: 如何获取var i=134;的百十个位数呢? 答:var bai=parseInt(i/100); var shi=parseInt((i%100)/10); var ge=i%10; 快速理解:先% 后parseInt()+"/"

                        ---parseFloat(a),解析得0.123,从左到右解析数值,包括第一个小数点。
      • 字符解析

        以0x、0、0b开头分别代表什么进制数,分别是十六进制、八进制、十进制。 'u + 16进制的unicode编码' '&# + 10进制的unicode编码 + 英文分号;'

    • 运算

      • 运算符+

        不同数据类型进行加法运算, 主要看一对运算中是否有String、NaN.且优先级String>NaN, 举例:1+null+"abc"=1abc

      • 非加运算符-*%

        不管是何类型都转为Number运算。结果不是数字就是NaN;  --原理是,从左到右将非数字类型转为数字类型如果转换失败,得到NaN,因为所有数值与NaN运算都是NaN,所以结束是NaN.

      • 等号与自增自减运算

        等号运算,“==”与“===”的区别在于是否会作转换,“===”是作全等运算。而“==”转换数据类型转换后进行全等运算。

        自增有a++,++a 区别在于第一次代表的值。而后面他的值是一样的,都是自增后的值。 例举: var a=1; var b=1;   console.log(a++,++b);//第一次,1 2 console.log(a,b);//第二次,2 2 (-- 略)

      • 三目运算

        Boolean ? A区:B区;三目运算符可以是语句块,也可以是某个值。 --补充:如果区是代码块最终变量是没能得到值的。

      • 赋值运算

        a=4与a[+-*/%]=b --前者是单纯的赋值运算,而后者是表达式赋值。 --后者:a+=b ==> a=a+b;

      • 逻辑运算

        首先将两边代码结果进行 ”布尔化“,根据&& (||), 进行从左到右找false(true)。如果找到返回位置上对应的内容,如果没找到返回最后一位的内容。

      • 关系运算

        a>b,类似运算中,会将他们数值化,如果都是字符类型则不会数值化,而是比较他们的Unicode编码。如果在数值化过程中转为了NaN,则最后结束是false.

    • 语句

      • 条件语句

        if语句: 完整语句体 if(Boolean){

                 }else if(Boolean){

        }else{

        }

        switch语句 switch(i){ case a: 代码体1 break; case b: 代码体2 break; default: 代码块3 break; }

      • 循环语句

        共性:初始化表达式、条件表达式、更新表达式。

        【循环语句while】while的结构是分散的。写法是从死循环到标准。 【循环语句for】for循环语句与while相比,for的结构是在一起的。而执行的顺序如下: for(1初始化表达式;2,5/,8/...条件表达式;4,7,...更新表达式){ 3,6,...代码块 }

      • 补充

        break(switch || 循环) ,continue专门用于循环

      • 冒泡排序案例
      • var arr=[311,42,33,5,21,6,7,312];
                console.log(arr);
                for (var i=1;i<=arr.length-1;i++){//重在体现循环次数(前两位不用比较-->所以比较次数是length-1)
                    for (var j=1;j<=arr.length-i;j++){//如下图(j=1两个数比较的第二个数,arr.length-i是循环次数的表达式)
                        if(arr[j-1]>arr[j]){//交换逻辑
                            var sub=arr[j-1];
                            arr[j-1]=arr[j];
                            arr[j]=sub;
                        }
                    }
                }
                console.log(arr);
    • 对象

      • 认识

        存储不同数据类型的容器, 可以向里面添加任意的数据类型,包括对象,函数,数组与其它对象。

      • 工厂创建

        工厂模式 将公共方法存到原型对象中,从而避免每创建一个对象就创建一个属性,来节省内存空间。 function Pro(name,age){ this.name=name; this.age=age; Pro.prototype.setName=function (newName){ this.name=newName; } } var pro=new Pro("小庄",23); 补充: this代表新创建的对象

        new就是调用了构造函数进行创建,其执行流程: 1、立刻创建一个新的对象, 2、将新建的对象设置为函数中this,在构造函数中可以使用this来引用新建的对象 3、逐行执行函数中的代码//由我们书写,其它步骤不可见 4、将新建的对象作为返回值返回

        使用同一个构造函数创建的对象,我们称为一类对象,也将一个构造函数称为一个类。通过一个构造函数创建的对象,称为是该类的实例。

      • 添加

        用方法添加 --obj.nama  ="<value>"; obj["name"]="<value>"; 用快捷表达法添加 { name:123, "123":345 } 注意向对象添加的属性名可以不用符合标签符命名规则,但添加的方式需要用引号括起。

      • 读取

        普通 obj.element 特殊(对应添加) obj["123"]

      • 查找

        检查obj是否包含有element属性 var ifs=("element" in obj);

      • 删除

        删除obj中的element属性 dellete obj.element

      • 遍历

        枚举 for(var key in obj){  arr.push(key+"="+obj[key]); }

    • 原型对象

      • 认识

        原型对象: 不管在Object对象,函数(包括Function函数),还是实例对象中,都有原型对象。且他们是存在有关系的。(请看附件)

      • 属性的查找

        关于检查: hasOwProperty:用来检查对象本身是否含有指定的属性 pro.hasOwnProperty("name") "属性" in 对象.用来检查本身及其原型是否包含指定属性。 举例: function Pro(name){ this.name=name; } var pro=new Pro("孙悟空"); pro.proto.age=23; console.log(pro.hasOwnProperty("name")); console.log("age" in pro);

    • 函数

      • 认识

        函数本身也是对象,里面包含了可执行的代码。函数用来实现特定的功能。 分类: (函数本身也是对象) var at3=new Function("console.log('原始');"); at3();  (有函数名) function fun1(){

                }
        (无函数名)
        有接收:
        var fun=function(){

        }
        无接收(立即执行函数):
        (function(a){

        })("a")
        对象中的函数
        --方法
      • 作用域

        全局变量作用域生命周期是由网页打开到关闭。 而函数变量(局部)作用域从调用到调用结束。

      • this

        在函数中,用对象调用,this就是该对象。 在函数中,用函数的返回值调用,this是Window. 在构造函数中,this代表的是新创建的对象。

        改变this: Per.call(obj,2,3);//依次传参 Per.apply(obj,[2,3]);//以数组的形式传参

      • 类数组arguments

        arguments,在函数中arguments包含了传进来的所以参数,而不限于形参。 arguments是一个类数组,我们可以获取里面的包含的参数。

        我们也可以将这个类数据转为真正的数组。
        var args = Array.prototype.slice.call(arguments);

        除此 我们还可以利用其cellee属性得到最近最近外围的函数。来实现递归。 var num=1; function fu(){ console.log(num++); arguments.callee();//相当于fu()

        } fu();

    • 垃圾回收

      当一个对象,没有变量指向它的时候,js垃圾回收器就会自动 回收这些内存资源。

    内置对象

    • 数组

      • 认识

        数组是用来存储数据的,可以存储任意的数据类型。可以将其看作一个容器。

      • 基本使用

        数组是Array对象,快速用[]快速创建。 向后添加数据 arr[arr.length]="new  替换方法 arr.splice(开始索引 , 向后数量 ,"新数组属性");

      • 数组的方法:join() 方法也可将所有数组元素结合为一个字符串,参数是连接符。push() : 向数组后面添加新的元素(比如  arr.push(key+"="+obj[key]);)。              
      • 数组的遍历

        两种方法: var arr=[1,2,3,4]; 专门用于遍历数组的forEach方法(不可中途终止遍历) arr.forEach(function(val,ind){ console.log("索引="+ind+",值="+val); }); 使用性更广的for循环遍历(可中途终止遍历) for(var i=0;i<arr.length;i++){ console.log("索引="+i+",值="+arr[i]); if(i==2){ break; } }

    • 时间对象Date

      获取时间对象 var auto=new Date();//获取当前时间 var din=new Date("05/20/2020 13:14:00");//自定义一个时间 时间对象的一些方法 getDate() 以数值返回天(1-31) getDay() 以数值获取周名(0-6) getFullYear() 获取四位的年(yyyy) getHours() 获取小时(0-23) getMilliseconds() 获取毫秒(0-999) getMinutes() 获取分(0-59) getMonth() 获取月(0-11) getSeconds() 获取秒(0-59) getTime() 获取时间(从 1970 年 1 月 1 日至今) console.log(auto.getTime());//获取指定时间的时间戳 var start=Date.now();//获取现在的时间戳。

    • 数学对象Math

      Math对象(数学工具类) Math.floor(x) 的返回值是 x 下舍入最接近的整数: Math.ceil(x) 的返回值是 x 上舍入最接近的整数: Math.round(x) 的返回值是 x 四舍五入为最接近的整数: Math.random() 返回 0(包括) 至 1(不包括) 之间的随机数: 获取X到Y的随机整数 Math.floor(Math.random()*(y-x+1))+x;

       

    • 包装类

      这个内容只需要理解即可,因为它是由底层使用的。 关于包装类: 为什么基本数据类型也可以用toString方法? 为什么我们可以基本数据类赋值,却调用不了? 因为当我们用基本数据类型调用一些方法时,底层会自动将基本数据类型转为对象。 a.toString()==== var b=new Number(a); console.log(b.toString());

    • 操作字符的一些方法

      根据索引获取指定字符     ut.charAt(1); 连接字符串             ut.concat("567","890"); 截取字符串中的内容      ut.slice(1,-1); [起来s] 将字符串进行拆分为数组    name.split(","); [cplit]

    • 正则表达式

      test方法:检查右边的字符是否符合左边的正则 RegExp对象:动态修改正则表达式, new RegExp("b"+cn+"b");,会返回一个正则表达式对象

      str.match(/[a-z]/ig); match方法将在左边满足的字符,装箱为一个数组。所以需要用全局g.
      (ig免忽略大小写且进行全局匹配,还有m执行多行匹配。)

      "".replace(//,"")利用正则进行替换字符

                      (对字符的描述)
      [abc]、[A-z0-9],
      w 查找数字、字母、_
      d 查找数字。
      s 查找空白字符。
       匹配单词边界。
      (字符量词)
      {n,m}左边一个字符或一个()组出现n到m次,{m}出现m次,{m,}出现m次以上。
      +至少一个==={1,}
      *有没有都可以{0,}
      ?有或没有
      (字符位置)
      /^n/前面不能再有字符,
      /n$/后面不能再有字符
      /^n$/完全符合正则表达式,即:只能是str="n";才满足。

    DOM

    • 事件

      • 认识

        我们给某个对象绑定事件,我们可以写触发后要执行的代码。 有点击,双击,移入,移出,键盘,滚轮等事件。

      • 加载事件

        onload事件:由于文档加载自上而下的原因,我们需要用到这个事件,以免当我们对文档进行操作时,其对象不存在(还未加载 ) 应用 window.onload=function(){ //当文档加载完成后,会自动触发执行 }

      • 焦点事件

        【焦点事件】     onfocus得到焦点     onblur失去焦点事件

      • 键盘事件

        键盘事件

        onkeydown键按下事件

            onkeyup键松开事件     识别按下是哪个键:       在键盘事件触发后,获取传入的参数event,可以根据event.keyCode==键码,根据特殊的       event.altKey,event.shiftKey等,       多键识别:我们可识别特殊键+非特殊键     取消默认键盘行为       键盘事件触发后,return false;时,在输入框时输入将无法正常使用。

      • 单击/双击事件

        单击事件 up.onclick=function(){ //要执行的代码 }; 双击事件 up.ondbclick=function(){ //要执行的代码 }

      • 滚动条事件

        onscroll 事件:当我们滑动滚动条时触发 使用: info.onscroll=function(){} 获取滚动条的一些信息: //info.scrollHeight是总高度 //info.scrollTop当前滚动条到top的长度 //info.clientHeight可见页面高度 扩展: 组件可用性:disabled=true|false;

      • 滚轮事件

        滚轮事件

        box.onmousewheel = function(event) {//滚动触发   event = event || window.event;   if (event.wheelDelta > 0 || event.detail < 0) {//判断是否是下滚动且兼容     box.style.height = box.clientHeight - 10 + "px";   } else {     box.style.height = box.clientHeight + 10 + "px"; }   event.preventDefault && event.preventDefault(); //解决连带滚动条滚动问题,&&当可用时执行   return false; //取消默认行为(滚动默认连动总页面滚动) } //解决滚轮事件浏览器兼容问题,如果是火狐,它是不支持onmousewheel事件的, bind(box, "DOMMouseScroll", box.onmousewheel); function bind(obj, eventStr, callback) { //事件监听兼容函数   if (obj.addEventListener) {     obj.addEventListener(eventStr, callback, false);   } else {     obj.attachEvent("on" + eventStr, function() {       callback.call(obj);     });   } }

    • 节点

      • 获取节点

        【获取节点】 (document) document.getElementById("bt");//根据Id获取节点 getElementsByTagName("li");//演示根据标签名获取组属性 document.getElementsByName("user");//演示根据name的属性获取组属性 var bufu=document.querySelectorAll("#imgbox"); //根据css选择器获取组节点 【获取关系节点】 fu.children;//获取全部子属性节点 down.parentNode;//获取父节点 down.previousElementSibling;//获取前一个兄弟节点 down.nextSibling;//获取后一个兄弟节点

      • 创建节点

        【创建节点与节点关系】 var but=document.createElement("button");//创建一个属性节点 var btext=document.createTextNode("最后一张"); //创建一个文本节点(可在父节点用innerHTML代替) but.appendChild(btext);//将新节点插入指定节点下

        bufu.insertBefore(but,down);//将新的节点插入指定的子节点之前。
        bufu.replaceChild(but,down);//将新节点代替旧节点
        but.parentNode.removeChild(but);//删除子节点
      • 读取节点

        读取节点的属性与内部HTML代码

        bt.value;//读节点属性。 (class属性是保留字,需要.className去读取) bt.innerHTML;//读内部HTML代码  bt.innerText;//获取除标签外的全部内部文本

      • 应用

        • 修改样式

          为属性设置内部样式属性 obj.style.backgroundColor="red"; 除此,我们还可以通过修改Class值来添加或删除一组样式。

        • 读取样式

          利用下面的方法可以读取现在正在显示的样式

          function getStyle(obj,name){//读取现在的样式属性值 if(window.getComputedStyle){   //大部分浏览器支持   return getComputedStyle(obj,null)[name]; }else{   //只有IE8支持   return obj.currentStyle[name]; } }

    • 捕获与冒泡

      如果以父子关系依次相关联的,当子事件被触发时,以W3C的标准,分为从document到目标的捕获阶段,再到从目标向外的冒泡阶段。如果我们想在捕获时执行,需要在事件监听器 obj.addEventListener(eventStr,callback,false);

      • 事件的冒泡

        子元素事件被触发会自动触发相同事件的父元素。

        取消冒泡 var maot = document.getElementById("maoTest"); //取消冒泡     maot.onmousemove = function(event) {         event.cancelBubble = true; //隔板生效     }

      • 事件的委派

        每个事件被触发后执行的函数都可以接收一个参数,他封装了一些信息,如由于事件的冒泡,我们不确定是谁触发的自己,这时参数对象有一个target属性,可以得到最先被触发的那个对象。

    • 自定义方法

      • 拖拽函数

        使用方法:只需传入要移动对象即可。

        function Tuo(box){ //拖拽函数 //给box添加一个鼠标按下事件 box.onmousedown=function(event){ //获取点击时在box中的相对位置x2,y2 var  x2=event.clientX-box.offsetLeft;// var  y2=event.clientY-box.offsetTop; //给document添加一个拖拽事件 document.onmousemove=function(event){ //将传进来的event参数加强兼容性 event=event || window.event; //获取鼠标在document中的位置 var  x=event.clientX; var  y=event.clientY; //修改box中的top与left属性 box.style.top=y-y2+"px"; box.style.left=x-x2+"px";

            }
        document.onmouseup=function(){//当松下后,关闭移动与松下事件
        document.onmousemove=null;
        document.onmouseup=null;
        }
        return false; //解决全选后拖拽不了的问题

         

        }

        }

      • 方向键移动函数

        box :是要移动的对象 a :是物体移动的速度

        function boxmove(box, a){ var fan;//移动的方向 //当按下一个键时,改变方向变量fan的值。松开时设置为空。 //即我们按下时就朝着设置好的方向移动,松开后没有移动方向。 document.onkeydown=function(event){ fan=event.keyCode; document.onkeyup=function(){ fan=null; }

            }

        var  yidon=setInterval(function(){
        switch(fan){
        case 37:
        box.style.left=box.offsetLeft-a+"px";
        break;
        case 38:
        box.style.top=box.offsetTop-a+"px";
        break;

        case 39:
        box.style.left=box.offsetLeft+a+"px";
        break;
        case 40:
        box.style.top=box.offsetTop+a+"px";
        break;
        }
        },30);

        }

    BOM

    • 认识BOM

      浏览器对象模型BOM

    • Navigator

      【Navigator】 --获取浏览的信息,识别不同浏览器 var  ua=navigator.userAgent; if(/firefox/i.test(ua)){   alert("你是火狐"); }else if(/chrome/i.test(ua)){   alert("你是谷歌"); }else if(/msie/i.test(ua)){   alert("你是IE"); }else if("ActiveXObject" in window){   alert("你是IE11,枪毙了你~"); }

    • Location

      【Location】 --代表浏览的地址栏 //执行后会跳转到指定链接上 location.assign("http://www.baidu.com");

      //执行后会清除缓存 location.reload(true);

      //执行后会替换当前,且不可逆。 location.replace("http://www.baidu.com");

    • History

      【History】 --当前容器的历史记录 history.back();//当前窗口的上一个页面 history.go(-2);//跳转到前第二个页面 history.forward();//当前窗口的下一个页面

    • screen

      【screen】 --获取显示器的相关信息

    • 定时器&超时调用

      定时器 setInterval(function(){

      },<循环调用时间>);

      clearInterval( );//关闭指定的定时器 #如果想继续开启定时器,你需要将这个定时器用一个函数包装,如果你是在外部关闭定时器,需要将这个定时器声明出函数外。  
    • 超时调用 setTimeout(function(){

      },<调用时间>);
      clearTimeou //关闭指定的超时调用
      • 自定义的方法

        /* 1、动画函数 obj:目标属性 speed:改变的速度 target:改变的幅度 type:topleftwidthheight fun:回调函数,动画执行完时调用

        */ function move(obj, speed,target,type,fun){ console.log("你调用了jsTools中的move动画函数~"); function  getStyle(obj , name){//根据样式名获取样式值 if(window.getComputedStyle){ return getComputedStyle(obj,null)[name]; }else{ return obj.currentStyle[name]; } } //函数主体 clearInterval(obj.ding); if(parseInt(getStyle(obj,type))>target){ speed=-speed; } obj.ding=setInterval(function(){ var oldValue=parseInt(getStyle(obj,type)); var newValue=oldValue+speed; if((speed<0 && newValue < target ) ||( speed>0 && newValue > target) ){ newValue=target; obj.style[type]=newValue+"px"; clearInterval(obj.ding); fun ?fun(): console.log("未传入回调函数");//执行回调函数 }else{ obj.style[type]=newValue+"px"; }

                            },30);

        }
        /*
        2、添加或删除指定Class值
        obj:目标属性
        cn:是要添加或移除的Class值
        */
        function hasClass(obj,cn){//有添加,无删除Class指定值
        var ze=new RegExp("\b"+cn+"\b");
        if(ze.test(obj.className)){
        obj.className=obj.className.replace(ze,"");
        console.log("已替换");
        }else{
        obj.className+=" "+cn;
        console.log("已添加");
        }
        }
        function AddClass(obj,cn){//没有添加 
        var ze=new RegExp("\b"+cn+"\b");
        if(! ze.test(obj.className)){
        obj.className+=" "+cn;
        }
        }
        function RemoveClass(obj,cn){//有移除
        var ze=new RegExp("\b"+cn+"\b");
        obj.className=obj.className.replace(ze,"");
        }

        /* 3、二级菜单伸缩动画函数 使用说明:给具有指定结构的二级菜单栏添加伸缩动画效果 <div id="my_menu" class="sdmenu"> <div class="collapsed"> 在线工具 图像优化 ... </div> <div class="collapsed"> 支持我们 图像优化 收藏夹图标 .... </div> </div>

        / function mocc(boxId){ var box=document.getElementById(boxId); //获取二级菜单主体下的span var title=box.getElementsByTagName("span"); var index; //遍历span for(var i=0;i<title.length;i++){ title[i].index=i; title[i].ofno=false; //为每个span绑定一个单击响应函数 title[i].onclick=function(){ //得到当前span的父节点,与其下一个兄弟 var Tparent=this.parentNode; var Tsibling=this.nextElementSibling; if(Tsibling){ //分别得到展开前后的动态值 var init=Tparent.querySelector("span").offsetHeight; var end=Tparent.querySelectorAll("a").length(Tsibling.offsetHeight)+init; //根据现在的状态,给等下要操作的目标长度赋值 后修改操作后的状态 var mo=this.ofno ? init :end; this.ofno ? (this.ofno=false) : (this.ofno=true); move(Tparent,6, mo,"height",function(){ }); }

                            }
        }
        }

    高级

    对基础知识的深入了解

    • 函数参数

      我们给函数传入参数时,就相当于在函数作用域中声明了一个变量。

    • 资源的回收

      自动释放:生命周期完后 回收:没有变量指定这个内存地址后,这块内存就会被回收器回收。

    • []在对象中的应用

      var obj={ "a-b":123, "123":"ab"  } console.log(obj["a-b"]); //特殊属性名时 var  name="a-b";//属性名不确定时 console.log(obj[name]);

    • 回调函数

      什么是回调函数? ---你定义了,没有调用,但最后执行了。 比如:事件 、定时器

    • IIFE

      IIFE ——立即执行函数的作用 ---不会污染全局命名空间,隐藏实现。

    • isAdd分号?

      关于加不加分号问题 ---小括号、中括号 前不加就会报错。 var a=3 (function(){alert(123)})()  var a=3 [1,2]forE....

    高级部分

    • 原型对象

      • 再认识

        函数的原型对象默认指向一个空对象,里面默认有下面这两个属性。             constructor //指向自己this             proto //原型的原型对象

      • 显式原型与隐式原型

        显式原型对象与隐式原型对象 函数prototype 显式原型对象====对应实例的 proto 隐式原型对象

                  创建函数时,Fn.prototype={}           创建实例时,this.proto=Fn.prototype

      • 原型链

      • 原型链的继承

    • 变量提升与函数提升

      *变量提升与函数提升 变量提升,执行之前先声明,但未赋值 函数提升,在语句之前已声明,完整存在

              理解:在变量执行之前,就可以访问到了,但它的值是undefined。在函数执行之前,就可以调用到了。因为存到了上下文中栈中了。
      且先执行变量提升再执行函数提升!!
      注意:就算是if语句中的变量,也是会自动进行变量提升的。
    • 作用域

      *作用域 ——迷惑型题目 题1: var a=4; function fun1(){ console.log(a); } function fun2(){ var a=6; fun1(); } fun2(); 结果: 4 ,是根据自己身所在位置进行查找的,而不是根据关系查找。 题2 var obj={ tet:function (){ console.log(tet); } } obj.tet(); 结果是:报错,找不到 总结:是根据上下文栈块逐层查找的。

    • 执行上下文

      • 分类

        JavaScript 中有三种执行上下文类型。 全局执行上下文 — 这是默认或者说基础的上下文,任何不在函数内部的代码都在全局上下文中。它会执行两件事:创建一个全局的 window 对象(浏览器的情况下),并且设置 this 的值等于这个全局对象。一个程序中只会有一个全局执行上下文。 函数执行上下文 — 每当一个函数被调用时, 都会为该函数创建一个新的上下文。每个函数都有它自己的执行上下文,不过是在函数被调用时创建的。函数上下文可以有任意多个。每当一个新的执行上下文被创建,它会按定义的顺序(将在后文讨论)执行一系列步骤。 Eval 函数执行上下文 — 执行在 eval 函数内部的代码也会有它属于自己的执行上下文,但由于 JavaScript 开发者并不经常使用 eval,所以在这里我不会讨论它。

      • 执行上下文栈

        • 执行上下文栈.jpg

    • 闭包

      • 产生的条件

        函数内嵌套有函数, 内函数引用了外函数的属性(变量或函数), 并且外部函数被调用执行;

        (function Pro(){ var a=Math.random(); window.mm=function (x,y){ return Math.floor(y-a*(y-x)); } })()//外部函数调用

      • 自定义JS模块

        js自定义模块 将代码封装在一个JS文件中,有特定功能。向外暴露一些行为函数。 1、私有数据 2、操作数据的函数 3、向外暴露对象(给外部使用的方法)

         var myModule = (function(){
        var var1 = 1;
        var var2 = 2;
        function func1(){
        ...
        }
        function func2(){
        ...
        }
        return {
        func1: func1,
        func2: func2
        };
        })();
      • 终极面试题

        终极面试题

        function fun(n,o){ console.log(o); return { fun:function (m) { return fun(m, n); } } } var a=fun(0).fun(1).fun(2).fun(3);

        解析:a=fun(0) 时,它的返回值中含有闭光,值为0 ...fun(1) 时,它的返回值中含有闭光,值为1 .....f

    • 内存的溢出与泄露

      *内存溢出与内存泄露 你需要的内存大于剩余的内存空间,就会导致内存溢出。从而报错。 内存泄露:不合理地占用内存资源,而不及时地释放 ,如,定时器、函数中变量的错误声明为全局变量等,都会导致内存泄露从而使内存溢出。

    • 借用构造函数

      构造函数借用构造函数:得到属性 function Fun1(age){ this.age=age; } function Fun2(name,age){ this.name=name; Fun1.call(this,age);//开始借用 }

    • 单线程与多线程

      • 认识

        *单线程与多线程 有的程序是单进程有的是多进程的,而多进程数据一般是不共享的,且每一个进程可能有多个线程。 JS是单线程的:警告框可以暂停主线程的执行,如果是多线程会带来很复杂的同步问题。

      • Web worker多线程技术

        *Web Worker Web Worker,作为JS中的多线程技术,主要用来处理耗时较长的程序。

        主线程(老板)---调用*.js文件
        var wo=new Worker("fine.js");
        wo.postMessage(1);//向分线程发送数据
        wo.onmessage=function (e){
        //接收分线程传过来的数据
        console.log(e.data);
        }
        分线程(工人)---*.js
        var onmessage=function(event){
        var jout=++(event.data); //接收主线程传过来的数据
        postMessage(jout );//向主线程发送数据
        }
    • 回调队列

      • 认识

        回调队列

          初始化代码执行完后,才会执行回调代码,而执行回调代码时先将它们添加到对应的模块中,当条件满足时,如点击了,定时器的时间到了,就会将其添加到回调队列后面进行排队,然后先进先出。

            var yfd=document.getElementById("yfd");
        yfd.onclick=function (){//点击后,会在后面添加到回调队列中。
        console.log("点击事件:进入回调队列并执行了~");
        }
        setTimeout(function (){
        console.log("外部定时器已开始");
        setTimeout(function (){console.log("内部定时器结束了")},3000);//会添加对应模块中,3秒条件满足后,会在后面添加到回调队列中。
        console.log("外部定时器已结束,此时如果你不点击回调队列中没有东西。但已新添加了一个定时器,等下不管你有没有点击,3秒后都会添加到事件队列中");
        },20);
        console.log("初始化执行完了。。");
        *Web Worker
      • 图解

    XMind: ZEN - Trial Version

    var arr=[311,42,33,5,21,6,7,312];        console.log(arr);        for (var i=1;i<=arr.length-1;i++){//重在体现循环次数(前两位不用比较-->所以比较次数是length-1)            for (var j=1;j<=arr.length-i;j++){//如下图(j=1是下图的1,arr.length-i是下图循环次数的表达式)                if(arr[j-1]>arr[j]){//交换逻辑                    var sub=arr[j-1];                    arr[j-1]=arr[j];                    arr[j]=sub;                }            }        }        console.log(arr);

  • 相关阅读:
    史记 · 码农列传
    死侍在新片中,扮演了一个 AI 驱动的 NPC
    什么是高中物理?一篇长长长长文告诉你!
    你管这玩意叫网络?
    你管这破玩意叫计算机?
    try-catch-finally中的4个巨坑,老程序员也搞不定!
    未来几年,软件测试九大新兴趋势
    代码中大量的if/else,你有什么优化方案?
    PHP部署服务端常见问题整理
    PHP服务端环境搭建
  • 原文地址:https://www.cnblogs.com/zjazn/p/14428060.html
Copyright © 2020-2023  润新知