前端为什么有的接口明明是成功回调却执行了.catch失败回调_前端进阶高薪必看-手写源码篇(高频技术点)...
前言
此系列作为笔者之前发过的前端高频面试整理的补充 会比较偏向中高前端面试问题 当然大家都是从新手一路走过来的 感兴趣的朋友们都可以看哈
初衷
我相信不少同学面试的时候最怕的一个环节就是手写代码 大家一定听过这句话talk is cheap, show me the code 没事 此文章不仅包含了前端经典的手写源码面试题 还包含了大量的分析和引导 希望能帮助大家更好的食用(欢迎评论 不定时更新补充题库)
注意
本文所有的手写源码实现都是基于 es6 的 不想用原生去实现原因如下:一方面是网上太多原生实现的方案了 另一方面是我们要面向未来编程 多使用 es6 的特性更加贴合实际工作
1 promise
先思考?
- promise 是什么?
异步回调解决方案
- promise 如何保证异步执行完了再去执行后面的代码?
使用 then 关键字 then 接受两个参数 第一个参数(函数)会在 promise resolve 之后执行 第二个参数(函数)会在 promise reject 之后执行
- 为什么能在异步事件执行完成的回调之后再去触发 then 中的函数?
引入事件注册机制(将 then 中的代码注册事件 当异步执行完了之后再去触发事件)
- 怎么保证 promise 链式调用 形如 promise.then().then()
每个 then 返回的也是一个 promise 对象
- 怎么知道异步事件执行完毕或者执行失败?
需要状态表示
具体实现如下
//这里使用es6 class实现class Mypromise { constructor(fn) { // 表示状态 this.state = "pending"; // 表示then注册的成功函数 this.successFun = []; // 表示then注册的失败函数 this.failFun = []; let resolve = val => { // 保持状态改变不可变(resolve和reject只准触发一种) if (this.state !== "pending") return; // 成功触发时机 改变状态 同时执行在then注册的回调事件 this.state = "success"; // 为了保证then事件先注册(主要是考虑在promise里面写同步代码) promise规范 这里为模拟异步 setTimeout(() => { // 执行当前事件里面所有的注册函数 this.successFun.forEach(item => item.call(this, val)); }); }; let reject = err => { if (this.state !== "pending") return; // 失败触发时机 改变状态 同时执行在then注册的回调事件 this.state = "fail"; // 为了保证then事件先注册(主要是考虑在promise里面写同步代码) promise规范 这里模拟异步 setTimeout(() => { this.failFun.forEach(item => item.call(this, err)); }); }; // 调用函数 try { fn(resolve, reject); } catch (error) { reject(error); } } // 实例方法 then then(resolveCallback, rejectCallback) { // 判断回调是否是函数 resolveCallback = typeof resolveCallback !== "function" ? v => v : resolveCallback; rejectCallback = typeof rejectCallback !== "function" ? err => { throw err; } : rejectCallback; // 为了保持链式调用 继续返回promise return new Mypromise((resolve, reject) => { // 将回调注册到successFun事件集合里面去 this.successFun.push(val => { try { // 执行回调函数 let x = resolveCallback(val); //(最难的一点) // 如果回调函数结果是普通值 那么就resolve出去给下一个then链式调用 如果是一个promise对象(代表又是一个异步) 那么调用x的then方法 将resolve和reject传进去 等到x内部的异步 执行完毕的时候(状态完成)就会自动执行传入的resolve 这样就控制了链式调用的顺序 x instanceof Mypromise ? x.then(resolve, reject) : resolve(x); } catch (error) { reject(error); } }); this.failFun.push(val => { try { // 执行回调函数 let x = rejectCallback(val); x instanceof Mypromise ? x.then(resolve, reject) : reject(x); } catch (error) { reject(error); } }); }); } //静态方法 static all(promiseArr) { let result = []; //声明一个计数器 每一个promise返回就加一 let count = 0 return new Mypromise((resolve, reject) => { for (let i = 0; i < promiseArr.length; i++) { promiseArr[i].then( res => { //这里不能直接push数组 因为要控制顺序一一对应(感谢评论区指正) result[i] = res count++ //只有全部的promise执行成功之后才resolve出去 if (count === promiseArr.length) { resolve(result); } }, err => { reject(err); } ); } }); } //静态方法 static race(promiseArr) { return new Mypromise((resolve, reject) => { for (let i = 0; i < promiseArr.length; i++) { promiseArr[i].then( res => { //promise数组只要有任何一个promise 状态变更 就可以返回 resolve(res); }, err => { reject(err); } ); } }); }}// 使用let promise1 = new Mypromise((resolve, reject) => { setTimeout(() => { resolve(123); }, 2000);});let promise2 = new Mypromise((resolve, reject) => { setTimeout(() => { resolve(1234); }, 1000);});// Mypromise.all([promise1,promise2]).then(res=>{// console.log(res);// })// Mypromise.race([promise1, promise2]).then(res => {// console.log(res);// });promise1 .then( res => { console.log(res); //过两秒输出123 return new Mypromise((resolve, reject) => { setTimeout(() => { resolve("success"); }, 1000); }); }, err => { console.log(err); } ) .then( res => { console.log(res); //再过一秒输出success }, err => { console.log(err); } );复制代码
扩展:如何取消 promise
先思考?
怎么才能取消已经发起的异步呢?
Promise.race()方法可以用来竞争 Promise 谁的状态先变更就返回谁那么可以借助这个 自己包装一个 假的 promise 与要发起的 promise 来实现
具体实现如下
function wrap(pro) { let obj = {}; // 构造一个新的promise用来竞争 let p1 = new Promise((resolve, reject) => { obj.resolve = resolve; obj.reject = reject; }); obj.promise = Promise.race([p1, pro]); return obj;}let testPro = new Promise((resolve, reject) => { setTimeout(() => { resolve(123); }, 1000);});let wrapPro = wrap(testPro);wrapPro.promise.then(res => { console.log(res);});wrapPro.resolve("被拦截了");复制代码
2 防抖节流
先思考?
- 防抖和节流区别
防抖是 N 秒内函数只会被执行一次,如果 N 秒内再次被触发,则重新计算延迟时间(举个极端的例子 如果 window 滚动事件添加了防抖 2s 执行一次 如果你不停地滚动 永远不停下 那这个回调函数就永远无法执行)
节流是规定一个单位时间,在这个单位时间内最多只能触发一次函数执行(还是滚动事件 如果你一直不停地滚动 那么 2 秒就会执行一次回调)
- 防抖怎么保证
事件延迟执行 并且在规定时间内再次触发需要清除 这个很容易就想到了 setTimeout
- 节流怎么保证
在单位时间内触发了一次就不再生效了 可以用一个 flag 标志来控制
具体实现如下
// 防抖function debounce(fn, delay=300) { //默认300毫秒 let timer; return function() { var args = arguments; if (timer) { clearTimeout(timer); } timer = setTimeout(() => { fn.apply(this, args); // 改变this指向为调用debounce所指的对象 }, delay); };}window.addEventListener( "scroll", debance(() => { console.log(111); }, 1000));// 节流//方法一:设置一个标志function throttle(fn, delay) { let flag = true; return () => { if (!flag) return; flag = false; timer = setTimeout(() => { fn(); flag = true; }, delay); };}//方法二:使用时间戳function throttle(fn, delay) { let startTime = new Date(); return () => { let endTime = new Date(); if (endTime - startTime >= delay) { fn(); startTime = endTime; } else { return; } };}window.addEventListener( "scroll", throttle(() => { console.log(111); }, 1000));复制代码
防抖节流属于性能优化的一点 更多性能优化扩展请点击 性能优化
3 EventEmitter(发布订阅模式--简单版)
先思考?
- 什么是发布订阅模式
发布-订阅模式其实是一种对象间一对多的依赖关系,当一个对象的状态发生改变时,所有依赖于它的对象都将得到状态改变的通知
- 怎么实现一对多
既然一对多 肯定有一个事件调度中心用来调度事件 订阅者可以注册事件(on)到事件中心 发布者可以发布事件(emit)到调度中心 订阅者也可以取消订阅(off)或者只订阅一次(once)
具体实现如下
// 手写发布订阅模式 EventEmitterclass EventEmitter { constructor() { this.events = {}; } // 实现订阅 on(type, callBack) { if (!this.events) this.events = Object.create(null); if (!this.events[type]) { this.events[type] = [callBack]; } else { this.events[type].push(callBack); } } // 删除订阅 off(type, callBack) { if (!this.events[type]) return; this.events[type] = this.events[type].filter(item => { return item !== callBack; }); } // 只执行一次订阅事件 once(type, callBack) { function fn() { callBack(); this.off(type, fn); } this.on(type, fn); } // 触发事件 emit(type, ...rest) { this.events[type] && this.events[type].forEach(fn => fn.apply(this, rest)); }}// 使用如下const event = new EventEmitter();const handle = (...rest) => { console.log(rest);};event.on("click", handle);event.emit("click", 1, 2, 3, 4);event.off("click", handle);event.emit("click", 1, 2);event.once("dbClick", () => { console.log(123456);});event.emit("dbClick");event.emit("dbClick");复制代码
4 call、apply、bind
先思考?
- call 用法
第一个参数 可以改变调用函数的 this 指向 第二个以及之后的参数为传入的函数的参数
let obj = { a: 1};function fn(name, age) { console.log(this.a); //1 console.log(name); console.log(age);}fn.call(obj, "我是 lihua", "18");复制代码
- 怎么改变 this 指向呢
根据 this 特性 对象的方法调用 那么方法内部的 this 就指向这个对象
let obj = { a: 1, fn(name, age) { console.log(this.a); //1 console.log(name); console.log(age); }};obj.fn("我是lihua", "18");复制代码
- 怎么获取传入的不定参数呢
利用 es6 ...args 剩余参数获取方法(rest)
具体实现如下
Function.prototype.myCall = function(context, ...args) { if (!context || context === null) { context = window; } // 创造唯一的key值 作为我们构造的context内部方法名 let fn = Symbol(); context[fn] = this; //this指向调用call的函数 // 执行函数并返回结果 相当于把自身作为传入的context的方法进行调用了 return context[fn](...args);};// apply原理一致 只是第二个参数是传入的数组Function.prototype.myApply = function(context, args) { if (!context || context === null) { context = window; } // 创造唯一的key值 作为我们构造的context内部方法名 let fn = Symbol(); context[fn] = this; // 执行函数并返回结果 return context[fn](...args);};//测试一下 call 和 applylet obj = { a: 1};function fn(name, age) { console.log(this.a); console.log(name); console.log(age);}fn.myCall(obj, "我是lihua", "18");fn.myApply(obj, ["我是lihua", "18"]);let newFn = fn.myBind(obj, "我是lihua", "18");newFn();//bind实现要复杂一点 因为他考虑的情况比较多 还要涉及到参数合并(类似函数柯里化)Function.prototype.myBind = function (context, ...args) { if (!context || context === null) { context = window; } // 创造唯一的key值 作为我们构造的context内部方法名 let fn = Symbol(); context[fn] = this; let _this = this // bind情况要复杂一点 const result = function (...innerArgs) { // 第一种情况 :若是将 bind 绑定之后的函数当作构造函数,通过 new 操作符使用,则不绑定传入的 this,而是将 this 指向实例化出来的对象 // 此时由于new操作符作用 this指向result实例对象 而result又继承自传入的_this 根据原型链知识可得出以下结论 // this.__proto__ === result.prototype //this instanceof result =>true // this.__proto__.__proto__ === result.prototype.__proto__ === _this.prototype; //this instanceof _this =>true if (this instanceof _this === true) { // 此时this指向指向result的实例 这时候不需要改变this指向 this[fn] = _this this[fn](...[...args, ...innerArgs]) //这里使用es6的方法让bind支持参数合并 delete this[fn] } else { // 如果只是作为普通函数调用 那就很简单了 直接改变this指向为传入的context context[fn](...[...args, ...innerArgs]); delete context[fn] } }; // 如果绑定的是构造函数 那么需要继承构造函数原型属性和方法 // 实现继承的方式一: 构造一个中间函数来实现继承 // let noFun = function () { } // noFun.prototype = this.prototype // result.prototype = new noFun() // 实现继承的方式二: 使用Object.create result.prototype = Object.create(this.prototype) return result};//测试一下function Person(name, age) { console.log(name); //'我是参数传进来的name' console.log(age); //'我是参数传进来的age' console.log(this); //构造函数this指向实例对象}// 构造函数原型的方法Person.prototype.say = function() { console.log(123);}let obj = { objName: '我是obj传进来的name', objAge: '我是obj传进来的age'}// 普通函数function normalFun(name, age) { console.log(name); //'我是参数传进来的name' console.log(age); //'我是参数传进来的age' console.log(this); //普通函数this指向绑定bind的第一个参数 也就是例子中的obj console.log(this.objName); //'我是obj传进来的name' console.log(this.objAge); //'我是obj传进来的age'}// 先测试作为构造函数调用// let bindFun = Person.myBind(obj, '我是参数传进来的name')// let a = new bindFun('我是参数传进来的age')// a.say() //123// 再测试作为普通函数调用let bindFun = normalFun.myBind(obj, '我是参数传进来的name') bindFun('我是参数传进来的age')复制代码
bind 实现 运用原型链相关知识 如果对 js 原型链和继承不是很熟悉 请点传送门
5 new 操作符
先思考?
- new 用法是什么?
从构造函数创造一个实例对象 构造函数的 this 指向为创造的实例函数 并且可以使用构造函数原型属性和方法
function Person(name, age) { this.name = name; this.age = age;}Person.prototype.say = function() { console.log(this.age);};let p1 = new Person("lihua", 18);console.log(p1.name);p1.say();复制代码
- 怎么实现 this 指向改变?
call apply
- 怎么实现构造函数原型属性和方法的使用
原型链 原型继承
具体实现如下
function myNew(fn, ...args) { // 1.创造一个实例对象 let obj = {}; // 2.生成的实例对象继承构造函数原型 // 方法一 粗暴的改变指向 完成继承 obj.__proto__ = fn.prototype; // 方法二 利用Object.create实现 // obj=Object.create(fn.prototype) // 3.改变构造函数this指向为实例对象 let result = fn.call(obj, ...args); // 4. 如果构造函数执行的结果返回的是一个对象或者函数,那么返回这个对象或函数 if ((result && typeof result === "object") || typeof result === "function") { return result; } //不然直接返回boj return obj;}// 测试一下function Person(name, age) { this.name = name; this.age = age;}Person.prototype.say = function() { console.log(this.age);};let p1 = myNew(Person, "lihua", 18);console.log(p1.name);console.log(p1);p1.say();复制代码
对原型链深入理解学习 建议看看 传送门
6 instanceof
先思考?
- instanceof 原理?
右侧对象的原型对象(prototype )是否在左侧对象的原型链上面
- 怎么遍历左侧对象的原型链是关键点?
while(true) 一直遍历 直到原型链的尽头 null 都没有相等就说明不存在 返回 false
具体实现如下
function myInstanceof(left, right) { let leftProp = left.__proto__; let rightProp = right.prototype; // 一直会执行循环 直到函数return while (true) { // 遍历到了原型链最顶层 if (leftProp === null) { return false; } if (leftProp === rightProp) { return true; } else { // 遍历赋值__proto__做对比 leftProp = leftProp.__proto__; } }}// 测试一下let a = [];console.log(myInstanceof(a, Array));复制代码
7 深拷贝
先思考?
- 什么是深拷贝?
js 对引用类型的数据进行复制的时候,深拷贝不会拷贝引用类型的引用,而是将引用类型的值全部拷贝一份,形成一个新的引用类型,这样就不会发生引用错乱的问题,使得我们可以多次使用同样的数据,而不用担心数据之间会起冲突
- 怎么样才能全部拷贝?
递归遍历 直到数据类型不是引用类型才进行赋值操作
具体实现如下
// 定义一个深拷贝函数 接收目标target参数function deepClone(target) { // 定义一个变量 let result; // 如果当前需要深拷贝的是一个对象的话 if (typeof target === 'object') { // 如果是一个数组的话 if (Array.isArray(target)) { result = []; // 将result赋值为一个数组,并且执行遍历 for (let i in target) { // 递归克隆数组中的每一项 result.push(deepClone(target[i])) } // 判断如果当前的值是null的话;直接赋值为null } else if(target===null) { result = null; // 判断如果当前的值是一个RegExp对象的话,直接赋值 } else if(target.constructor===RegExp){ result = target; }else { // 否则是普通对象,直接for in循环,递归赋值对象的所有值 result = {}; for (let i in target) { result[i] = deepClone(target[i]); } } // 如果不是对象的话,就是基本数据类型,那么直接赋值 } else { result = target; } // 返回最终结果 return result;}复制代码
扩展:利用JSON的方法实现简单的深拷贝
let targetObj = JSON.parse(JSON.stringify(sourceObj))复制代码
但是它有局限性
- 不可以拷贝 undefined , function, RegExp 等等类型的
- 会抛弃对象的 constructor,所有的构造函数会指向 Object
- 对象有循环引用,会报错
源自:https://juejin.im/post/5eb8f5cdf265da7bd44254b4
声明:文章著作权归作者所有,如有侵权,请联系小编删除。
前端为什么有的接口明明是成功回调却执行了.catch失败回调_前端进阶高薪必看-手写源码篇(高频技术点)...相关推荐
- 前端为什么有的接口明明是成功回调却执行了.catch失败回调_Web前端:ES6是干什么的?(下)...
大家好,我来了!本期为大家带来的Web前端学习知识是"Web前端:ES6是干什么的?(下)",喜欢Web前端的小伙伴,一起看看吧! 主要内容 Promise Generator A ...
- 前端为什么有的接口明明是成功回调却执行了.catch失败回调_前端知识整理
css 异步编程: 传统的异步解决方案采用回调函数和事件监听的方式 新方案: ES6的新语法Promise promise就是一个容器,里面包含着一个未来才会结束的事件(通常是一个异步操作)的结果.比 ...
- webstorm前端调用后端接口_软件测试面试题:怎么去判断一个bug是前端问题还是后端问题...
大家好,在软件测试面试过程中,经常有面试官问到这个问题,那我们应该如何回答才好呢?少废话,直接看答案: 答案: 在页面上发现bug之后,要想判断这个问题属于后端还是前端,我就需要来判断这个页面背后调用 ...
- H5的jsapi微信支付:wx.chooseWXPay,ios手机在支付成功后不执行success中的回调函数
对于iOS客户端支付成功后不进入chooseWXPay函数success的问题原因是:目前没有得到解答 临时解决方案: 支付成功后,安卓和iOS的返回都是{"errMsg":&qu ...
- 前端中怎么把网页多个文件夹的内容整合成一个_web前端学习笔记
web前端的定义:是面向用户(浏览者)的互联网技术统称.主要包括Web界面的结构.Web界面的外观视觉表现以及Web界面的交互实现. HTML结构语言:超文本标记语言. Web前端的分类:前端设计和前 ...
- Nginx解决前端调用后端接口跨域问题
Nginx解决前端调用后端接口跨域问题 参考文章: (1)Nginx解决前端调用后端接口跨域问题 (2)https://www.cnblogs.com/wangymd/p/11200746.html ...
- 前端与后端接口的交互案例
一.案例描述 1,前端页面提供用户名,密码输入框. 2,通过Ajax发送请求到后端Serlvet. 3,后端Serlvet处理请求,根据输入的用户名和密码返回给前端不同信息 前端访问后端接口通过后端提 ...
- Java回调网址_极光短信- 回调接口 - 极光文档
回调接口 设置并校验回调地址: 回调消息格式说明: 测试回调功能的方法: 设置回调地址 功能说明 设置并校验回调地址 操作路径 Step1:登入控制台 Step2:进入应用模版 Step3:右侧菜单中 ...
- App前端及后端接口,模拟数据及返回值
App前端及后端接口,模拟数据 :接口文档 目录 1. 全局状态码 6 2. 前台 7 2.1. 首页 7 2.1.1. 商品分类列表接口 7 2.1.2. 展示轮播图接口 9 2.1.3. 展示广告 ...
最新文章
- 数据结构源码笔记(C语言):Josephus问题之循环链接表
- 无线网络国际会议排名(zz)
- Codeforces732D Exams
- 解决“Linux无法登录,显示module is unknown”问题
- Python2.x 和 3.x 的区别
- MATLAB中的曲线拟合
- python网格搜索核函数_python机器学习——超参数网格搜索
- thoughtworks业务需求分析师面试总结
- 计算机专业人才需求大吗,对计算机专业人才需求现状
- SQL2005安装错误1706,安装程序找不到需要的文件。请检查……,SQL没有安装OWC11”解决方法...
- 晶圆划片如何提高切割品质?陆芯半导体告诉你
- qt linux不能读写u盘文件,Qt读取U盘文件内容
- 风口解析 | 现代食品 | 005 | 高质量食品供应链
- 福州华侨中学计算机老师,三尺讲台著妙笔 谱写侨习好韶光——记2015级福州华侨中学实习队工作检查...
- Java知识点总结【6】抽象类和接口
- InDesign插件--常规功能开发--版面调整--js脚本开发--ID插件
- 基于微信小程序的快递取件及上门服务
- Bayesian Face Revisited: A Joint Formulation论文笔记
- Linux usb子系统 _usb-skeleton.c精析
- creo 6.0—11:圆角、倒角绘制,文本(文字)创建
热门文章
- 计算机网络常见面试真题详解
- Diango博客--2.博客从“裸奔”到“有皮肤”
- 趣解 XSS和CSRF的原理
- 激活函数之 Sigmoid、tanh、ReLU、ReLU变形和Maxout
- MySQL 之 information_schema
- 【分享】 codeReview 的重要性
- pvrect r语言 聚类_R语言实现KEGG通路富集可视化
- 浅析C#中构建多线程应用程序
- java 线程池 wait,Java 多线程 之 wait等待 线程实例
- ArcGis dbf读写——挂接Excel到属性表 C#