原生---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

• 转意字符

  \n 换行   对应HTML   \t 制表(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 查找空白字符。
                       \b 匹配单词边界。
                   （字符量词）
                      {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:top\left\width\height 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);