速通javascript（持续更新）

由于正着已经光速通了一些基础语法了，所以这一步我们倒着来。并记录一些疑问从而从难到易去解决这些问题。

24.9.10正面进行二刷，发现手动记录有些麻烦，转入csdn二次记录

15继承

prototype 原型继承

function parent(){
	this.name = "parent";
}

// 用原型链拓展了这个对象的方法。
parent.prototype.getname = function(){
	console.log("my name is" + this.name)
}

function child(){
	this.name = "child";
}

// 这两行代码是神奇的。
child.prototype = new parent();
child.protytype.constructor = child;

const child = new child();
console.log(child.getname());

类继承

class parent{
	constuctor(){
		this.name = "parent";
	}

	getname(){
		return this.name;
	}
}

// extends关键字用作继承
class child extends parent{
	constructor(){
		// 调用父类的构造器
		super();
		this.name = "child";
	}
}

const child = new child();
// 继承了父类的构造和方法
let name = child.getname();

16DOM

// 这个暂时用不上，先过去。

17 事件

// 这个暂时用不上，先过去

18 异常处理

JavaScript 有一种特殊的对象类型，名为 Error，它用于表示在程序执行过程中发生的错误。当 JavaScript 引擎遇到错误时，会抛出一个 Error 对象。

let error = new Error("This is an error message");
console.log(error.name); // "Error"
console.log(error.message); // "This is an error message"

try {
  // 可能会抛出错误的代码
  const a = 1
  a() // 这里会抛出一个 TypeError
} catch (error) {
  // 处理错误
  console.log(error.message) // 输出 'a is not a function'
}

try {
  // 可能会抛出错误的代码
  const a = 1
  a() // 这里会抛出一个 TypeError
} catch (error) {
  // 处理错误
  console.log(error.message) // 输出 'a is not a function'
} finally {
  // 无论是否抛出错误，这里都会被执行
  console.log('执行完毕')
}

19单元测试

// 暂时不进行处理 todo!

20 ES6

原本以为吕布已经天下无敌了，想不到还有高手
javascript在最初是没有这种let 和 const的定义方法的，只有笨重的var，随着es6的出现，这种var语法渐渐的被替换掉了。
我以为这已经结束了，没想到还tmd有迭代器。

const arr = [1, 2, 3, 4];
const squares = arr.map(x => x * x);
console.log(squares);  // 输出 [1, 4, 9, 16]

也有类似于其他语言的输出方法

let name = 'Alice';
console.log(`Hello, ${name}!`);  // 输出 "Hello, Alice!"

我觉得这种方式可能能称为我装逼的写法

function addNumbers(x, y, z) {
  return x + y + z;
}
// 定义了一个数组
const numbers = [1, 2, 3];
// 使用扩展运算符将数组中的元素展开作为函数的参数
// 这一步还是很帅的
const result = addNumbers(...numbers);
console.log(result); // 输出: 6

解构是一种简单的写法，其实不要把解构想得太复杂，其实就是编译器的眼力见罢了。

let [a, b, c] = [1, 2, 3];
console.log(a, b, c);  // 输出 1 2 3

let {x, y} = {x: 10, y: 20};
console.log(x, y);  // 输出 10 20

可以简单的了解一下promise的语法糖

// 使用Promise封装一个异步操作
function fetchUser() {
	// 由异步函数知道这个函数返回的是一个promise
  return new Promise((resolve, reject) => {
  	// settimeout里传入了一个匿名函数
  	// 这个函数我先前认为他是一个回调 仍未改变这个认知
    setTimeout(() => {
      const user = { id: 1, name: 'John' };
      resolve(user);
    }, 2000);
  });
}

// 使用async/await来处理异步任务
async function getUser() {
  try {
    const user = await fetchUser();
    console.log('User:', user);
  } catch (error) {
    console.log('Error:', error);
  }
}

// 调用异步函数
getUser();//2s后输出 User: {id: 1, name: 'John'}

21 promise

promise的概念类似于rust中的future，也就是说，同样存在pending和ready（fulfilled状态）
操作失败的promise的状态会转化为reject

创建一个promise是简单的。
在 JavaScript 中，你可以使用 new Promise 构造函数创建一个新的 Promise，该构造函数接收一个函数作为参数,接受了一个匿名函数，这个函数又接收两个参数：一个 resolve 函数和一个 reject 函数，分别用于改变 Promise 的状态为 Fulfilled 或 Rejected。

const promise = new Promise((resolve, reject) => {
  // 异步操作代码
});

该构造函数接收一个函数作为参数，这个函数又接收两个参数：一个 resolve 函数和一个 reject 函数，分别用于改变 Promise 的状态为 Fulfilled 或 Rejected。

const promise = new Promise((resolve, reject) => {
	//settimeout也是一个promise返回了一个resolve类型
  setTimeout(() => {
    resolve('WTF Promise resolved');
  }, 1000);
});
promise.then({
	value =>{
		console.log(value);
	}
	error =>{
		console.log(error);
	}
})
// 上述这种写法会更加清晰
// 下述写法也可以
// 1秒后输出 'WTF Promise resolved'
promise.then(value => console.log(value));

我有点看不懂这个代码
Promise 的优势在于你可以使用链式 .then 调用来组织和管理你的异步代码。.then 方法接受两个可选参数：一个用于处理解析值的回调函数，和一个用于处理拒绝原因（即错误）的回调函数。
哈哈哈哈补充完就看懂啦

promise.then(
  value => {
    // 处理解析后的值
  },
  error => {
    // 处理错误
  }
);

再加上这段就可以理解了catch的用法确实和我先前理解的差不读，用于捕获错误，这样就替代了那种两个匹配的写法，上面的上述代码部分

promise
  .then(value => {
    throw new Error('WTF Something went wrong');
  })
  .catch(error => console.error(error));

还有一个神奇的finally

const p = new Promise((resolve, reject) => {
  resolve('Hello, WTF JavaScript!')
})

p.then((value) => {
  console.log(value)
}).finally(() => {
  console.log('finally')
})

---

promise的高级使用方法暂时先不做了解，我也写一个promise放在这里，后续会把这些使用补全

---

Promise API 提供了一些用于处理 Promise 的便捷方法：
Promise.resolve(value)：返回一个以给定值解析后的 Promise。如果该值是一个 Promise，返回的 Promise 将具有相同的状态和值。
Promise.reject(reason)：返回一个用给定的原因拒绝的 Promise。
Promise.all(iterable)：返回一个新的 Promise，它在 iterable 中的所有 Promise 都解析后解析，或者在 iterable 中的任何 Promise 被拒绝后拒绝。
Promise.race(iterable)：返回一个新的 Promise，它在 iterable 中的任何 Promise 解析或拒绝后具有相同的解析值或拒绝原因。
Promise.allSettled(iterable): 有时我们希望等到一组异步操作都结束了，不管每一个操作是成功还是失败，再进行下一步操作。但是，Promise.all 方法只适合所有异步操作都成功的情况，如果有一个操作失败，就无法满足要求。这时我们需要使用 Promise.allSettled 方法。
Promise.any: 与 Promise.race 类似，区别在于只要有一个 Promise 实例变成 fulfilled 状态，包装实例就会变成 fulfilled 状态；所有 Promise 实例都变成 rejected 状态，包装实例才会变成 rejected 状态。
我暂时不理解这些用法

---

22 network

首先我们看一段代码。

fetch('https://api.github.com/search/users?q=amazingang', {
  method: 'GET',
})
.then(response => response.json())
.then(data => console.log(data))
.catch((error) => console.error('Error:', error));

// 我猜想这段代码也可以这样子写
fetch('https://api.github.com/search/users?q=amazingang',{
	method:'GET',
})
.then({
	response =>{
		let data = response.json();
		console.log(data)
	}
	error =>{
		console.log(error);
	}
})

这段代码调用fetch产生了一个promise类型的任务，之后将获取到的数据转化为了json,为什么是response我猜测只是一个接受的函数然后打印这个数据，甚至还用了catch来捕捉错误，做了错误处理。
哦，神奇的javascript

fetch('https://api.example.com/data', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({
    username: '0xAA',
    password: 'pwd',
  }),
})
.then(response => response.json())
.then(data => console.log(data))
.catch((error) => console.error('Request failure:', error));

post请求一如既往的需要header和body，需要更多的信息。

除了fetch方法之外也存在一些其他的http请求方法。
AXIOS AJAX

---

这个一样做一个promise后面会学的。

---

23 eventloop

首先明确两个概念，分别是
1 调用栈
javascript只有一个调用栈用于跟踪函数其他的就类似于任何语言的函数调用栈
2 任务队列
异步任务在完成时会被添加到任务队列中，当调用栈为空的时候，也就是当下的函数全部执行完之后，会将这些已经完成的任务从任务队列中放入函数调用栈等待执行

javascript事件循环中有两种任务：宏任务和微任务
宏任务是javascript 引擎线程直接执行的，包括整个脚本（main script），setTimeout 和 setInterval 的回调，setImmediate（Node.js环境）等。
微任务是在当前宏任务结束后立即执行的任务，包括 Promise 的 then 和 catch 的回调process.nextTick（Node.js环境），MutationObserver的回调（浏览器环境）等。
微任务的优先级是低于宏任务的。

我无法理解这个事件循环的概念我现在理解了哈哈哈哈哈

console.log('script start');  // Macrotask

setTimeout(function() {
  console.log('setTimeout');  // Macrotask
}, 0);

Promise.resolve().then(function() {
  console.log('promise1');  // Microtask
}).then(function() {
  console.log('promise2');  // Microtask
});

console.log('script end');  // Macrotask

我认为的输出顺序

script start
setTimeout
script end
promise1
promise2

实际的顺序

script start
script end
promise1
promise2
setTimeout

settime设置的定时任务，会进入宏任务队列，promise的任务在完成之后会进入微任务队列。
我的彩笔分析如下：
我认为微任务的优先级还是挺高的，当前宏任务执行完之后就会执行，先前没有执行只是因为队列中没有这个任务。这也符合上述的任务结果

step1，后续会去补全肖老师的web3的概念课程，没什么鸟用但是可以认识到这个东西，然后拓扑之后的东西是完成solidity的语法知识补全以及evm的编程的尝试