Javascript 相关知识点
关注
分享
扫一扫
学习Javascript中遇到的知识点总结
Anita-Sun
一只热衷于分享前端知识的奶牛猫~ ️
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
Javascript 代码规范
Javascript 代码规范原创 2022-09-12 20:27:13 · 2731 阅读 · 1 评论 -
实现发布订阅模式 —— 有命名空间版
var partEvent = { listen: function(clientList, key, fn) { if(!clientList[key]) { clientList[key] = []; } clientList[key].push(fn); }, trigger: function(clientList, key, args) { var fns = clientList[k原创 2022-03-13 11:29:37 · 439 阅读 · 0 评论 -
LocalStorage和sessionStorage之间的区别
LocalStorage在a页面存储session关闭a页面，重新打开a页面，发现a页面还存储着name代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="w原创 2021-12-02 08:23:57 · 184 阅读 · 0 评论 -
父子窗口进行通信
准备工作创建一个文件夹，建立content.html和test.html文件使用VSCode打开这个文件夹代码test.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>fi原创 2021-11-12 22:45:11 · 563 阅读 · 0 评论 -
async和await
async函数会返回一个promise，并且promise对象的状态是resolved（成功的）如果你没有在async函数中写return，那么Promise对象resolve的值就是是undefined如果你写了return，那么return的值就会作为你成功的时候传入的值如果asycn里的代码都是同步的，那么这个函数被调用就会同步执行async function fn(){ console.log('a')}fn()console.log('b')//a//basy.原创 2021-03-11 16:28:29 · 107 阅读 · 0 评论 -
Iterator
自己的makeIterator方法var it = makeIterator(['a', 'b']);it.next();it.next();it.next();function makeIterator(array){ var nextIndex = 0; return { next: function() { return nextIndex < array.length ? {value: array[nextIndex++], done:.转载 2021-03-11 08:46:23 · 88 阅读 · 0 评论 -
JS中利用扩展运算符计算传入数字的和
// 第一种方法var total = 0;function sum(a, ...num) { if(a != undefined){ sum(...num); total += a; } return total}// 第二种方法function sum(a, ...num) { return num[0] ? a + sum(...num) : a;}原创 2021-03-02 15:31:42 · 199 阅读 · 0 评论 -
js小案例复习
原创 2021-01-21 23:40:29 · 86 阅读 · 0 评论 -
js知识点
原创 2021-01-21 23:40:06 · 90 阅读 · 0 评论 -
一张图弄懂原型和继承
类中的一般方法放在了类的原型对象上，供实例使用原创 2021-01-18 21:55:13 · 194 阅读 · 0 评论 -
理解Javascript中的函数调用和“this“
函数调用的核心使用call方法进行的调用，任何函数调用都可以使用call来避免不必要的麻烦//第一个参数作为this，后面的作为参数，func是需要调用call()方法的函数func.call(context, arg1, arg2, ...)例如：function hello(thing) { console.log(this + " says hello " + thing);}hello.call("Yehuda", "world") //输出为：Yehuda says hel原创 2021-01-16 21:48:21 · 109 阅读 · 0 评论 -
XMLHttpRequest入门
创建XMLHttpRequest对象var xhr = new XMLHttpRequest ();使用工厂模式把定义XMLHttpRequest对象进行封装，这样只需调用creatXHR()方法就可以返回一个XMLHttpRequest 对象//创建XMLHttpRequest 对象//参数：无//返回值：XMLHttpRequest 对象function createXHR () { var XHR = [ //兼容不同浏览器和版本得创建函数数组 functio转载 2020-12-31 19:34:39 · 418 阅读 · 0 评论 -
模块（Module）简介
什么是模块一个模块就是一个文件，一个脚本就是一个模块模块之间可以相互加载export 关键字标记了可以从当前模块外部访问的变量和函数。import 关键字允许从其他模块导入功能。// ???? sayHi.jsexport function sayHi(user) { alert(`Hello, ${user}!`);}// ???? main.html<!doctype html><script type="module"> import {s原创 2020-12-17 22:44:14 · 6855 阅读 · 0 评论 -
（Javascript）Async/await
Async functionasync function f() { // 下面这个函数返回一个结果为 1 的 resolved promise return 1; //相当于 return Promise.resolve(1);}f().then(alert); // 1Await只能在 async 函数内工作async function f() { let promise = new Promise((resolve, reject) => { set原创 2020-12-14 22:24:45 · 138 阅读 · 0 评论 -
（Javascript）微任务（Microtask）
微任务（Microtask）Promise 的处理程序（handlers）.then、.catch 和 .finally 都是异步的。即便一个 promise 立即被 resolve，.then、.catch 和.finally 下面 的代码也会在这些处理程序（handler）之前被执行。let promise = Promise.resolve();promise.then(() => alert("promise done!")); //这个后显示alert("co原创 2020-12-14 21:21:20 · 1105 阅读 · 0 评论 -
（Javascript）Promisificcatiion
“Promisification” 指将一个接受回调的函数转换为一个返回 promise 的函数。因为使用promise更加方便，所以将基于回调的函数和库 promisify 是有意义的//callback回调函数需要传入失败信息和成功信息//由callback函数来对成功信息和失败信息进行处理function loadScript(src, callback) { let script = document.createElement('script'); script.src = s.原创 2020-12-14 20:50:46 · 141 阅读 · 0 评论 -
（Javascript）手写Promise核心代码
假设自定义Promise类名为HD首先定义HD中的三种状态：pending、fulfilled、rejectedclass HD { static PENDING = "pending"; static FULFILLED = "fulfilled"; static REJECTED = "rejected";}接着咱们来写HD中的构造函数首先来看一下是如何创建一个HD对象的const myFirstPromise = new Promise((re.原创 2020-12-14 10:17:03 · 233 阅读 · 0 评论 -
（Javascript）Promise.all、Promise.allSettled、Promise.race、Promise.resolve/reject、
Promise.allPromise.all 接受一个 promise 数组作为参数，并返回一个新的 promise当所有给定的 promise 都被 settled 时，新的 promise 才会 resolve，并且其结果数组将成为新的 promise 的结果。结果数组中元素的顺序与其在源 promise 中的顺序相同。即使第一个 promise 花费了最长的时间才 resolve，但它仍是结果数组中的第一个。let promise = Promise.all([...promises...]原创 2020-12-11 09:06:04 · 591 阅读 · 0 评论 -
（JavaScript）使用promise进行错误处理、再次抛出、未处理的rejection、Fetch错误处理示例
当一个promise被reject时，控制权将移交至最近的rejection处理程序//下面代码中所fetch的URL是错的，.catch对这个error进行了处理fetch('https://no-such-server.blabla') // rejects .then(response => response.json()) .catch(err => alert(err)) // TypeError: failed to fetch（这里的文字可能有所不同）如果想要.原创 2020-12-10 14:19:30 · 2705 阅读 · 0 评论 -
Promise链
异步任务需要一个接一个的执行（如执行脚本），所以可以使用Promise链new Promise(function(resolve, reject) { setTimeout(() => resolve(1), 1000); }).then(function(result) { alert(result); return result * 2;}).then(function(result) { alert(result); // 2 return resu.原创 2020-12-10 09:50:12 · 597 阅读 · 0 评论 -
（JavaScript）Promise、消费者：then，catch，finally
Promise生产者代码：会做一些事情，并且需要一些时间消费者代码：想要在生产者代码完成工作的第一时间获得其工作成果。Promise是将生产者代码和消费者代码连接在一起的一个特殊的对象。在生产者准备好时，将结果向所有消费者开放Promise对象的构造器语法let promise = new Promise(function(resolve, reject) { // executor（生产者代码）});resolve(value) — 如果任务成功完成并带有结果 value。r原创 2020-12-10 00:03:37 · 1415 阅读 · 0 评论 -
（JavaScript）简介：回调、在回调中回调、厄运金字塔
简介：回调loadScript(src)函数使用给定的src加载脚本function loadScript(src) { // 创建一个 <script> 标签，并将其附加到页面 // 这将使得具有给定 src 的脚本开始加载，并在加载完成后运行 let script = document.createElement('script'); script.src = src; document.head.append(script);}// 在给定路径下加载并执行脚本原创 2020-12-09 14:25:54 · 241 阅读 · 0 评论 -
（JavaScript）自定义Error，扩展Error，深入继承，包装异常
自定义Error，扩展Error扩展ErrorError类// JavaScript 自身定义的内建的 Error 类的“伪代码”class Error { constructor(message) { this.message = message; this.name = "Error"; // (不同的内建 error 类有不同的名字) this.stack = <call stack>; // 非标准的，但大多数环境都支持它 }}继承Err原创 2020-12-09 12:55:21 · 1016 阅读 · 0 评论 -
（Javascript）错误处理，“try...catch“，Error对象，自定义异常，再次抛出异常，finally，全局catch
错误处理，“try…catch”try { // 执行此处代码} catch(err) { // 如果发生错误，跳转至此处 // err 是一个 error 对象} finally { // 无论怎样都会在 try/catch 之后执行}try…catch 仅对运行时的 error有效要使得 try..catch 能工作，代码必须是可执行的。如果代码包含语法错误，那么 try..catch 将无法正常工作。try…catch 同步工作如果在"计划的"代码中发生异常原创 2020-12-09 09:34:56 · 3935 阅读 · 0 评论 -
（JavaScript）Mixin 模式
Mixin 模式在 JavaScript 中，我们只能继承单个对象。每个对象只能有一个 [[Prototype]]。并且每个类只可以扩展另外一个类。mixin 是一个包含可被其他类使用而无需继承的方法的类。一个 Mixin 实例最简单的构造mixin方式：构造一个拥有实用方法的对象// 创建一个对象来构造mininlet sayHiMixin = { sayHi() { alert(`Hello ${this.name}`); }, sayBye() { al原创 2020-12-08 23:49:38 · 1250 阅读 · 0 评论 -
（JavaScript）类检查：”instanceof“(Symbol.hasInstance、objA.isPrototypeOf(objB)、Sysbol.toStringTag)
instanceof 操作符用于检查一个对象是否属于某个特定的 class。同时，它还考虑了继承。语法obj instanceof Class如果obj隶属于Class类（或Class的衍生类），则返回trueclass Rabbit {}let rabbit = new Rabbit();// rabbit 是 Rabbit class 的对象吗？alert( rabbit instanceof Rabbit ); // true它还可以与构造函数一起使用：// 这里是构造函数，原创 2020-12-08 13:08:43 · 389 阅读 · 0 评论 -
（JavaScript）中扩展内建类、内建类没有静态方法继承
内建的类，例如 Array， Map 等也是可以扩展的// 给 PowerArray 新增了一个方法（可以增加更多）class PowerArray extends Array { isEmpty() { return this.length === 0; }}let arr = new PowerArray(1, 2, 5, 10, 50);alert(arr.isEmpty()); // false; 这里输出是正常的，因为创建的就是PowerArray对象嘛，当然可以调.原创 2020-12-08 09:38:17 · 167 阅读 · 0 评论 -
（JavaScript）中的静态属性和静态方法、继承Object和不继承Object的区别
静态方法class User { static staticMethod() { //在User.staticMethod()调用中的this的值是类构造器User自身 alert(this === User); }}User.staticMethod(); // true//上面的等同于/*class User { }User.staticMethod = function() { alert(this === User);};User.staticM原创 2020-12-08 08:16:52 · 811 阅读 · 0 评论 -
（JavaScript）中的类继承（extends、重写方法、重写constructor、重写类字段、[[HomeObject]]）
"extends"关键字class Animal { constructor(name) { this.speed = 0; this.name = name; } run(speed) { this.speed = speed; alert(`${this.name} runs with speed ${this.speed}.`); } stop() { this.speed = 0; alert(`${this.name} stan原创 2020-12-07 15:44:18 · 10830 阅读 · 3 评论 -
（JavaScript）私有的和受保护的属性和方法
受保护的属性和方法受保护的属性通常以下划线_作为前缀class CoffeeMachine { _waterAmount = 0; set waterAmount(value) { if (value < 0) throw new Error("Negative water"); this._waterAmount = value; } get waterAmount() { return this._waterAmount; } cons原创 2020-12-07 10:57:52 · 832 阅读 · 0 评论 -
（JavaScript）Class基本语法（什么是class、类表达式、Getter/Setter、class字段、使用类字段制作绑定方法）
"class"语法基本语法是：class MyClass { prop = value; // 属性 constructor(...) { // 构造器 // ... } method(...) {} // method get something(...) {} // getter 方法 set something(...) {} // setter 方法 [Symbol.iterator]() {} // 有计算名称（computed name）的方法（原创 2020-12-06 17:11:43 · 590 阅读 · 0 评论 -
（JavaScript）原型方法，对象的克隆，“Very plain” object
设置原型的方法__proto__ 被认为是过时且不推荐使用的（deprecated），这里的不推荐使用是指 JavaScript 规范中规定，proto 必须仅在浏览器环境下才能得到支持。现代的方法有：Object.create(proto, [descriptors]) —— 利用给定的 proto 作为 [[Prototype]]和可选的属性描述来创建一个空对象。Object.getPrototypeOf(obj) —— 返回对象 obj 的[[Prototype]]。Object.se原创 2020-12-06 09:54:42 · 147 阅读 · 0 评论 -
（JavaScript）丢失的this（函数绑定）
丢失的 “this”一旦方法被传递到与对象分开的某个地方———this就会丢失let user = { firstName: "John", sayHi() { alert(`Hello, ${this.firstName}!`); }};/*sayHi()是直接调用的，而不是通过对象来调用的，所以this的值丢失了类似于let f = user.sayHi;setTimeout(f, 1000);setTimeout(sayHi(){ //丢失了user的上下原创 2020-12-05 14:13:37 · 441 阅读 · 0 评论 -
（JavaScript）函数对象 - (name、length、自定义属性)、命名函数表达式
函数对象属性name：可以获得函数的名字属性length：返回函数入参的个数1.rest参数不参与计数例：下面的代码中函数 ask 接受一个询问答案的参数 question 和可能包含任意数量 handler 的参数 …handlers。当用户提供了自己的答案后，函数会调用那些 handlers。我们可以传入两种 handlers：一种是无参函数，它仅在用户回答给出积极的答案时被调用。一种是有参函数，它在两种情况都会被调用，并且返回一个答案。function ask(question,原创 2020-12-05 10:04:34 · 509 阅读 · 0 评论 -
（JavaScript）变量作用域
嵌套函数function makeCounter() { let count = 0; return function() { return count++; };}let counter = makeCounter();alert( counter() ); // 0alert( counter() ); // 1alert( counter() ); // 2词法环境一.变量的环境每个运行的函数、代码块、整个脚本都有一个被称为词法环境的内部的关联对象.原创 2020-12-04 14:58:38 · 250 阅读 · 0 评论 -
（JavaScript）中const、var、let的区别
const：const定义的变量不可以修改，而且必须初始化const b = 2; //正确const c; //错误，没有初始化b = 5; //错误，不可以修改var：1.var定义的变量可以修改，如果不初始化会输出undefined，不会报错var a = 1;var b; //不会报错function change(){ a = 4; }change();console.log(a); //值为42.原创 2020-12-04 00:18:21 · 165 阅读 · 0 评论 -
（JavaScript）装饰器模式和转发（透明缓存、“func.call”函数、如何传递多个参数、func.apply）
透明缓存利用装饰者模式给一个函数添加缓存function slow(x) { // 这里可能会有重负载的 CPU 密集型工作 alert(`Called with ${x}`); return x;}//缓存装饰器：将函数func运算结果添加到缓存中function cachingDecorator(func) { let cache = new Map(); return function(x) { if (cache.has(x)) { re原创 2020-12-03 20:19:04 · 767 阅读 · 0 评论