JavaScript学习总结

  前言

        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 文档中的不同内容	在网页中定义的任何对象、变量和函数，都以window作为其global对象。BOM的核心是window对象，而window对象又具有双重角色，它既是通过 js 访问浏览器窗口的一个接口，又是一个**Global（全局）对象**。
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	原型属性不会被共享 可以继承父类的原型链上的属性和方法 调用了1次Parent（）不会在child的prototype上添加了父类的属性和方法	Child.prototype的原始属性和方法会丢失

六、思维导图

tips：重要的还是多实践！！！

附上表单的相关练习与应用