做网站温州设计一套网站费用
前言
JavaScript的学习花的时间比较长，如何进行正确的学习？今天进行总结与整理。
首先，明确JavaScript是什么？它的结构框架是什么，有哪些操作与组成部分。
其次，通过案例实践，清楚达到什么效果，用到哪些知识内容。
然后，边实践案例的时候，边总结知识点，对比联系与区别。
最后，通过案例实践，融合自己的理解总结思维导图。
一、JavaScript
1.是什么？
JavaScript 是一种高级的、解释执行的编程语言，主要用于构建网页和应用的交互界面。它允许开发者实现网页的动态效果和响应用户行为，同时也被用于服务器端编程、移动应用开发等多种平台。
2.如何实现
（1）基础的语法知识
（2）BOM（Browse Object Model）——浏览器对象模型字节顺序标记
（3）DOM（Documen Object Model）——文档对象模型
二、基础语法
1.变量的三种声明方式
| var | let | const | |
| 作用域 | 函数作用域或全局作用域（如果在函数外声明） | 具有块级作用域（block scope） | 块级作用域 |
| 变量提升 | 发生，提升到顶部 | 发生，不会被初始化（在代码执行声明之前，不可访问） | 发生，提升到顶部，（在代码执行声明之前，不可访问—“暂时性死区”） |
| 重复声明 | 重复声明同一个变量 | 在同一个作用域中，let不允许重新声明已经存在的变量。 | 在相同作用域内，不允许重复声明变量。 |
| 重新赋值 | 可以 | 该变量不能重复声明 | 该变量不能被重新赋值，它们必须在声明时初始化，并且声明后值是固定的。但是，如果const变量指向的是一个对象或数组，那么对象或数组的内容是可以被修改的。 |
2.对象与函数
| 特性 | 函数 (Function) | 对象 (Object) |
| 定义 | 使用 function 关键字或函数表达式定义 | 使用对象字面量或 new Object() 构造函数定义 |
| 本质 | 可执行的代码块，拥有调用执行的能力 | 键值对的集合，存储数据和可能包含方法（函数） |
| 属性 | 可以拥有属性，如 name, length 等 | 可以拥有任意数量的自定义属性和方法 |
| 方法 | 可以拥有方法，即属性值为函数 | 可以拥有方法，即属性值为函数 |
| 调用 | 使用圆括号 调用 | 通过点符号或方括号访问属性和方法 |
| 原型 | 拥有一个 prototype 属性，用于原型链继承 | 拥有一个 prototype 属性，用于原型链继承 |
| 构造函数 | 可以用作构造函数，使用 new 关键字创建新实例 | 可以用作构造函数，使用 new 关键字创建新实例 |
| instanceof | 函数的实例会返回 true 当使用 instanceof 操作符检查该函数 | 对象的实例会返回 true 当使用 instanceof 操作符检查该对象的构造函数 |
| this | 在函数调用时，this 指向调用它的上下文 | 在对象方法中，this 指向该对象 |
| 闭包 | 可以形成闭包，捕获外部函数的变量 | 不直接形成闭包，但可以包含形成闭包的函数 |
| 箭头函数 | 不绑定自己的 this，arguments，super 或 new.target | 不适用 |
| 词法作用域 | 有自己的词法作用域 | 不直接拥有词法作用域，但可以包含拥有词法作用域的函数 |
3、this是什么？如何使用？
| 应用场景 | 对象方法 | 构造函数 | 事件 |
| 指向 | 该方法的对象，严格情况下，this是undefined | 指向新创建的对象，构造函数的功能是初始化新对象 | 接收事件的元素，触发事件的DOM元素 |
改变this指向
| call | apply | bind | |
| 传递参数 | 接受参数列表 | 接受一个参数数组 | |
| 作用 | 改变函数执行时this的指向 | 返回一个新的函数，并且函数的this永远绑定为指定的对象。 | |
| 使用场景 | this 指向 |
| 全局作用域 | 在非严格模式下指向 window，严格模式下是 undefined |
| 对象方法 | 指向调用该方法的对象 |
| 构造函数 | 指向新创建的对象 |
| 箭头函数 | 继承自定义时的外部作用域 this |
| 事件处理器 | 指向触发事件的 DOM 元素 |
| call/apply | 显式指定的 this 值 |
| bind | 返回绑定了指定 this 的新函数 |
三、什么是DOM与BOM
| DOM | BOM | |
| 是什么 | Documen Object Model——文档对象模型 | Browse Object Model——浏览器对象模型字节顺序标记 |
| 作用 | 用来获取或设置文档中标签的属性 | 用来获取或设置浏览器的属性、行为 |
| 特点 | 树状结构，文档中的元素被表示为节点，并按照树状结构进行组织 | 以浏览器窗口为中心，包括一些与浏览器窗口相关的对象 |
| where | 文档内容的操作和交互 | 浏览器窗口和浏览器的交互 |
| how | HTML 文档的层次结构被抽象为一个 DOM 树，这个树结构的每一个子节点表示 HTML 文档中的不同内容 | 在网页中定义的任何对象、变量和函数，都以 |
| why | 为了操作文档出现的接口 | 为了控制浏览器的行为而出现的接口 |
四、JScript与javascript
| JScript | JavaScript | |
| 是什么 | 微软开发的一种脚本语言，主要用于扩展微软的Internet Explorer浏览器的功能 | 一种被广泛支持的脚本语言，用于实现网页的动态效果和交互功能 |
| 设计理念 | 满足特定平台（如Windows）的需求 | 实现跨平台的兼容性 |
| 执行环境 | 主要在微软的Internet Explorer浏览器中运行 | 跨平台的脚本语言，被主流浏览器支持，也能在服务器端执行 |
| 支持功能与生态环境 | 用于特定的微软平台，它包含一些专为这些平台设计的特有功能和对象，如对ActiveX控件的支持 | 一系列基于JavaScript的框架和库被开发出来,拥有一个更为广泛和丰富的生态系统 |
| 适用环境 | Windows操作系统紧密相关，并且在Internet Explorer浏览器中得到广泛支持 | 常用于跨平台的Web应用程序开发，并且在各种浏览器中都有很好的兼容性。 |
| 区别 | 微软开发的一种脚本语言 | 由Netscape公司开发 |
| JScript对COM对象（Component Object Model）的支持更好，这使得开发人员可以与Windows系统的其他组件进行交互 | JavaScript则提供了丰富的库和框架，用于构建交互式用户界面和实现各种功能。 |
五、高级使用
原型链的四种继承方式
| 继承方式 | 是什么 | 怎么用 | 优点 | 缺点 |
| 原型链继承 |
| 包含引用类型值的原型属性会被所有实例共享 | ||
| 构造函数继承 | 子类中执行父类型构造函数 | call或apply方法 | 原型的属性不会被共享 | 不能继承父类prototype上的属性 |
| 组合继承=原型链继承+构造函数继承 |
| 调用了两次Parent（） 他在child的prototype上添加了父类的属性和方法 | ||
| 寄生组合继承 |
Object.create()，创建一个空的对象，这个对象会指定prototype |
| Child.prototype的原始属性和方法会丢失 |
六、思维导图
tips：重要的还是多实践！！！
附上表单的相关练习与应用
