1. promise 的基本使用1234567891011121314151617181920212223242526272829303132// Promise传入一个回调函数接收两个参数,第一个参数是成功的回调,第二个是失败的回调// Promise对象有三种状态pending(进行中)、fulfilled(已成功)和rejected(已失败)状态// Promise刚开始是pending(进行中)状态,调用resolve则从pending变为fulfilled// 调用reject从pending变为rejected。只要这两种情况发生,状态就凝固了,不会再变了const p = new Promise((resolve, reject) => { // pending console.log("111"); console.log("222"); // fulfilled resolve("成功的回调");});const p1 = new Promise((resolve, rej ...
函数柯里化1234567891011121314function curry(fn) { function curried(...arg) { // 判断传入的参数是否大于等于函数需要的参数 大于等于则直接执行函数 if (arg.length >= fn.length) { return fn.apply(this, arg); } else { // 小于则继续递归执行curried函数,直到满足条件 return function (..._arg) { return curried.apply(this, [...arg, ..._arg]); }; } } return curried;}
1. 防抖函数1234567891011121314151617181920212223242526272829//防抖函数让某个触发事件在n秒内只会被执行一次function debounce(fn, delay, immediate = false) { // 记录定时器 let timer = null; // 记录immediate的值 let flag = immediate; // 不能返回箭头函数,this会指向window return function (...arg) { // 如果上一次setTimeout还没结束则直接取消 if (timer) { clearTimeout(timer); } // 如果immediate为true则一开始就执行一次 if (immediate && flag) { fn.apply(this, arg); flag = false; } // 定时器延迟执行函数 ...
1. call 函数的实现1234567891011121314151617Function.prototype.myCall = function (target, ...arg) { // 如果是null或者undfined 则指向window 不是对象类型则转化为包装类 target = target === null || target === undefined ? window : Object(target); Reflect.defineProperty(target, "fn", { configurable: true, writable: false, enumerable: false, value: this, }); // 隐式绑定 target.fn(...arg); // 删除fn Reflect.deleteProperty(target, "fn");};
2. apply 函数的实现12345678910111213141516 ...
1. 类的基本使用123456789101112131415161718// class中自动开启严格模式, new命令生成对象实例会自动调用constructor方法// class创建的类只能使用new来调用,不能直接调用class Person { constructor(name, age) { this.name = name; this.age = age; } // class中的方法会加入到Person的显示原型上 running() { console.log("running"); }}const p = new Person("aaa", 18);p.running();console.log(typeof Person); // function
2. 类的访问器方法1234567891011121314151617181920class Person { constructor(name, age) { ...
原型链实现继承1. 无继承代码123456789101112131415161718192021222324252627282930// 定义Person类function Person(name, age) { this.name = name; this.age = age;}Person.prototype.running = function () { console.log("running");};Person.prototype.eating = function () { console.log("eating");};// 定义Student类function Student(name, age, sno, score) { this.name = name; this.age = age; this.sno = sno; this.score = score;}Student.prototype.running = function ...
this 的绑定规则1. 默认绑定1234567891011121314151617//独立函数调用,this指向window//严格模式下独立函数调用,this指向undefindfunction foo() { console.log(this); //window}//独立函数调用foo();const obj = { name: "aaa", foo() { console.log(this); //obj },};//对象调起函数obj.foo();
2. 隐式绑定12345678function foo() { console.log(this); //obj}const obj = { bar: foo,};//隐式绑定obj.bar();
3. 显示绑定1234567891011121314151617181920212223242526272829303132const obj = { name: "zzz ...
javascript 事件循环机制1. javascript 是单线程javascript 是单线程的执行方式,但这其中会存在一些问题,就是如果当一个语句也需要执行很长时间的话,比如请求数据、定时器等后面的语句就得一直等着前面的语句执行结束后才会开始执行,显然这是不可取的。所以 javascript 将所有执行任务分为了同步任务和异步任务
2. 同步任务和异步任务同步任务的执行,其实就是跟前面那个案例一样,按照代码顺序和调用顺序,支持进入调用栈中并执行,执行结束后就移除调用栈。
而异步任务的执行,首先它依旧会进入调用栈中,然后发起调用,然后解释器会将其响应回调任务放入一个任务队列,紧接着调用栈会将这个任务移除。当主线程清空后,即所有同步任务结束后,解释器会读取任务队列,并依次将已完成的异步任务加入调用栈中并执行。
3. 宏任务和微任务在任务队列中,其实还分为宏任务队列和微任务队列,对应的里面存放的就是宏任务和微任务。宏任务和微任务都是异步任务
==宏任务队列主要有:ajax、setTimeout、setInterval、DOM 监听 等==
...
实现一个深拷贝12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849const obj = { name: "aaa", age: 18, friend: ["bbb", "ccc", "ddd"], bar: { count: 1, foo: { msg: "hello world", }, }, add(n1, n2) { return n1 + n2; },};obj.self = obj;// 判断是否为对象类型function isObject(obj) { return typeof obj === "object" && obj !== null;}// WeakMap ...
Set12345678910111213141516171819202122232425262728293031323334353637383940414243444546// 创建Set 可以传入可迭代对象// set里的数据是不能重复的 set支持foreach和for..of等遍历方式const set = new Set();//添加元素set.add(1);set.add({ count: 1 });set.add(["aaa", "bbb"]);//删除元素set.delete(1);//判断是否存在某个元素set.has(1);//获取元素个数set.size;//清空setset.clear();//数据去重const nums = [1, 21, 142, 123, 21, 32, 142];const newNums = [];// 1.普通方式for (let item of nums) { if (!newNums.includes(item)) { newNums.pus ...