前言
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:重要的还是多实践!!!
附上表单的相关练习与应用