资讯专栏INFORMATION COLUMN

史上最全JS文章

junbaor / 2344人阅读

摘要:路径由零或多个符号隔开的字符串,一般用来表示主机上的一个目录或文件地址。

JS高级与进阶

目录======================

基础 2

Web API 45

面向对象编程 170

案例:贪吃蛇 179

继承 179

函数进阶 223

正则表达式 284

目录======================

1.基础

1.1.变量声明
    1.1.1 关键字var 储存数据的内存空间
1.2.数据类型
    1.2.1 基本数据类型 ; number string boolean null undefined
    1.2.2 复杂数据类型 object function
1.3.类型检测
    1.3.1 typeof 检测基本数据类型  (语法:typeof 变量||字面量)
        数字类型返回 "number" 字符串返回"string" boolean返回"boolean"
        复杂数据类型统一返回object 
        特殊 null返回object  function返回function
    1.3.2 instancof 判断对象的实例 
        语法:实例对象 instancof 构造函数
        返回值 true || false
    1.3.3 constructor  返回对象的构造函数
        语法:obj.constructor 
        返回构造函数名
    1.3.4 Object.prototype.toString.call();
        字符串返回:"[object String]"
        数字返回:"[object Number]"
        null返回:"[object Null]"
        undefined返回:"[object Undefined]"
        object返回:"[object Object]"
        boolean返回:"[object Boolean]"
        数组返回:"[object Array]"
1.4 类型转换
    1.4.1 转换成number  方法:Number()、parseInt() 、parseFloat() 通过运算符转换 转换不成功返回NAN
    1.4.2 转换成:string  方法:.toString()、String、通过字符串拼接 +
    1.4.3 boolean  Boolean() 、!!取反 
        值得注意的是 :0 "" null undefined NaN //会转换成false  其它都会转换成true
1.5 操作符
    1.5.1 算术运算符 +-/* 
    1.5.2 一元运算符 ++ -- !
    1.5.3 赋值运算符 = += -+ /+ *+
    1.5.4 逻辑运算符 && || 
    1.5.5 关系运算符  > < >=  <=
    1.5.6 相等运算== != !== ===
    1.5.7 优先级 () > 一元> 算术 > 关系 > 逻辑(先&&后||) > 赋值
    不同类型直接操作符号隐式转换
        转换规则:
                  有数字或者boolean 转数字比较 (++ -- 运算符相当于加一 减一所以是转成数字)
                   没有数字和bool 有字符串 转换成字符串
               复杂数据类型比较地址
            其中值得注意是 等等 和 全等的比较转换
                      x                    y                    = =       = = =  

                    0                    false                true     false
                    ""                   false                true     false
                    ""                   0                    true     false
                    "0"                  0                    true     false
                    "17"                 17                   true     false

                    null                 undefined            true     false
                    null                0                    false    false
                    null                 false                false    false
                    undefined            false                false    false
                    0                    NaN                  false    false
                    "foo"                NaN                  false    false
                    NaN                  NaN                  false    false

                    1. null == undefined  返回的是true
                    2. null 和undefined 和其他类型判断相等的时候,不转换类型
                    3. 一般只要有NaN参与的运算,返回都是NaN NaN转换成boolean 是false  .  NaN != NaN 返回的是true;
    
1.6 流程控制语句
    1.6.1 分支结构
          1:if(){...}else {..}
           2.switch (){
            case value:
             break;
             default:
              break;
           }
    1.6.2 三元运算 
        语法: 条件? 表达式1 :表达式2
    1.6.3 循环语句
         for(var i=0;i<10;i++){ 循环体 }
        for(var key in obj){}
        while(条件){循环体 }
       do{ 循环体 }while ( 条件);  //至少执行一次
       
1.7 数组
    1.7.1 创建数组
          1、字面量var arr = [];
          2、构造函数 var arr = new Array();
    1.7.2.数组操作
          通过下标  增删改
1.8 函数
    1.8.1 函数三要素  函数名 参数 返回值
    1.8.2.声明    
        1.字面量 var fn = function(a,b,c){return}
        2.函数声明  function fn(){}
        3.函数调用    函数名()
        arguments对象  每个函数内部都有一个arguments对象与形参对象 成映射关系
1.9.对象
    1.9.1.概念:一类事物的抽象,在编程语言中理解成无序的属性和方法的结合
         创建对象
             1.字面量 var obj = {};
             2.内置构造函数 var obj = new Object();
            3.工厂模式 
                语法:function createP(name, age) {
                        var o = new Object();
                        o.name = name;
                        o.age = age;
                        o.sayUrl= function() {
                           alert(this.age);
                        }
                        return o;
                        }
                    var obj = createP("OTT","18");
            4.自定义构造函数
                语法:function P(name ,age){
                    this.name = name;
                    this.age = age;
                }
           行内约定:一般来说构造函数首字母大写 
    1.9.2 属性操作
         1.通过 点语法 中括号语法操作    
            obj.name 或者 obj["name"]
         2.delete obj.key 删除对象属性
1.10.内置对象
    1.10.1 Array 数组的方法
        array.push(value);//将一个或多个元素添加到数组的结尾,返回length
        array.pop();//从数组中删除最后一个元素 改变了数组的长度  返回被删除的元素
        array.unshift(value);//将一个或多个元素添加到数组的开头 返回length
        array.shift();//从数组中删除第一个元素,改变了数组的长度 返回被删除的元素
        array.reverse();//翻转数组,返回翻转过的数组 原数组不变
        array.sort();//默认排序顺序是根据字符串Unicode码点 可以传函数.sort(function (a,b){return });返回值<=0 位置不变 返回值大于0 交换位置  原数组发生改变
        concat:数组合并,不会影响原来的数组,会返回一个新数组
        join(str);以str将数组连接成字符串 
        slice(begin, end):复制数组的一部分到一个新数组,并返回这个新数组
        splice(begin,num,val); 在begin位置删除num个元素 并将val填补到该位置  返回被踢除的元素 原数组发生改变
        forEach(function(ele,i){ });遍历数组的每一项 无返回值
        map(function(ele,i){ });为数组的每项执行回调函数并将返回值存到数组 返回这个数组 原数组不变 (注意不会忽略数组的 空项(值为null undefined...) 实际上数组的内置对象都不会忽略空项目)
        filter(functiong( ele ,i){});为数组的每项执行回调函数并将返回值为true的项目 存到数组 返回这个数组 原数组不变
        reduce(functin(a,b){ return a;},a);为数组的每项执行回调函数 并将a带入到下次循环 最后返回a  如果不传参数那么默认是前一项 原数组不变
    1.10.2 String 对象
        charAt("要查询的字符")        //获取指定位置处字符
        charCodeAt(index)      //获取指定位置处字符的ASCII码
        indexOf:获取某个字符第一次出现的位置,如果没有,返回-1
        lastIndexOf:从后面开始查找第一次出现的位置。如果没有,返回-1
        trim();//去除字符串两边的空格,内部空格不会去除
        toUpperCase()//全部转换成大写字母
        toLowerCase()//全部转换成小写字母
        concat字符串拼接返回新的字符串 一般都用 + 号
        slice(start,end)包含头不包含尾返回一个新的字符串,end为负值从后往前  原字符串不变 
        substring(start,end)包含头,不包含尾 返回一个新的字符串 原字符串不变
        substr(从start开始,截取length个字符)(推荐)
        split:将字符串分割成数组,原字符串不改变(很常用)
        replace(searchValue, replaceValue)//参数:searchValue:需要替换的值    replaceValue:用来替换的值
    1.10.3 Data 日期对象 创建:var d = new Data();或者 Data.now();
        d.getTime()        // 返回毫秒数和valueOf()结果一样,valueOf()内部调用的getTime()
        d.getMilliseconds() 
        getSeconds()  // 返回0-59
        getMinutes()  // 返回0-59
        getHours()    // 返回0-23
        getDay()      // 返回星期几 0周日   6周6
        getDate()     // 返回当前月的第几天
        getMonth()    // 返回月份,***从0开始***
        getFullYear() //返回4位的年份  如 2016
    1.10.4 Math 算术对象
        Math.PI        // 圆周率
        Math.random()// 生成随机数
        Math.floor()/Math.ceil()// 向下取整/向上取整
        Math.round()// 取整,四舍五入
        Math.abs()    // 绝对值
        Math.max()/Math.min()// 求最大和最小值
        Math.sin()/Math.cos() // 正弦/余弦
        Math.power()/Math.sqrt() // 求指数次幂/求平方根
    内置对象中Math是对象 而其他的是构造函数 需要用new构建
    
1.11 值类型与引用类型
     1.值类型:简单类型,变量在存储的时候,存储的是值本身
    2.引用类型:复杂类型,变量在存储的时候,存储的是对象的地址

2 Web API

2.1 概念
     1.Application Programming Interface,应用程序编程接口
    2.web api 是浏览器提供的一套操作浏览器功能和页面元素的API(BOM和DOM)
2.2 DOM
     1.DOM的概念
         Document Object Model 文档对象模型
         是W3C组织推荐的处理可扩展标记语言的标准编程接口。可以动态地访问程序和脚本,对web文档进行增删改查 。DOM是一种基于树的API文档,它要求在处理过程中整个文档都表示在存储器中
     2.DOM操作
         获取页面元素
              id选择器document.getElementById("id")  通过id获取页面元素 返回一个dom对象
            class选择器 document.getElementsByClassName(""类名)  通过类名获取页面元素 返回一个伪数组 无论的多个元素还是一个元素
            标签选择器  document.getElementsByTageName(“标签名”)  通过标签名获取元素 返回一个伪数组 无论获取是多个还是一个元素
            name属性选择器 document.getElementsByName("name名"); 通过表单元素的name属性获取元素 永远返回一个伪数组
            css选择器 document.querySelector("同css选择器写法") 返回dom元素
                     document.querySelectorAll() 返回伪数组
    2.注册事件
         1.事件三要素
            事件源、事件名、处理方法
         2.注册事件的方式
            元素.onclick = function(){} //重复注册事件后面覆盖前面的
            元素.addEventListener("click",function(){ },boolean)//参数:事件名 回调函数 是否事件冒泡   重复注册事件不会覆盖
                第三个参数默认 false即冒泡传递 当值为true时,事件使用捕获传递
                注意:IE 8 及更早 IE 版本,Opera 7.0及其更早版本不支持
         3.attachEvent(""元素"",function(){},boolean)
            IE8版本之前的方法 事件不会覆盖
    3.移除事件
         1.元素.onclick = null;
            利用null覆盖掉前面的注册事件
         2..removeEventListener("事件名", 函数名, false);
            想要移除事件 那么在之前注册时必须有函数名
            注意:IE 8 及更早 IE 版本,Opera 7.0及其更早版本不支持
         3.detachEvent("onclick", 函数名)  早期IE方法
        
    4.兼容性封装
           1.注册事件
               function addEventListener(element, type, fn) {
                if (element.addEventListener) {
                    element.addEventListener(type, fn, false);
                   } else if (element.attachEvent){
                    element.attachEvent("on" + type,fn);
                 } else {
                    element["on"+type] = fn;
                 }
            };
        2.注册事件
            function removeEventListener(element, type, fn) {
                if (element.removeEventListener) {
                    element.removeEventListener(type, fn, false);
                  } else if (element.detachEvent) {
                  element.detachEvent("on" + type, fn);
                    } else {
                       element["on"+type] = null;
                }
                }
    
    5.属性操作
         1.非表单元素的属性
            href、title、id、src、className、innerHTML和innerText
         2.表单元素的属性
            value 用于大部分表单元素的内容获取(option除外innerText)
            type 可以获取input标签的类型(输入框或复选框等)
            disabled 禁用属性(ture||false)
            checked 复选框选中属性(ture||false)
            selected 下拉菜单选中属性(ture||false)
        3.自定义属性操作
            getAttribute() 获取标签行内属性
            setAttribute() 设置标签行内属性
            removeAttribute() 移除标签行内属性
               与element.属性的区别: 此法获取不到行内添加的自定义属性
            element.属性 是在获取的元素对象上直接添加获取属性删除用
            dellete element.property
        4.样式属性操作
               1.使用style方式设置的样式
                通过此方法设置的样式属性是行内样式
                设置宽高等需要带上“px”
            //ES5新增方法 document.getComputedStyle(元素,null) 获取计算过的属性
        5.类名操作
            1.element.className =“”  设置获取元素的class属性 通过此方法设置类名会覆盖原有类名
              element.removeClass()
            2.//ES5新增方法 element.classList  通过此法设置不会覆盖直接追击
                ele.classList.add();添加
                    .classList.remove();删除
                    .classlist.toggle();切换类名
    6.创建元素
        1.document.write 
        2.element.innerHTML = """";性能较差,一般先进行字符串拼接才添加到页面避免频繁操作
        3.document.createElement("标签名");
        7.节点操作
        1.添加删除克隆 节点方法
           A.appendChild(B)将B元素添加到A元素中 同时将B元素从原来的位置删除
           A.insertBefore(B) 将B元素添加到A元素的起始位置
           A.removeChild(B) 将B元从A元素中移除
           A.replaceChild(B) 替换掉A元素下面的元素
           A.cloneNode()参数boolean类型 表示深度复制 返回
           一个克隆出来的来元素 克隆出来的元素跟原来是元素不关联
           结appendChild使用
        2.选择节点
          parentNode 父元节点
          childNodes 子节点
          children 子元素
          nextSibling/previousSibling 上/下一个兄弟节点
          nextElementsibling/previousElementSibling 上/下一个兄弟元素
          firstChild/lastChild 第一/最后 一个子元素
       8.事件对象
        1.onclick = function (e){e. }
           2.事件对象兼容性处理
                e= e || window.event;
        3.常用事件对象属性
            1. type 获取事件类型
            2. event.screenX/e.screenY 相对屏幕左上角的位置
            3. clientX/clientY  相对浏览器窗口位置 所有浏览器都支持
            4. pageX/pageY  IE8以前不支持,页面位置window.pageX
             5. event.target || event.srcElement 用于获取触发事件的元素
               6. event.preventDefault() 取消默认行为
            7. eventPhase属性可以查看事件触发时所处的阶段
              8. event.stopPropagation();阻止冒泡
               IE低版本 event.cancelBubble = true; 标准中已废弃
        4.事件的三个阶段
               1. 事件的捕获阶段
            2. 事件的目标阶段(触发自己的事件)
            3. 事件的冒泡阶段
            
    9.事件委托
        1.概念:事件委托 给父元素注册事件
            通过e.target || e.srcElement 获取触发事件的元素
2.3 BOM
    2.3.1 概念
        BOM(Browser Object Model) 是指浏览器对象模型,浏览器对象模型提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。BOM由多个对象组成,其中代表浏览器窗口的Window对象是BOM的顶层对象,其他对象都是该对象的子对象
        2.3.2 常用的方法
        alert()提示弹窗
        prompt()弹出输入框
        confirm()弹出选择框
        onload 页面加载事件
        setTimeout()和clearTimeout() 定时器
    2.3.3 window.location对象 常用方法
        1.location.href = "";设置||获取地址浏览   (常用作js实现页面跳转)
        2.location.search 地址栏参数获取
        3.location.reload(); 刷新页面 参数 (true/false)是否强制刷新
        4.url组成
            scheme://host:port/path?query#fragment
                scheme:通信协议  常用的http,ftp,maito等
                    host:主机 服务器(计算机)域名系统 (DNS) 主机名或 IP 地址。
                port:端口号  整数,可选,省略时使用方案的默认端口,如http的默认端口为80。
                path:路径 由零或多个"/"符号隔开的字符串,一般用来表示主机上的一个目录或文件地址。
                query:查询  可选,用于给动态网页传递参数,可有多个参数,用"&"符号隔开,每个参数的名和值用"="符号隔开。例如:name=zs
                fragment:信息片断  字符串,锚点.
    2.3.4.history对象 常用方法
        history.back();返回 跟后退按钮等效
        history.forward();前进
        history.go(1);参数 1前进 -1后退 0当前页面
    2.3.5.navigator对象 常用方法
        userAgent 可以判断用户浏览器的类型
        platform 可以判断浏览器所在的系统平台类型.
    2.3.6.screen对象
           screen.width 屏幕宽度
        screen.height 屏幕高度
        screen.availWidth 浏览器可用宽度
        screen.availHeight 浏览可用高度
    2.3.7.offset家族
        ele.offsetWidth 获取元素宽度height + paddnig + border
        ele.offsetHeight 获取元素高度 (注意:不带单位 只能获取 不能设置)设置通过style.Width
        ele.offsetParent 返回最近的具有非静态定位的父元素
        ele.offsetLeft 获取相对父元素的真实left值  left + margin
        ele.offsetTop 获取相对父元素的真实top值  top + margin
    2.3.8.scroll家族
        ele.scrollHeight 获取自身内容的高度 可能超出盒子大小
        ele.scrollWidth
        ele.scrollLeft 水平滚动条 滚动的距离
        ele.scrollTop  垂直滚动条 滚动的距离
        最常用的是用来获取页面被卷去的宽度和高度
         获取页面滚动距离的兼容性处理
            function scroll() {
                   return {
                    top: window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0,
                    left: window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft || 0
                   };
            }
    2.3.9.client家族
           1.用于获取元素可视区的大小
               ele.clientHeight/.clientWidth  盒子可视区域的大小
            clientleftclienttop 获取border宽度   如果内容没有滚动条clientWidth与scrollWidth相同
           2.获取页面可视区的大小
            window.innerWidth
            window.innerHeight
           //IE678 document.documentElement.clientWidth
           3.页面可视区大小兼容性封装
                function client() {
                 return {
                      width: window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth || 0,
                      height: window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight || 0
                   };
                }

3.面向对象编程

3.1.基本概念
    3.1.1.什么是对象?
        我们常说万物皆对象,很笼统,在计算机中最早在c语言中把具有特定长度的类型,称作为对象类型;后来我们说内存中的一块有效区域叫对象;
        我把对象理解成具有某些属性和方法的变量 而创造出这些变量的抽象叫做类
    3.1.2.什么是面向对象?
        面向对象是一种思想,通过调用对象的某种方法和属性来完成某件事情,当然这个对象是我们创造出来的,我们把可能在多个地方会使用的到的功能赋给对象,在调用
    3.1.3.特性    
        1.封装性  只需要关注对象提供的方法如何使用,而不需要关心对象对象的内部具体实现
        2.继承  一个对象没有的一些属性和方法,另外一个对象有,拿过来用,就实现了继承
        3.多态 指在一棵继承树中的类中可以有多个同名但不同方法体以及不同形参的方法。多态有两种情况:覆盖和重载
3.2.创建的方式
    3.2.1.内置构造函数Object
        var obj = new Object();
    3.2.2.对象字面量
        var obj = {};
    3.2.3.工厂函数
       本质上就是函数内 返回对象
        function p (x,y){
            retrun {name : x,age : y}
        }
    3.2.4.自定义构造函数
        行内通约:首字母大写
        构造函数一定要使用new关键字
            1.new 的作用    
                在内存中开辟空间(对象obj)
                调用构造函数
                让构造函数的this指向新的对象  本质上就是在构造函数中var this = obj;
                返回 this
3.3.原型
    3.3.1.原型基本概念prototype
        1.prototype是一个对象
        2.所有函数自带prototyoe属性
        3.作用:存储公共方法
    3.3.2.构造函数、原型、实例的关系
        1.实例化对象能够访直接问构造函数的prototype
        2.构造函数的.prototype == 实例的.__proto__   原型的constructor 指向构造函数
    3.3.3.__proto__属性 原型连
        1.所有对象都有 __proto__ 指向构造函数的prototype
        2.构造函数的.prototype == 实例的.__proto__  例Array.prototype == [].__proto__
    3.3.4.属性查找原则
        1先在自身寻找
            当实力具有某个属性时自动屏蔽原型对应属性 哪怕属性值为null 通过delete操作符完全删除属性重新指向原型
        2.找不到再沿着__proto__一直往上找 找不到返回undefined
    3.3.5.constructor属性
        1.原型对象prototype 包含constructor 指向构造函数
3.4.原型链
    3.4.1.原型链基本概念
        对象的原型和原型的连接
        Object是顶层对象的构造函数 Object.prototype.__proto__ ==null
        3.4.2.Object.prototype成员
        1.constructor  指向了Object 构造函数
        2.对象.hasOwnProperty(属性)  判断某个属性是否来自实例
             1.""属性""in""对象"" in操作符只要通过对象能够访问的可枚举的属性就返回 true
        3.构造函数.prototype.isPrototypeOf(对象)  确定原型和实例之间是否存在关系
        4.对象.propertyIsEnumerable(属性名) 判断对象的属性是否可枚举 
            注意:只能判断自身属性,原型上的需要用.__proto__.propertyIsEnumerable();
            设置不可枚举属性 Object.defineProperty(对象,属性,{value : "",enumerable : false})
           5.A.isPrototypeof(B),判断A是否在B的原型链上
           6.toString()  当对象需要隐式转换时系统自动调用  返回值 [object 类型]
            常用Object.prototype.toString.call("");做类型判断
        7.toLocaleString() 在没重写的情况下跟toString一样 内置对象Date String ..重新了次方法
        8.valueOf() 返回 将对象转换成简单类型 如果转换不成功 再次调用toString
    3.4.3.Object 内置方法( 函数也是对象也可以内置方法)
        1.Object.keys(对象)返回一个包含所有可枚举属性的字符串数组
           2.Object.getOwnPropertyNames()返回实例的所有属性 无论是否可以枚举
        3.Object.getPrototypeOf(对象) 返回对象的原型
    3.4.4.instanceof运算符  判断对象是否是构造函数的实例

5.继承

5.1.概念
    自己没有的属性、方法 借用别人的
5.2.混入式继承
    通过拷贝 将别人的属性和方法 混入到自身 
    例:
    var ott = {
        name : ""OTT"",
        extend : function (object){
            if(object && (object instanceof Object)){
                for(var key in object){
                    this[key] = object[key];
                }
            }
        }
    };
    ott.extend({});
5.3.原型式继承
    5.3.1.特点:原型定义公共的属性和方法 实例定义自身属性 
    5.3.2.优点:最大程度的节省内存空间 同时还支持参数传递
    例
    function OTT(){
        this.name = ""ott"";
    }
    //改变原型指向
    OTT.prototype = {
        //此法如需要指定constructor 重新指向构造函数
        constructor : OTT,
         say : function (){ ...}
    }
5.4.原型+混入式继承
    不更改 原型指向  在原型上添加extent 方法
5.5.经典继承
    ES5提供Object.create(); 参数对象A 返回一个新对象B B继承自A
    例
    var pp = {x:d};
    var pp = Object.create(pp);
5.6.寄生构造函数模式
    用途 : 一般在特殊的情况下用来为对象创建构造函数
    注意:此模式实例跟构造函数和构造函数的原型没有关系
    例.function Person(name, age){
        var o = new Object();
        o.name = name;
        o.age = age;
        o.sayName = function(){
            alert(this.name);
        };
        return o;
    }
    var p1 = new Person(""Nicholas"", 29);
    p1.sayName(); //""Nicholas""
5.7.稳妥式继承||安全式继承
    用途 用于安全的扩展内置对象
    例
    function MyArray(){ }
    MyArray.prototype = [];
    MyArray.prototypr.push = function (){console.log(""hehe"");}
    var arr = new MyArray();
    arr.push();//hehe
    

6.函数进阶

6.1.定义函数的三种方式
    6.1.1.字面量 var fn = function (){}
    6.1.2.表达式 function fn(){}
    6.1.3.构造函数式:(作用 执行字符串形式的代码 )
        //参数 (arg1,arg2....,函数体) 当只有一个参数式默认为函数体
        //所有参数都必须是字符串
    var fn = new Function(""a"",""a"",""console.log(a+b)"");
    匿名函数自调用 原理将函数变成表达式
    (function (){})();
    (function (){}());
    !function (){}(); //通过运算符将匿名行数变成表达式
6.2.eval 的介绍
    6.2.1 作用 
        1.将字符串当代码执行
        2.将json数据转换成js代码
    6.2.2 利用eval 执行字符串的特性 将JSON数据转换成js对象
        eval(""(""+json+"")"");
    6.2.3.JSON介绍
        概念:JSON是数据格式 用于多语言交换
        对象转换成JSON JSON.stringify(对象) 返回json字符串
        JSON.parse(json) 返回js对象
6.3.函数调用this指向
    6.3.1 函数调用模式  当函数被调用this指向window
        格式 : 函数名();
    6.3.2 方法调用模式  当函数是某个对象的方法this指向该对象
        格式 : obj.fn();
    6.3.3. 构造函数调用模式  this指向新对象
        格式  var obj = new 函数名();
    6.3.4. 方法借调模式 call apply bind
         1. call 作用: 调用函数并指定this指向 
                格式:fn.call(this,arg1,agr2...); 第一个参数如果没有那就是指向window 后面的参数规则和函数一致
         2. 伪数组 扩展
                特点 1、有length属性 
                     2、有下标属性 0 1 2 3....
                      3、不能用数组的方法
                   借调数组push方法
                          Array.prototype.push.call(伪数组,“参数”);
                          ;[].join.call(伪数组,""-"");
        3.apply 
            参数:第一个参数是 this指向
              第二个参数是实参数组 哪怕只有一个实参也必须实参
        4.bind 给函数绑定一个this指向 原函数this指向不变 返回一个指定this的新函数
            格式:var newfn = fn.bing(obj);
6.4 函数也是对象
    1.Function.prototype == fn.__proto__;
        fn.__proto__.__proto__== Object.prototype;
    函数顶层 Funtion.__proto__ == Funtion.prototype
6.5 Function.prototype成员
    1.arguments 实参列表 伪数组 
    2.length 函数形参的长度
    3.name 函数名 函数定义以后不可更改
    4.caller 返回函数 位于哪个函数中
6.6 预解析
    6.6.1 铺垫  
        1. 字面量:(直接量) 从字面能看出值和类型 55 “55”true [] {}
        2.变量: 必须要声明才能使用的存数值的内存空间
            ***浏览器可以直接字面量 而不需要提前声明
    6.6.2 作用 目的
        1.把变量和函数提升到作用域的顶端
        2.开辟存储空间 存储变量
    6.7.3.规则 
            1.全局
                1、将变量声明提升 赋值不提升 同名覆盖
                2、将函数声明 提升整个函数体 同名覆盖
                3、执行代码 执行过程中忽略所有声明 直接赋值
            2.函数 形成在函数执行前 执行结束释放空间
                1、将变量声明和形参提升 赋值不提升 同名覆盖
                2、将形参数和实参值相统一
                3、将函数声明 提升整个函数体 同名覆盖
                4、执行代码 执行过程中忽略所有声明 直接赋值
6.7 作用域与作用域链
    6.7.1 铺垫 :
        全局变量 :定义在全局的变量 全局都可以访问
        局部变量:定义的函数体内部的变量 只有在函数体内可以访问
    6.7.2.作用域概念
            作用域是一条规则 决定变量定义存储在哪里 
            查找变量时在自身作用域链上查找
    6.7.3.作用域链
        1、多层嵌套函数形成的链式关系
        2、作用 存储自身可访问的变量范围
        3、变量查找原则 现在自身作用域查找 查找不到在去自己是作用域链上查找
        4、当整个作用域链都没有时候
            1、如果是调用则报错
            2、如果是赋值操作 那么就在全局创建一个变量并赋值(隐式全局)
6.8 词法作用域
    6.8.1 又叫 静态作用域 
         在函数声明时作用域已经确定 跟函数的调用无关
6.9 递归函数
    1.概念 : 函数内部直接或者间接调用自己叫递归
    2.注意 : 递归一定要有出口[结束条件] 否则超出最大调用栈
6.10 闭包
    1. 概念 将函数A内部的函数B保存到A的外部形成闭包
        格式 当一个函数被保存到外部时一定产生闭包
        function fn1(){
            var num = 1;
            function fn2(){
                 num++;    
                }
            return f2;
        }
        var temp = fn1();
    2 作用 将函数内部的变量保存到函数外部使用
    3 内存问题  垃圾回收
          引用计数 当一个引用类型有零个指针指向的时候 系统会自动回收
        环境标记 进入环境是标记 

7.正则表达式

7.1.正则创建
    7.1.1.概念 : 用于匹配规则的表达式
    7.1.2.作用 :字符串校验
    7.1.3.创建    
        7.1.3.1 构造函数 var reg = new RegExp(/d/,g);
        7.1.3.2 字面量 var reg = /^d/g;
7.2.元字符
    7.2.1 . 除了换行和回车以外的任意字符[^
]
    7.2.2 . 匹配 .
    7.2.3 d 所有的数字字符[0-9]
    7.2.4 D 所有的非数字字符[^0-9]
    7.2.5 w 所有的单词字符 [a-zA-Z0-9_]
    7.2.6 W 所有的非单词字符[^a-zA-Z0-9_]
    7.2.7 s 空字符 [	 
 空格]
    7.2.8 S 非空字符[^	
]
    7.2.9 |或优先级最低 ()表达式优先级最高 []一个字符的范围
        7.2.10 [^]非 ^开始  $结束    /^abc$/精确匹配 必须是同一个单词
    7.2.11.量词
        *  0次或0次以上 {0,}
           +  1次或1次以上 {1,}
        ?  0次或者1次   {0,1}
        {n,m}  出现n到m次
        () $1 $2 表示表达式匹配到的项
7.3.正则匹配
    7.3.1.reg.test(str);
    7.3.2.参数
        g 全局匹配 global
        i忽略大小写ignore
7.4.字符串方法
    7.4.1.str.replace(//g,"""");
    7.5.正则提取
            str.match(reg) 返回数组

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/90316.html

相关文章

  • 史上最全Docker资料推送 ▎ Docker小白进阶大神计划

    摘要:入冬了,寒风呼啸,白雪飘飘,此刻窝在家里学习应当是极好的。为了满足大家的需求,小编火速为大家整理了史上最全的资料。 showImg(https://segmentfault.com/img/remote/1460000007586577?w=900&h=500); 入冬了,寒风呼啸,白雪飘飘,此刻窝在家里学习应当是极好的。为了满足大家的需求,小编火速为大家整理了史上最全的Docker资...

    StonePanda 评论0 收藏0
  • 【进阶3-1期】JavaScript深入之史上最全--5种this绑定全面解析

    摘要:在严格模式下调用函数则不影响默认绑定。回调函数丢失绑定是非常常见的。因为直接指定的绑定对象,称之为显示绑定。调用时强制把的绑定到上显示绑定无法解决丢失绑定问题。 (关注福利,关注本公众号回复[资料]领取优质前端视频,包括Vue、React、Node源码和实战、面试指导) 本周正式开始前端进阶的第三期,本周的主题是this全面解析,今天是第9天。 本计划一共28期,每期重点攻克一个面试重...

    xavier 评论0 收藏0
  • 怒肝1.5万字——史上最全C语言文件操作详解

    摘要:二什么是文件磁盘上的文件就是文件。文件指针变量定义是一个指向类型数据的指针变量。表示向何种流中输出,可以是标准输出流,也可以是文件流。文件结构体指针,将要读取的文件流。 ...

    Alfred 评论0 收藏0
  • JavaScript数组去重(12种方法,史上最全

    摘要:数组去重,一般都是在面试的时候才会碰到,一般是要求手写数组去重方法的代码。如果是被提问到,数组去重的方法有哪些你能答出其中的种,面试官很有可能对你刮目相看。数组去重的方法一利用去重中最常用不考虑兼容性,这种去重的方法代码最少。 数组去重,一般都是在面试的时候才会碰到,一般是要求手写数组去重方法的代码。如果是被提问到,数组去重的方法有哪些?你能答出其中的10种,面试官很有可能对你刮目相看...

    rozbo 评论0 收藏0
  • 史上最全的并发编程学习

    一:线程基础知识 1.并发编程的基本概念 2. 线程的基本操作 3.线程之间的通信wait和notify 4.join和yield以及sleep详解 5. synchronized关键字讲解 6. volatile原理 7. 线程组 8.线程优先级 9.守护线程 10.ThreadLocal 二:JDK并发包 1.jdk并发工具类 重入锁 信号量 读写锁 CountDownLatch cyclic...

    qylost 评论0 收藏0

发表评论

0条评论

junbaor

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<