javaScript核心知识点

 

 

一、JavaScript 简介

        一、JavaScript语言的介绍：JavaScript是基于对象和原型的一种动态、弱类型的脚本语言

        二、JavaScript语言的组成：JavaScript是由核心语法(ECMAScript)、文档对象模型(DOM)、浏览器对象模型(BOM)组成的

        三、JavaScript语言的应用：实现页面表单验证以及页面交互特效，基于Node.js技术进行服务器端编程等

 

二、JavaScript ECMAScript

        一：基础语法

                  一：变量

                        1. 变量的声明

                               1. var变量：var 变量名 = 值;

                               2. let变量：let 变量名 = 值;

                               3. const变量：const 变量名 = 值;

 

                         2. 变量的作用域

                                1. 全局作用域：代码中任何地方都能访问到

                                2. 局部作用域：在固定的代码片段内可访问到

 

                         3. 变量提升：变量在声明之前就访问，var会使用默认值undefined，而let会直接报错

                         4. var、let、const区别

                              

 

                                           

                 二：运算符

                        1. 算数运算符：加(+)，减(-)，乘(*)，除(/)，求余(%)

                        2. 赋值运算符：=，+=，-=，*=，%=

                        3. 关系运算符：>，<，>=，<=，==(只比较值)，!=，===(值和数据类型都比较)

                        4. 逻辑运算符：[&&，||](只有左侧满足才计算右侧)，！,[&，|](不管左侧结果如何，都要计算右侧)

                        5. 三目运算符：(表达式) ? 值1，值2；

 

                 三：流程控制语句

                        1. 条件分支语句：if语句，switch语句

                        2. 循环语句：while循环，do while循环，for循环，for-in循环

 

        二：数据类型

                 一：原始类型(基本类型)：值不可变(原始值)

                        1. Undefined类型：只有一个值undefined，表示未初始化或未声明的变量，因此我们应该对变量显示的初始化(不要是undefined)

                        2. Null类型：只有一个值null，表示一个空指针对象，因此我们应该将保存对象的变量初始化为null

                        3. Boolean类型：只有true和false两个值

                        4. Number类型：表示所有的数值类型，数值范围在(Number.MIN_VALUE~Number.MAX_VALUE)之间，超出范围会自动转化为

                           [-+]Infinity(无穷)，NaN是一个非数值

                        5. String类型:  表示一个字符串，其他类型可以使用toString方法转为字符串

                        6. Symbol类型：表示一个符号，符号类型是唯一的并且是不可修改的

 

                 二：引用类型：值可变

                        1. 概念：引用类型是一种数据结构，用于将数据和功能组织在一起

                        2. 常见引用类型：对象（Object）、数组（Array）、函数（Function）、正则（RegExp）和日期（Date）等

 

        三：函数

               一：函数概述

                        1. 函数的概念：具有独立功能的代码块。在js中使用function关键字定义函数

                        2. 函数的作用：让代码结构更加清晰，提高代码重用性和可移植性

                        3. js函数的分类：自定义函数和系统函数

 

               二：自定义函数

                        1. 函数的创建和调用

                             1. 函数的创建方式：函数声明、函数表达式、函数构造函数、属性函数

                             2. 函数的调用方式：函数调用模式、方法调用模式、构造器调用模式、apply调用模式

 

 

                       2. 匿名函数

                            1. 概念及作用：没有名字的函数，创建闭包，避免造成全局变量的污染

                            2. 使用场景：函数表达式、对象属性、事件及其参数，返回值

                            3. 匿名自执行函数

                                  1. 概念：匿名函数的定义完成后立即执行，执行函数表达式

                                  2. 作用：实现闭包和创建独立的命名空间

                                  3. 使用：分组操作符()，void操作符，~操作符，!操作符等等

 

 

                三：系统函数(内置函数)

                          1. 常规函数

                                     

 

 

                       2. 数组函数

                                                                   

 

 

 

                       3. 日期函数

                                   

 

                                 

                       4. 数学函数

                                    

 

 

                       5. 字符串函数

                                         

 

 

 

        四：面向对象

                   一：js面向对象概述

                        js是基于原型，基于面向对象编程也即OOP(Object Oriented Programming)，它没有类的概念，而是直接使用对象来编程

 

                二：js创建对象的方式

                        1. 创建Object实例和对象字面量

                               缺点：重复实例化对象时代码冗余高

 

                        2. 工厂模式

                              1. 优点：解决重复实例化对象的问题
                              2. 缺点：无法识别对象的类型，因为所有的实例指向一个原型(Object)

 

                       3. 构造函数模式

                             1. 优点：实例可以识别为一个特定的类型，解决工厂模式的缺点
                             2. 缺点：多个实例重复创建方法，无法共享

 

                       4. 原型模式

                             1. 优点：方法不会被重复创建，解决了构造函数模式的缺点
                             2. 缺点：所有实例共享它的属性和方法，不能传参和初始化属性值

 

                       5. 混合模式(3+4)推荐

                             1. 优点：构造函数共享实例属性，原型共享方法和想要共享的属性，可传递参数，初始化属性值
                             2. 缺点：基本没有

 

 

                三：原型和原型链

                       1. 原型对象

                              1. 函数对象都具有prototype属性，它指向函数的原型对象(浏览器内存创建的对象)，原型对象都具有constructor属性，它指向

                                  prototype属性所在的函数对象(构造函数)。

                              2. 当调用构造函数创建一个实例后，该实例会有一个隐藏属性__proto__ ([[prototype]] )，它指向构造函数的原型对象。  

                              3. 所有构造函数的prototype都是object类型，而Function的prototype是一个空函数，所有内置函数的_proto_指向这个空函数。

                              4. 为实例添加一个属性时，这个属性会屏蔽原型对象中的同名属性(不会重写)，若想访问原型对象中的属性值，需要使用delete将

                                  这个同名属性在实例中彻底删除

                              5. hasOwnProperty("属性名")可以检测一个属性是存在于实例还是原型对象中，true表示存在于实例中，false表示存在于原型对象中

                              6. in操作符用来判断一个属性是否存在于这个对象中(无论是实例还是原型对象)

                              7. 当使用对象字面量来重写原型对象时，会改变其constructor属性，使其指向Object构造函数，而不是原有的对象

 

 

             

                       2. prototype和__proto__的区别

                                    1. prototype属性只有函数对象有，而__proto__属性所有对象都有

                             2. prototype是由函数对象指向原型对象，而__proto__属性是由实例指向函数对象的原型对象

                             

                       3. 原型链：将父类型的实例作为子类型的原型对象，以此构成的链式关系叫做原型链

                                     

          

 

                四：继承

                          1. 原型链继承

                              1. 优点：父类原型定义的属性和方法可以复用
                              2. 缺点：子类实例没有自己的属性，不能向父类传递参数

 

                       2. 构造函数继承

                              1. 优点：子类实例有自己的属性，可以向父类传递参数，解决原型链继承的缺点
                              2. 缺点：父类原型的属性和方法不可复用

 

                       3. 组合继承(推荐1)

                              1. 优点：原型的属性和方法可以复用，每个子类实例都有自己的属性。
                              2. 缺点：父类构造函数调用了两次，子类原型的中的父类实例属性被子类实例覆盖

 

                        4. 寄生组合式继承(推荐2)

                               1. 优点：解决了组合继承的缺点，效率高
                               2. 缺点：基本没有

 

 

                           5. class继承

                              1. class类中的方法是原型方法不用function声明
                              2. 子类的__proto__属性指向父类，表示构造函数的继承
                              3. 子类的原型的__proto__指向父类的原型，表示方法的继承
                              4. class类可以继承Object和null

 

 

 

        五：正则表达式    

                 一：概述

                           正则表达式(regular expression)描述了一种字符串匹配的模式（pattern），通常被用来检索、替换那些符合某个模式(规则)的文本。

 

                 二：语法

                                      

 

                 三：js正则表达式     

 

      

                   四：常用正则表达式

                         1. 校验邮箱：[\\w!#$%&'*+/=?^_`{|}~-]+(?:\\.[\\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\\w](?:[\\w-]*[\\w])?\\.)+[\\w](?:[\\w-]*[\\w])?

                         2. 校验手机号：^1([38][0-9]|4[579]|5[^4]|6[6]|7[0135678]|9[89])\\d{8}$

                         3. 身份证：

                                1. 15位：^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$

                                2. 18位：^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{4}$

        4.日期和时间：^[1-9]\d{3}-(0[1-9]|1[0-2])-(0[1-9]|[1-2][0-9]|3[0-1])\s+(20|21|22|23|[0-1]\d):[0-5]\d:[0-5]\d$

 

 三、JavaScript DOM

        一：简介

               一：概念：文档对象模型（Document Object Model，简称DOM），是针对HTML和XML文档的一个API（应用程序接口），将 HTML 文档呈现为带有元素、属性和文本的树结构，即节点树

                 二：作用：JavaScript通过DOM能够改变页面中所有的HTML 元素、属性和 CSS 样式，并对页面中所有事件做出响应。

                   三：结构图

                                 

 

        二：节点树

               一：节点类型及属性

                         

 

 

               二：文档节点(Document对象)

                            

                       

                         

 

 

 

              三：元素节点(Element对象)

                             

 

 

               四：属性节点(Attr对象)

                            

 

 

                 五：文本节点(Text)

                             

                 

 

        三：事件

               一：概述

                         事件一般是用于浏览器和用户操作进行交互，当用户执行某些操作的时候才会执行特定的代码，例如单击图片等

 

                 二：事件流

                        1. 概述：事件发生时会在元素节点与根节点之间按照特定的顺序传播，路径所经过的所有节点都会收到该事件，这个传播过程即DOM事件流

                                 

 

                        2. 捕获阶段

                                捕获阶段处于事件流的第一阶段，开始于Document，结束于目标阶段，主要作用是捕获截取事件。

 

 

                        3. 目标阶段

                                目标阶段处于事件流的第二阶段，具有双重范围，即捕获阶段的结束，冒泡阶段的开始，主要作用是执行绑定事件。

 

                        4. 冒泡阶段

                                冒泡阶段处于事件流的第三阶段，开始于目标元素，结束于Document，主要作用是将目标元素绑定事件执行的结果返回给浏览器，

                                处理不同浏览器之间的差异。

 

 

                 三：事件处理程序

                        1. HTML事件处理程序

                              1. 优点：事件处理程序中的代码，能够访问全局作用域中的任何变量

                              2. 缺点：时差问题、扩展的作用域链在不同浏览器中会导致不同结果、html代码与js代码高度耦合

 

                        2. DOM0级事件处理程序

                              1. 优点：简单和浏览器兼容性好，解决了html代码和js代码的高度耦合

                              2. 缺点：一个元素只能绑定一个事件处理函数，只会在事件冒泡中运行

 

                        3. DOM2级事件处理程序   

                              1. 优点：同时支持事件处理的捕获和冒泡阶段，并且一个元素可以绑定多个处理函数

                              2. 缺点：IE不支持

 

                        4. 跨浏览器处理程序

                              1. 优点：继承了DOM2级事件处理程序的优点，并且可以解决其缺点

 

 

                 四：事件处理函数

                        1. 鼠标键盘事件

                                         

 

 

 

                        2. 页面窗口事件

                                 

 

 

                        3. 表单事件

                                      

 

 

四、JavaScript BOM

        一：简介

               一：概念：浏览器对象模型（Browser Object Model，简称BOM），描述与浏览器进行交互的方法和接口，和网页内容无关

                 二：作用：管理窗口和窗口之间的通讯

                 三：结构图

                       

 

        二：window对象

                一：概述

                           BOM的核心对象就是window，window对象也是BOM的顶级对象，所有浏览器都支持window对象，它代表的是浏览器的窗口。JavaScript的所有全局对象、

                           全局方法和全局变量全都自动被归为window对象的方法和属性，在调用这些方法和属性的时候可以省略window

 

                 二：属性和方法

                            

 

 

   

     三：其他对象

            一：frames                    

                          如果页面包含框架，则每个框架都有自己的window对象，并且保存frames集合中，可以通过数值索引或框架名称来访问相应的window对象

 

            二：history

                      history对象保存着用户上网的历史记录，从窗口被打开的一刻算起

                          back( )：加载 history 对象列表中的前一个URL

                          forward( )：加载 history 对象列表中的下一个URL

            三：location

                      location对象提供了与当前窗口加载的文档有关的信息，还提供了一些导航功能

                          replace()方法：用户不能回到前一个页面

                          reload()方法：重新加载当前显示的页面

            四：screen

                     screen对象基本上只用来表明客户端的能力，其中包括浏览器窗口外部的显示器的信息，如像素宽度和高度等

 

            五：navigator

                     navigator属性通常用于检测显示网页的浏览器类型。可以使用plugins数组检测浏览器是否安装了特定的插件

                            plugins数组的属性：

                               name：插件名字              

                               description：插件的描述

                               filename：插件的文件名    

                               length：插件所处理的MIME类型数量