南阳旅游网站建设,珠宝网站开发,河北响应式网站建设,一个网站做数据维护需要多久目录
面试官#xff1a;请你谈谈JS的this指向问题
面试官#xff1a;说一说call apply bind的作用和区别#xff1f;
面试官#xff1a;请你谈谈对事件委托的理解
面试官#xff1a;说一说promise是什么与使用方法#xff1f;
面试官#xff1a;说一说跨域是什么请你谈谈JS的this指向问题
面试官说一说call apply bind的作用和区别
面试官请你谈谈对事件委托的理解
面试官说一说promise是什么与使用方法
面试官说一说跨域是什么如何解决跨域问题
面试官说一说JavaScript有几种方法判断变量的类型
面试官说一说JS实现异步的方法
面试官说一说数组去重都有哪些方法
面试官说一说es6中箭头函数
面试官说一说JS变量提升 每天10道题100天后搞定所有前端面试的高频知识点加油在看文章的同时希望不要直接看答案先思考一下自己会不会如果会自己的答案是什么想过之后再与答案比对是不是会更好一点当然如果你有比我更好的答案欢迎评论区留言一起探讨技术 之美。
面试官请你谈谈JS的this指向问题 我呃~我们知道this中有个准则就是谁调用就指向谁这句话潜移默化的会导致我们出现一些误区现将可能会出错的情况总结如下并付出代码 1我们要知道在全局的时候去得到这个this的话this都会指向windows因为我们在全局的情况下使用的东西都会被挂载到window上。
scriptconsole.log(this) // 指向windowfunction a(){console.log(this)}a() // 相当于 window.a()指向的依旧是 window
/script
2我要知道this的指向是会指向上一个调用者的代码如下
看完了代码我们知道虽然本质上是由于a才调用了d函数但是中间还是有一层是c调用了d函数所以this指向上一级会有一个就近原则的这点很重要
scriptvar a {b:10,c:{b:12,d:function(){console.log(this)}}}a.c.d() // {b: 12, d: ƒ}
/script
3我们要知道箭头函数是没有作用域的也就是说是没有自己的this它的this永远向的是上一级的this下面给出一道某大厂的面试题大家可以猜一下最后的打印结果是什么
假设你已经仔细的看完了这道面试题相信你心中已经有了答案是66了为什么呢要知道箭头函数是没有自己的this的所以需要其去上一级去寻找this而上一级处于全局作用域所以打印的便是全局已经挂载的id数66。
scriptvar id 66function a(){setTimeout((){console.log(this.id)},500)}a({id:22}) // 猜猜结果是什么
/script
那我们如何改变this的指向去控制this指向我们想要的结果呢给出如下三种方法
scriptvar id 66function a(){setTimeout((){console.log(this.id || this)},500)}// call {} 改变之后并执行一次a.call({id:22}) // 打印22 // apply [] 改变之后并执行一次a.apply([12]) // 打印 [12]// bind() 不调用只改变this指向a.bind(a(id32)) // 32
/script
面试官说一说call apply bind的作用和区别 我呃~好的总结如下 call apply bind三个方法都可以用来改变函数的this指向具体区别如下 1fn.call (newThis,params) call函数的第一个参数是this的新指向后面依次传入函数fn要用到的参数。会立即执行fn函数。 2fn.apply (newThis,paramsArr) apply函数的第一个参数是this的新指向,第二个参数是fn要用到的参数数组会立即执行fn函数。 3fn.bind (newThis,params) bind函数的第一个参数是this的新指向后面的参数可以直接传递也可以按数组的形式传入。 不会立即执行fn函数且只能改变一次fn函数的指向后续再用bind更改无效。返回的是已经更改this指向的新fn 面试官请你谈谈对事件委托的理解 我呃~好的事件委托就是利用事件冒泡只指定一个事件处理程序就可以管理某一类型的所有事件。说白了就是将还没有出现的事件挂载到已经出现的事件上。整出代码如下 body
ul idulli0/lili1/lili2/lili3/lili4/lili5/li
/ul
button idbtn点我添加一个li/button
script// 事件委托let ul document.getElementById(ul)ul.addEventListener(click,(event){console.log(event)event event || window.eventlet target event.targetif(target.nodeName LI){alert(target.innerHTML)}})let btn document.getElementById(btn)btn.addEventListener(click,(){let li document.createElement(li)li.textContent ul.children.lengthul.appendChild(li)})
/script
/body 面试官说一说promise是什么与使用方法 我呃~好的Promise是ES6提供的一个构造函数可以使用Promise构造函数new一个实例Promise构造函数接收一个函数作为参数这个函数有两个参数分别是两个函数 resolve和rejectresolve将Promise的状态由等待变为成功将异步操作的结果作为参数传递过去reject则将状态由等待转变为失败在异步操作失败时调用将异步操作报出的错误作为参数传递过去。实例创建完成后可以使用then方法分别指定成功或失败的回调函数也可以使用catch捕获失败then和catch最终返回的也是一个Promise所以可以链式调用。 Promise的作用 Promise是异步微任务解决了异步多层嵌套回调的问题让代码的可读性更高更容易维护 Promise使用 Promise的特点 1对象的状态不受外界影响 2一旦状态改变就不会再变任何时候都可以得到这个结果 3resolve 方法的参数是then中回调函数的参数reject 方法中的参数是catch中的参数 4then 方法和 catch方法 只要不报错返回的都是一个fullfilled状态的promise 应用场景 解决地狱回调问题 具体使用方法参考我之前的文章一文搞懂JS中的Promise 面试官说一说跨域是什么如何解决跨域问题 我呃好的总结内容如下 什么是跨域 当前页面中的某个接口请求的地址和当前页面的地址如果协议、域名、端口其中有一项不同就说该接口跨域了。 跨域限制的原因 浏览器为了保证网页的安全出的同源协议策略。 跨域解决方案 cors 目前最常用的一种解决办法通过设置后端允许跨域实现。 res.setHeader(Access-Control-Allow-Origin, *); res.setHeader(Access-Control-Allow-Methods, GET, PUT, OPTIONS, POST); node中间件、nginx反向代理 跨域限制的时候浏览器不能跨域访问服务器node中间件和nginx反向代理都是让请求发给代理服务器静态页面面和代理服务器是同源的然后代理服务器再向后端服务器发请求服务器和服务器之间不存在同源限制。JSONP 利用的原理是script标签可以跨域请求资源将回调函数作为参数拼接在url中。后端收到请求调用该回调函数并将数据作为参数返回去注意设置响应头返回文档类型应该设置成javascript。 面试官说一说JavaScript有几种方法判断变量的类型 我呃好的JavaScript有4种方法判断变量的类型总结如下 typeof 常用于判断基本数据类型对于引用数据类型除了function返回’function‘其余全部返回’object。 instanceof 主要用于区分引用数据类型检测方法是检测的类型在当前实例的原型链上用其检测出来的结果都是true Object.prototype.toString.call()(对象原型链判断方法) 适用于所有类型的判断检测检测方法是Object.prototype.toString.call(数据) 返回的是该数据类型的字符串。 constructor(用于引用数据类型) 用于检测引用数据类型检测方法是获取实例的构造函数判断和某个类是否相同如果相同就说明该数据是符合那个数据类型的这种方法不会把原型链上的其他类也加入进来避免了原型链的干扰。 面试官说一说JS实现异步的方法 我呃~好的所有异步任务都是在同步任务执行结束之后从任务队列中依次取出执行。常见的实现异步的方式如下 回调函数、事件监听、setTimeout定时器、Promise、async/awaitgenerator生成器 面试官说一说数组去重都有哪些方法 我呃~数组去重的方法有很多举几个例子并简单的加以说明如下 利用对象属性key排除重复项 遍历数组每次判断对象中是否存在该属性不存在就存储在新数组中并且把数组元素作为key设置一个值存储在对象中最后返回新数组。 利用Set类型数据无重复项 new 一个 Set参数为需要去重的数组Set 会自动删除重复的元素再将 Set 转为数组返回。 filterindexof 去重 利用 Array 自带的 filter 方法返回 arr.indexOf(num) 等于 index 的num。 reduce includes去重 利用reduce遍历和传入一个空数组作为去重后的新数组然后内部判断新数组中是否存在当前遍历的元素不存在就插入到新数组中。 面试官说一说es6中箭头函数 我呃~好的箭头函数相当于匿名函数简化了函数定义。箭头函数有两种写法当函数体是单条语句的时候可以省略{}和return。另一种是包含多条语句不可以省略{}和return。 箭头函数最大的特点就是没有this所以this是从外部获取就是继承外部的执行上下文中的this由于没有this关键字所以箭头函数也不能作为构造函数。 箭头函数比普通函数的定义写法更加简洁明了和快捷。但是两者又有区别箭头函数没有原型prototype和super所以无法创建this其this是通过继承外部函数环境中的变量获取的所以call、bind、apply都无法改变其this的指向在找不到最外层的普通函数时其this一般指向window箭头函数不能使用new箭头函数没有arguments也不能作为generator函数不能使用yield命令箭头函数不能用于对象域和回调函数动态this中一般用在内部没有this引用。 面试官说一说JS变量提升 我呃~好的变量提升是指JS的变量和函数声明会在代码编译期提升到代码的最前面。 变量提升成立的前提是使用Var关键字进行声明的变量并且变量提升的时候只有声明被提升赋值并不会被提升同时函数的声明提升会比变量的提升优先。 变量提升的结果可以在变量初始化之前访问该变量返回的是undefined。在函数声明前可以调用该函数。 使用let和const声明的变量是创建提升形成暂时性死区在初始化之前访问let和const创建的变量会报错。
