JavaScript学习小总结_js上课小结-CSDN博客

本文链接：https://blog.csdn.net/m0_63725847/article/details/126797988

前言

学习前端语言JavaScript的小总结
（省略部分JavaScript与其他语言相似的基础语法和一些使用时可再去查阅的语法）

一、JavaScript简介

百度百科：JavaScript（简称“JS”）是一种具有函数优先的轻量级，解释型或即时编译型的编程语言。虽然它是作为开发Web页面的脚本语言而出名，但是它也被用到了很多非浏览器环境中，JavaScript 基于原型编程、多范式的动态脚本语言，并且支持面向对象、命令式、声明式、函数式编程范式。

二、部分知识

1 编写位置

1.1 标签引用

在HTML中在script标签中编写JavaScript代码

<script>
    alert("Hello,World!");
</script>

1.2 文件引用

在一个单独的js文件中也可以编写JavaScript代码，然后在HTML文件中使用script标签进行引用

main.html

<script src="main.js"></script>

main.js

alert("Hello,World!");

2 基础语法

2.1注释

单行注释：// 注释内容

//单行注释

多行注释：/* 注释内容 */

/* 多行注释 */

/* 
 * 多行注释
 */

2.2 标识符

所谓标识符，就是指给变量、函数、属性或函数的参数起名字。

标识符可以是按照下列格式规则组合起来的一或多个字符：

第一个字符必须是一个字母、下划线（ _ ）或一个美元符号（ $ ）。
其它字符可以是字母、下划线、美元符号或数字。
按照惯例，ECMAScript 标识符采用驼峰命名法。
标识符不能是关键字和保留字符。

关键字：
请添加图片描述
保留字符：

其它不建议使用的标识符：

2.3 变量声明

ES5中使用var关键字声名变量

使用 var 声明变量但未对其加以初始化时，变量的值是 undefined

ES6中可以使用let，const关键字声名变量

let 声明的变量有几个特点：

不允许重复声明
块儿级作用域
不存在变量提升
不影响作用域链

const 声明有以下特点：

不允许重复声明
块儿级作用域
声明必须赋初始值
值不允许修改
标识符一般为大写

2.4 数据类型

JavaScript中一共有6种数据类型，变量可能包含两种不同数据类型的值：基本数据类型和引用数据类型。

5种基本数据类型：

字符串型（String）
数值型（Number）
布尔型（Boolean）
undefined型（Undefined）
null型（Null）

基本数据类型的值是无法修改的，是不可变的。

基本数据类型的比较是值的比较，也就是只要两个变量的值相等，我们就认为这两个变量相等。

对象型（Object）
引用类型的值是保存在内存中的对象。

当一个变量是一个对象时，实际上变量中保存的并不是对象本身，而是对象的引用。

当从一个变量向另一个变量复制引用类型的值时，会将对象的引用复制到变量中，并不是创建一个新的对象。

这时，两个变量指向的是同一个对象。因此，改变其中一个变量会影响另一个。

2.5 对象基础

2.5.1 创建对象

第一种方式：

var person = new Object();
person.name = "xxj";
person.age = 20;
console.log(person);

第二种方式：

var person = {
    name: "xxj",
    age: 20
};
console.log(person);

用工厂方法创建对象

// 使用工厂模式创建对象
function createPerson(name, age) {
    // 创建新的对象
    var obj = new Object();
    // 设置对象属性
    obj.name = name;
    obj.age = age;
    // 设置对象方法
    obj.sayName = function () {
        console.log(this.name);
    };
    //返回新的对象
    return obj;
}

var person1 = createPerson("a", 1);
var person2 = createPerson("b", 2);
var person3 = createPerson("c", 3);

console.log(person1);
console.log(person2);
console.log(person3);

用构造函数创建对象

// 使用构造函数来创建对象
function Person(name, age) {
    // 设置对象的属性
    this.name = name;
    this.age = age;
    // 设置对象的方法
    this.sayName = function () {
        console.log(this.name);
    };
}
//构造函数需要使用new关键字来调用
var person1 = new Person("a", 1);
var person2 = new Person("b", 2);
var person3 = new Person("c", 3);

console.log(person1);
console.log(person2);
console.log(person3);

也将一个构造函数称为一个类。将通过一个构造函数创建的对象，称为是该类的实例

2.5.2 访问属性

第一种方式：使用 . 来访问

对象.属性名

第二种方式：使用 [] 来访问

对象[‘属性名’]

2.6 栈和堆

JavaScript在运行时数据是保存到栈内存和堆内存当中的。

栈内存用来保存变量和基本类型，堆内存是用来保存对象。

声明一个变量时，在栈内存中创建了一个空间用来保存变量。

基本类型在栈内存中直接保存，引用类型则在堆内存中保存，变量中保存的是对象在堆内存中的地址。

2.7 函数

使用函数对象创建函数

var 函数名 = new Function("执行语句");

使用函数声明创建函数

function 函数名([形参1,形参2,...,形参N]) {
    语句...
}

使用函数表达式创建函数

var 函数名  = function([形参1,形参2,...,形参N]) {
    语句....
}

函数调用

函数名();//无参
函数名(形参1,形参2,...,形参N);//有参

函数返回值用return

2.8 this

解析器在调用函数每次都会向函数内部传递进一个隐含的参数，这个隐含的参数就是this，this指向的是一个对象，这个对象我们称为函数执行的上下文对象，根据函数的调用方式的不同，this会指向不同的对象

以函数的形式调用时，this永远都是window
以方法的形式调用时，this就是调用方法的那个对象

2.9 原型和原型链

我们所创建的每一个函数，解析器都会向函数中添加一个属性prototype，这个属性对应着一个对象，这个对象就是我们所谓的原型对象，即显式原型，原型对象就相当于一个公共的区域，所有同一个类的实例都可以访问到这个原型对象，我们可以将对象中共有的内容，统一设置到原型对象中。
如果函数作为普通函数调用prototype没有任何作用，当函数以构造函数的形式调用时，它所创建的对象中都会有一个隐含的属性，指向该构造函数的原型对象，我们可以通过__proto__（隐式原型）来访问该属性。当我们访问对象的一个属性或方法时，它会先在对象自身中寻找，如果有则直接使用，如果没有则会去原型对象中寻找，如果找到则直接使用。
访问一个对象的属性时，先在自身属性中查找，找到返回，如果没有，再沿着__proto__这条链向上查找，找到返回，如果最终没找到，返回undefined，这就是原型链，又称隐式原型链，它的作用就是查找对象的属性(方法)。请添加图片描述

2.10 对象继承

JavaScript中没有类的概念，是通过原型（prototype）的方式来实现面向对象编程的。

实现继承有一个最大的好处是子对象可以使用父对象的属性和方法，从而简化代码。

JavaScript有六种对象继承方式：

原型链继承：子类型的原型为父类型的一个实例对象
借用构造函数继承：使用.call()和.apply()将父类构造函数引入子类函数，使用父类的构造函数来增强子类实例，等同于复制父类的实例给子类
组合继承：原型链+借用构造函数的组合继承
原型式继承
寄生式继承
寄生组合式继承

3 DOM

3.1 DOM概念

当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）
请添加图片描述
HTML DOM 是关于如何获取、更改、添加或删除 HTML 元素的标准

3.2 DOM节点

常用节点分为四类：

文档节点：整个HTML文档
元素节点：HTML文档中的HTML标签
属性节点：元素的属性
文本节点：HTML标签中的文本内容

3.3 DOM文档操作

3.3.1 查找HTML元素

document.getElementById(id)——通过元素 id 来查找元素
document.getElementsByTagName(name)——通过标签名来查找元素
document.getElementsByClassName(name)——通过类名来查找元素
document.querySelector(CSS选择器)——通过CSS选择器选择一个元素
document.querySelectorAll(CSS选择器)——通过CSS选择器选择多个元素

3.3.2 获取HTML的值

元素节点.innerText——获取 HTML 元素的 inner Text
元素节点.innerHTML——获取 HTML 元素的 inner HTML
元素节点.属性——获取 HTML 元素的属性值
元素节点.getAttribute(attribute)——获取 HTML 元素的属性值
元素节点.style.样式——获取 HTML 元素的行内样式值

3.3.3 改变 HTML 的值

元素节点.innerText = new text content——改变元素的 inner Text
元素节点.innerHTML = new html content——改变元素的 inner HTML
元素节点.属性 = new value——改变 HTML 元素的属性值
元素节点.setAttribute(attribute, value)——改变 HTML 元素的属性值
元素节点.style.样式 = new style—— 改变 HTML 元素的行内样式值

3.3.4 修改 HTML 元素

document.createElement(element)——创建 HTML 元素节点
document.createAttribute(attribute)——创建 HTML 属性节点
document.createTextNode(text)——创建 HTML 文本节点
元素节点.removeChild(element)——删除 HTML 元素
元素节点.appendChild(element)——添加 HTML 元素
元素节点.replaceChild(element)——替换 HTML 元素
元素节点.insertBefore(element)——在指定的子节点前面插入新的子节点

3.4 DOM文档事件

3.4.1 窗口事件

onblur——当窗口失去焦点时运行脚本
onfocus——当窗口获得焦点时运行脚本
onload——当文档加载之后运行脚本
onresize——当调整窗口大小时运行脚本
onstorage——当 Web Storage 区域更新时（存储空间中数据发生变化时）运行脚本

3.4.2表单事件

onblur——当元素失去焦点时运行脚本
onfocus——当元素获得焦点时运行脚本
onchange——当元素改变时运行脚本
oninput——当元素获得用户输入时运行脚本
oninvalid——当元素无效时运行脚本
onselect——当选取元素时运行脚本
onsubmit——当提交表单时运行脚本

3.4.3 键盘事件

onkeydown——当按下按键时运行脚本。
onkeyup——当松开按键时运行脚本。
onkeypress——当按下并松开按键时运行脚本。

3.4.4鼠标事件

onclick——当单击鼠标时运行脚本
ondblclick——当双击鼠标时运行脚本
onmousedown——当按下鼠标按钮时运行脚本
onmouseup——当松开鼠标按钮时运行脚本
onmousemove——当鼠标指针移动时运行脚本
onmouseover——当鼠标指针移至元素之上时运行脚本，不可以阻止冒泡
onmouseout——当鼠标指针移出元素时运行脚本，不可以阻止冒泡
onmouseenter——当鼠标指针移至元素之上时运行脚本，可以阻止冒泡
onmouseleave——当鼠标指针移出元素时运行脚本，可以阻止冒泡
onmousewheel——当转动鼠标滚轮时运行脚本
onscroll——当滚动元素的滚动条时运行脚本

3.5 事件冒泡

事件的冒泡（Bubble）：所谓的冒泡指的就是事件的向上传导，当后代元素上的事件被触发时，其祖先元素的相同事件也会被触发，在开发中大部分情况冒泡都是有用的，如果不希望发生事件冒泡可以通过事件对象来取消冒泡。

3.6 事件委派

我们希望只绑定一次事件，即可应用到多个的元素上，即使元素是后添加的，我们可以尝试将其绑定给元素的共同的祖先元素，也就是事件的委派。事件的委派，是指将事件统一绑定给元素的共同的祖先元素，这样当后代元素上的事件触发时，会一直冒泡到祖先元素，从而通过祖先元素的响应函数来处理事件。事件委派是利用了事件冒泡，通过委派可以减少事件绑定的次数，提高程序的性能。

3.7 事件传播

事件传播分为三个阶段：

捕获阶段：在捕获阶段时从最外层的祖先元素，向目标元素进行事件的捕获，但是默认此时不会触发事件
目标阶段：事件捕获到目标元素，捕获结束开始在目标元素上触发事件
冒泡阶段：事件从目标元素向它的祖先元素传递，依次触发祖先元素上的事件

4 BOM

浏览器对象模型（Browser Object Model (BOM)），常见的BOM对象如下：

Window：代表的是整个浏览器的窗口，同时window也是网页中的全局对象
Navigator：代表的当前浏览器的信息，通过该对象可以来识别不同的浏览器
Location：代表当前浏览器的地址栏信息，通过Location可以获取地址栏信息，或者操作浏览器跳转页面
History：代表浏览器的历史记录，可以通过该对象来操作浏览器的历史记录，由于隐私原因，该对象不能获取到具体的历史记录，只能操作浏览器向前或向后翻页，而且该操作只在当次访问时有效
Screen：代表用户的屏幕的信息，通过该对象可以获取到用户的显示器的相关的信息
这些BOM对象在浏览器中都是作为window对象的属性保存的，可以通过window对象来使用，也可以直接使用。

5 Exception

当错误发生时，JavaScript 提供了错误信息的内置 error 对象，error 对象提供两个有用的属性：name 和 message。

error 的 name 属性可返回六个不同的值：

EvalError 已在 eval() 函数中发生的错误
RangeError 已发生超出数字范围的错误
ReferenceError 已发生非法引用
SyntaxError 已发生语法错误
TypeError 已发生类型错误
URIError 在 encodeURI() 中已发生的错误

try-catch 语句:

try {
    // 可能发生异常的代码
} catch (error) {
    // 发生错误执行的代码
} finally {
    // 无论是否出错都会执行的代码
}

finally 语句:

try {
    console.log(a);
    console.log("a未定义报错");
} catch (error) {
    // 发生错误执行的代码
    console.log(error);
} finally {
    // 无论是否出错都会执行的代码
    console.log("finally 执行了 ...")
}

使用 throw 关键字抛出来主动抛出异常

throw new SyntaxError("语法错误...");

6 JSON

JSON：JavaScript Object Notation（JavaScript 对象标记法），它是一种存储和交换数据的语法。

在json中，每一个数据项，都是由一个键值对（或者说是名值对）组成的，但是键必须是字符串，且由双引号包围，而值必须是以下数据类型之一：

字符串（在 JSON 中，字符串值必须由双引号编写）
数字
对象（JSON 对象）
数组
布尔
null

JSON 的值不可以是以下数据类型之一：

函数
日期
undefined

JSON.parse()：可以将以JSON字符串转换为JS对象，它需要一个JSON字符串作为参数，会将该字符串转换为JS对象并返回

var jsonStr = '{"name":"孙悟空","age":18,"gender":"男"}';
var obj = JSON.parse(jsonStr);
console.log(obj);

JSON.stringify()：可以将一个JS对象转换为JSON字符串，需要一个js对象作为参数，会返回一个JSON字符串

var obj = {name: "猪八戒", age: 28, gender: "男"};
var jsonStr = JSON.stringify(obj);
console.log(jsonStr);

7 AJAX

未完待续……

总结

备注

学习借鉴CSDN博主「轻松的小希」的文章《学习JavaScript这一篇就够了》
链接：https://blog.csdn.net/qq_38490457/article/details/109257751