前端朋友出去问到的面试题 2020-10-9

1、var let const 区别暂时性死区

 函数提升优先于变量提升，函数提升会把整个函数挪到作用域顶部，变量提升只会把声明挪到作用域顶部var 存在提升，我们能在声明之前使用。 let 、 const 因为暂时性死区的原因，不能在声明前使用var 在全局作用域下声明变量会导致变量挂载在 window 上，其他两者不会let 和 const 作用基本一致，但是后者声明的变量不能再次赋值

2、js 如何实现继承， class、原型继承、组件继承

 1 > 改变原型对象的指向 将子类函数 (B) 的 prototype 指向父类构造函数的 (A) 的一个实例化对象 (a) 那么这个子类的构造函数构造出的实例化对象 (b) 就可以访问 (A) 的属性和方法 缺陷 : 由于 B 的 prototype 改变 那么保存在原来 B 中的 prototype 得属性和方法 就无法访问解决方案 : 先进行原型指向的改变 在定义子类的原型属性与方法2 > 借用构造函数实现继承 利用 call 方法 或 apply 方法 借用父代的构造函数 在子代构造函数中加入添加父代构造函数.call(this.父代形参列表) 同时在子代形参中加入父代形参列表 相当于在子代构造函数中 也写入了父代构造函数中定义的属性和方法 优点 : 可在子代构造函数实例化对象时自己初始化父代的属性和方法 不再是继承的固定实现缺点 : 无法进行原型链查找 无法访问父代原型中的属性及方法3 > 组合继承法 A . 改变 prototype 指向子代与父代之间形成的原型链 可以继承父代原型的属性和方法B . 借用父代的构造函数,实现继承和父代构造函数内的属性与方法 可以实例化子代时自己初始化这些属性与方法

3、事件流事件捕获，处于目标阶段、事件冒泡、事件委托

 stopPropagtion( ) 阻止事件冒泡preventDefualt( ) 阻止默认行为事件委托利用的是 事件冒泡的原理

4、this 指向 - ES6 之前 this， ES6 箭头函数 this

 在 es6 之前1 > 全局打印 this 指向 window 2 > (不开启严格模式) this 指向 windeo 严格模式 this 指向 undefind3 > 定时任务中 this 指向 windeo 4 > 事件绑定 this 指向事件类型 也就是点之前的事件源5 > 对象方法中 this 指向当前对象6 > 构造函数中的 this 指向 new 出来的实例es6 之后1 > 箭头函数不绑定 this 关键字 箭头函数中的 this 指向的是函数定义位置的上下文中的 this 箭头函数指向定义位置中的 this指向2 > 箭头函数内部 不能使用 arguments 来获取实参 使用剩余参数写法 获取所有实参3 > 箭头函数不是构造函数 不能实例化

5、如何改变 this 指向，call、apply、bind

    call : 调用 call 函数 会立即执行 改变this指向 第一个参数是要修改的 this指向 传递多个参数使用 , 隔开 如果传参为空或null 则默认为全局传参 不改变this指向 apply : 调用了 apply 函数会立即执行 改变 this 指向 第一个参数是要修改 this 指向 传递参数用数组形式 不改变 this 指向bind : 调用了 bind 方法 函数不会立即执行 返回一个改变了 this 指向的新函数 第一个参数是要修改的 this 指向 传递多个参数使用 , 隔开 如果不需要改变 this 指向的话  第一个参数 传递 null

6、什么是跨域，如何解决跨域， jsonp(原理)、代理 proxy

    跨域 : 就是从一个域名去请求另一个域名的资源 跨域时浏览器不能执行其他域名网站的脚本 是由浏览器同源策略造成 为啥要跨域因为在实际开发中经常会有跨域的情况, 公司很多项目 会有很多子域名 各个项目或者网站之间需要相互调用对方的资源所以要跨域如何解决跨域 : 1 > 通过 josnp 实现跨域 原理 : 是利用 script 标签的跨域能力 来发送请求2 > 设置 script 的 src 属性 一定要设置回调函数  3 > 第三方代理 实现跨域4 > document.domain + iframe跨域 ( iframe 被淘汰的技术 ) 5 > location.hash + iframe ( iframe 被淘汰的技术 ) 6 > window.name + iframe跨域 ( iframe 被淘汰的技术 ) 7 > postMessage跨域8 > 跨域资源共享（CORS）9 > WebSocket协议跨域

7、get、post 请求区别是什么、ajax 的原理 XMLHttpRequest

    get 请求参数 在 url 中显示 使用 post 不会显示出来get 发送数据量小 post 请求发送数据量大 get 请求 需要注意缓存问题 post 请求  不需要担心这个问题ajax 的原理   第一步：创建XMLHttpRequest对象var xhr = new XMLHttpRequest();第二步：告诉Ajax对象要向哪发送请求，以什么方式发送请求xhr.open('get', 'http://localhost:3000/first');第三步：发送请求xhr.send();第四步：获取服务器端响应到客户端的数据xhr.onload = function (){ console.log(xhr.responseText) }

8、Promise、await、async

   promise 是一个 josn 对象 使用 promise 必须要 then 来处理所得到的的 JOSN 对象async 函数可以代码更简洁 不需要像 promise 一样 不需要then 也不需要定义多余的data变量 避免了代码嵌套await 必须写在 async 函数中 async 会隐式的返回一个 promise await 不能在最外层代码使用

9、面向对象三角形画图，构造函数、prototype、实例对象__proto_(查找规则)

   创建一个构造函数(属性、方法), 并生成实例，利用构造函数来创建实例  要和 new 一起使用 创建对象的三种方式 利用 new Object ( ) 的方式利用对象字面量的方式 { }利用构造函数创建对象new 在执行时 会做四件事 在内存中创建一个新的空对象让 this 指向这个新的对象执行构造函数里面的代码 给这个新对象添加属性和方法返回这个新对象 ( 所以构造函数中不需要 return )JS 规定 每一个构造函数都有一个 prototype 属性 指向另一个对象 --> 原型对象每个对象都有一个__proto__ 指向 构造函数的 prototype 原型对象 他们都有一个constructor 属性 constructor 称为构造函数 因为他指回构造函数本身查找规则 : 当访问一个对象的属性 ( 包括方法 )时, 首先查找这个对象自身有没有该属性 如果没有就查找他的原型 ( 也就是__proto__ 指向的 prototype 原型对象) 以此类推 一直找到 Object 为止 ( null )

10、Vue 生命周期，必会， created ~ mounted 之间 Vue 做了哪些东西

  生命周期 : 第一阶段 : beforeCreate 初始化的过程 这时候 data 数据访问不到 同时 methods 方法也不能调用只能访问一些生命周期的钩子函数 也可以说 只能访问 vue 提供的一些方法第二阶段 : created 阶段 vue 中的 data 和 methods 已经初始化完成 能访问到 data 中的数据, 以及methods 中的方法 若想最早发送 axios 请求 获取数据 最早应该在 created 中第三阶段 : beforeMount 阶段 是 vue 对代码进行编译阶段 若网速特慢 则页面能看到插值表达式 vue开始从 data 中获取数据 取出来数据和插值表达式以及指令等进行结合渲染 该阶段是在内存中进行,也就是说 页面上看不到具体数据第四阶段 : mounted 这是 vue 创建阶段的第四个生命周期 表示代码在内存中编译成功 并渲染到页面中用户可看到已渲染好的页面 当执行完 mothods 就代表 vue 实例已经创建好 此时 我们可以对页面元素进行操作第五阶段 : beforeUpdate 这是 vue 运行的第五个阶段 是运行阶段的第一个生命周期 此时页面中显示的数据还是旧的 但是 data 中的数据已经是最新的了第六阶段 : updated 这是 vue 第六个阶段 是运行阶段的第二个生命周期 此时页面显示的数据和 data 中的数据都是最新的 这一步 vue 根据 data 中的最新数据生成了一份新的 DOM 结构在内存中当最新的 DOM 树被渲染到页面的时候 就完成了 data --> view 的更新与渲染第七阶段 : beforeDestroy 解除绑定 销毁子组件以及事件监听器第八阶段 : destroyed 销毁完毕

11、v-if 和 v-show，以及他们的区别，Vue 指令

 v-if 是 "真正" 的条件渲染 因为他会确保在切换过程中 条件快内的事件监听器和子组件适当的被销毁和重建 简单的说就是 DOM 元素结构是否能够渲染v-show 在频繁切换显示与否的时候 使用 v-show ; 是控制元素是否显示 不会操作 DOM

12、什么是渐进式框架，

 声明式渲染 --> 组件系统 --> 客户端路由 --> 集中式状态管理 --> 项目构建说白了 就是现在已经有一个应用项目 可以在其中的一两个页面来使用 vue 带来更丰富的交互体验 但是想在前端实现更多的 更加复杂的逻辑功能 vue 的核心库和生态系统也是可以满足相关业务需求的

13、嵌套路由获取参数

 1 > 如果是模块化机制，需要调用 Vue.use ( VueRouter ) 2 > 定义路由组件3 > 定义路由4 > 创建 router 实例5 > 创建和挂载根实例6 > 嵌套路由是通过 children ,他同样是一个数组7 > 动态路由的创建 主要是用 path 属性过程中 使用动态路径参数 以冒号开头 如 :id 当匹配到这个路由时 参数值会被设置到 this.$router.params下 可以通过这个属性来获取到动态参数

14、Vue 组件之间传值父 --> 子子 -->父兄弟 var bus = new Vue() | Vuex

 父传子 父 : 引入子组件 <child : 方法名 = "传入的值"></child>    子 : 在 props 中接收["方法名"] 子传父 子 : this.$emit( '字方法名', 传的值)           父 : 在 html 中 < child @字方法名 = "字方法名">< /child >兄弟传方法一   传 : 引入 bus.js 文件 bus.$emit ( '传方法名', 传的值 ) 接 : 在 mounted 中  bus.$on("传方法名", (传的值) => {} )兄弟传方法二   传 : 为了方便我们的操作 我们就不用引入 bus.js 而是直接调用 this.$root.$emit("传方法名", 传的值)接 : this.$root.$off ('传方法名')         this.$root.$on('传方法名' , function (传的值) {} )这里的 this.$root.$off( '传方法名' ) 就是为了每一次的进入的时候都要关闭一下

15、Vue 响应式原理或者 v-model 原理, v-bind、v-on:input

 当你把一个普通的 JS 对象传入 Vue 实例 作为 data 选项 Vue 将遍历次对象的所有属性 并使用 Object.defineProperty 把这些数据全部转为 getter/setter  每个组件实例 都有对应的一个 watcher 实例 他会在组件渲染的过程中把"接触"过得数据属性记录为依赖 之后当依赖项的 setter 出发时 ,  会通知 watcher 从而使他关联的组件重新渲染

16、移动端如何适配页面 viewport 网达、新安网

 通过设置 < meta name = "viewport"> 视口标签来视口初始大小 供移动设备使用视口分为 布局视口  视觉视口  理想视口 ( 理想视口 通过 <meta name = "viewport" content = "width = device-width， initial-scale = 1.0"> 来实现 )百分比方案 使用百分比 来定义宽度 高度 用 px 固定 根据可视区的实时尺寸来进行调整 尽可能的使用各种分辨率 通常使用 max-width/min-widthrem - flexible 是相对长度单位 rem 方案中的演示设计为相对于根元素 font-size 及计算值的倍数 根据屏幕宽度 设置 html 标签的 font-size 在布局时使用rem 单位布局 达到自适应的目的  是弹性布局的一种实现方式flex

17、你遇到过哪些兼容性问题，点击高亮、前缀

 不同浏览器的标签默认外补丁margin和内补丁padding不同  解决方案 使用CSS通配符*，设置内外补丁为0 即 : *{ margin: 0; padding: 0;}如何解决兼容性问题 : 浏览器 CSS 样式初始化  浏览器私有属性 CSS hack (针对不同浏览器写不同的特定CSS样式)

18、模块化、组件化

 哪些问题 CMD\AMD\CommonJSES6\ import export default

19、js 异步原理单线程 + 事件队列

 打印顺序是什么？为什么？console.log('1')setTimeout(function () {console.log('2')}, 0)console.log('3')打印的是 1、3、2'JS 是单线程的 同步和异步的任务 将同步代码放在执行栈中依次执行 将异步代码放在执行队列中执行栈 --- 放置的是同步代码执行队列 (任务队列) --- 异步任务 ( 绑定事件/定时任务/ajax请求 )JS执行顺序 1 > 就是把同步任务推入主线程 异步任务推入任务队列中2 > 把执行栈中的同步任务 推入到主线程中 开始执行3 > 执行栈为空后 读取任务队列中的微任务 推入执行栈4> 循环执行任务队列 知道任务列表为空

20、你对自己未来两年计划是是什么？

21、你对前端怎么看

前端朋友出去问到的面试题 2020-10-9相关推荐

java 实体类包含list 怎么取值_舅舅是面试官，偷偷告诉你们面试官最爱问的Java面试题...
2015 年,因为工作岗位的变动,舅舅开始负责给集团招聘一些技术人员,出于对公司的负责,也为了更好的胜任技术经理的职位,在面试的这件事上,舅舅做了大量的"功课",首先研究了几乎所有 ...
前端面试被问到性能优化该肿么办！
性能优化1 前端面试被问到性能优化该肿么办! 1.1 页面重构怎么操作? 网站重构:在不改变外部行为的前提下,简化结构.添加可读性,而在网站前端保持一致的行为. 也就是说是在不改变UI的情况下,对网站 ...
面试官都会问的Mybatis面试题，你会这样回答吗？
一.概述面试,难还是不难?取决于面试者的底蕴(气场+技能).心态和认知及沟通技巧.面试其实可以理解为一场聊天和谈判,在这过程中有心理.思想上的碰撞和博弈.其实你只需要搞清楚一个逻辑:"面试 ...
js怎么在一个div中嵌入另一网站_好程序员web前端学习路线分享HTML5常见面试题集锦一...
好程序员web前端学习路线分享HTML5常见面试题集锦,接下来将会持续为大家分享几篇HTML5常见面试题. 1.布局左边20% 中间自适应右边200px 不能用定位答案:圣杯布局/双飞翼布局或者 ...
最常问的MySQL面试题集合
除了基础题部分,本文还收集整理的MySQL面试题还包括如下知识点或题型: MySQL高性能索引 SQL语句 MySQL查询优化 MySQL高扩展高可用 MySQL安全性问题1:char.varcha ...
朋友公司招聘用的一套C#基础面试题，10个码农8个错2个蒙，我也跳坑了…
朋友公司的一套面试题,很有意思,参见如下代码: class Program{static void Main(string[] args){var t = Num();Console.WriteLin ...
【前端小小白】—每日5道面试题打卡（十五）
[前端小小白]-每日5道面试题打卡(十五) 每天进步1% 不多就1% 一.数组的方法有哪些? var list = [1,2,3];list.pop();//删除数组的最后一个元素 var list ...
java除了框架还需要什么_除了框架，前端面试还问什么
原标题:除了框架,前端面试还问什么现在的web前端技术的发展很快,各种新技术层出不穷.前后端分离的开发模式也让前端开发者的地位日益提升,自然有很多小伙伴慕名入了前端开发的坑,希望能在前端领域大展宏图 ...
企业面试题｜最常问的MySQL面试题集合（二）
MySQL的关联查询语句六种关联查询交叉连接(CROSS JOIN) 内连接(INNER JOIN) 外连接(LEFT JOIN/RIGHT JOIN) 联合查询(UNION与UNION ALL) ...

前端朋友出去问到的面试题 2020-10-9

1、var let const 区别暂时性死区

2、js 如何实现继承， class、原型继承、组件继承

3、事件流事件捕获，处于目标阶段、事件冒泡、事件委托

4、this 指向 - ES6 之前 this， ES6 箭头函数 this

5、如何改变 this 指向，call、apply、bind

6、什么是跨域，如何解决跨域， jsonp(原理)、代理 proxy

7、get、post 请求区别是什么、ajax 的原理 XMLHttpRequest

8、Promise、await、async

9、面向对象三角形画图，构造函数、prototype、实例对象__proto_(查找规则)

10、Vue 生命周期，必会， created ~ mounted 之间 Vue 做了哪些东西

11、v-if 和 v-show，以及他们的区别，Vue 指令

12、什么是渐进式框架，

13、嵌套路由获取参数

14、Vue 组件之间传值父 --> 子子 -->父兄弟 var bus = new Vue() | Vuex

15、Vue 响应式原理或者 v-model 原理, v-bind、v-on:input

16、移动端如何适配页面 viewport 网达、新安网

17、你遇到过哪些兼容性问题，点击高亮、前缀

18、模块化、组件化

19、js 异步原理单线程 + 事件队列

20、你对自己未来两年计划是是什么？

21、你对前端怎么看

前端朋友出去问到的面试题 2020-10-9相关推荐

最新文章

热门文章

前端朋友出去问到的面试题 2020-10-9

1、var let const 区别 暂时性死区

2、js 如何实现继承， class、原型继承、组件继承

3、事件流 事件捕获，处于目标阶段、事件冒泡、事件委托

4、this 指向 - ES6 之前 this， ES6 箭头函数 this

5、如何改变 this 指向，call、apply、bind

6、什么是跨域，如何解决跨域， jsonp(原理)、代理 proxy

7、get、post 请求区别是什么、ajax 的原理 XMLHttpRequest

8、Promise、await、async

9、面向对象三角形画图，构造函数 、prototype、实例对象__proto_(查找规则)

10、Vue 生命周期，必会， created ~ mounted 之间 Vue 做了哪些东西

11、v-if 和 v-show，以及他们的区别，Vue 指令

12、什么是渐进式框架，

13、嵌套路由获取参数

14、Vue 组件之间传值 父 --> 子 子 -->父 兄弟 var bus = new Vue() | Vuex

15、Vue 响应式原理 或者 v-model 原理, v-bind、v-on:input

16、移动端如何适配页面 viewport 网达、新安网

17、你遇到过哪些兼容性问题， 点击高亮、前缀

18、模块化、组件化

19、js 异步原理 单线程 + 事件队列

20、你对自己未来两年计划是是什么？

21、你对前端怎么看

前端朋友出去问到的面试题 2020-10-9相关推荐

最新文章

热门文章

1、var let const 区别暂时性死区

3、事件流事件捕获，处于目标阶段、事件冒泡、事件委托

9、面向对象三角形画图，构造函数、prototype、实例对象__proto_(查找规则)

14、Vue 组件之间传值父 --> 子子 -->父兄弟 var bus = new Vue() | Vuex

15、Vue 响应式原理或者 v-model 原理, v-bind、v-on:input

17、你遇到过哪些兼容性问题，点击高亮、前缀

19、js 异步原理单线程 + 事件队列