四星面试题

01 解释下JavaScript中this是如何工作的。

1. this永远指向函数运行时所在的对象，而不是函数被创建时所在的对象。匿名函数或不处于任何对象中的函数指向window 。
2. 如果是call，apply,with，指定的this是谁，就是谁。
3. 普通的函数调用，函数被谁调用，this就是谁。

   02 异步线程，轮询机制，宏任务微任务

   https://blog.csdn.net/u013362969/article/details/89714436
   https://www.cnblogs.com/ckAng/p/11133643.html
   https://zhuanlan.zhihu.com/p/33058983[

](https://www.jb51.net/css/56268.html)

03 说一说盒子模型

布局的时候使用的，div ，div的 margin padding border
普通盒模型、怪异盒模型的区别
ie 和其他浏览器对盒模型的 margin 和 padding的解析有区别
https://www.imooc.com/article/68238

04 async await 和promise和generator有什么区别

1. 这几种都可以解决异步操作的地狱回调问题
2. async await 和promise对象的区别：
3. async和promise都是异步方法，区别是async生成的结果是promise对象，async是promise的终结版。
4. await只能在async中使用，await是阻塞的意思，就是暂停，你一起调用2个接口，第一个执行完，不输出结果，要等最第二个接口执行完，才返回这两个的结果。是属于将异步操作转化为同步操作的做法
5. async await和generator：
async是Generator的语法糖 ，也就是说，async是对generator的实现，而generator代码更复杂。
6. generator 除了能解决回调地域问题，还可以作为迭代器使用。generator 语法一般用于redux-saga
7. redux-saga 一般在umi或dva框架中使用

05 css横向居中纵向居中

https://www.cnblogs.com/xiaoxueer/p/11849997.html
https://blog.csdn.net/weixin_37580235/article/details/82317240

06 vue项目webpack配置：

http://www.manongjc.com/article/54132.html

 publicPath: './',  //基本路径
 outputDir: 'dist',  //输出文件目录
 assetsDir:"static",//放置静态资源的目录
 indexPath:"index.html"//html的输出路径
   开发生产共同配置
      resolve: {
        alias: {
          '@': path.resolve(__dirname, './src'),
          '@c': path.resolve(__dirname, './src/components'),
          '@p': path.resolve(__dirname, './src/pages')
        }  别名配置
css配置
css: {
    extract: true, // 是否使用css分离插件 ExtractTextPlugin
    sourceMap: false, // 开启 CSS source maps?
    loaderOptions: {
      css: {}, // 这里的选项会传递给 css-loader
      postcss: {} // 这里的选项会传递给 postcss-loader
    }, // css预设器配置项 详见https://cli.vuejs.org/zh/config/#css-loaderoptions
    modules: false // 启用 CSS modules for all css / pre-processor files.
  },
  proxy 跨域的配置
   devServer: {
    open: process.platform === 'darwin',
    host: '0.0.0.0', // 允许外部ip访问
    port: 8022, // 端口
    https: false, // 启用https
    overlay: {
      warnings: true,
      errors: true
    }, // 错误、警告在页面弹出
    proxy: {
      '/api': {
        target: 'http://www.baidu.com/api',
        changeOrigin: true, // 允许websockets跨域
        // ws: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    } // 代理转发配置，用于调试环境
  },

https://www.cnblogs.com/jing-tian/p/11266796.html

07 vue webpack打包优化：

1.babel-plugin-component ,减少js包的大小，将插件(如element-ui)和自己写的js分开打包，按需加载
2. 路由懒加载：使用import(/webpackChunkName:”group-foo”/‘./Foo.vue’)
可以完成按需加载页面，避免首页加载内容过多而导致的白屏问题
3.使用 UglifyPlugin （webpack.optimize.UglifyJsPlugin）对代码进行压缩
4.使用该插件image-webpack-loader 进行图片压缩

1: 引入：
require("image-webpack-loader")
2：配置：
  module: {
    rules: [
    ...(config.dev.useEslint ? [createLintingRule()] : []),
    {
      test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
      loader: 'url-loader',
      options:   {
       loader: 'image-webpack-loader',
       options: {
        bypassOnDebug: true,
      }
    }
  },

5.由于webpack打包后的js过大，以至于在加载资源时间过长。所以将文件打包成多个js文件，在需要的时候按需加载

new commonsChunkPlugin({
 name:'charts',
 chunks:['commons'] 
 minChunks:function(module){
  return (
   module.resource &&
   /\.js$/.test(module.resource) &&
   module.resource.indexOf(
   path.join(__dirname, '../node_modules')
   ) === 0 && ['jquery.js', 'highcharts.js','echarts'].indexOf( module.resource.substr(module.resource.lastIndexOf('/')+1).toLowerCase() ) != -1
  )
 }
}) 
}

08 vue新特性

https://www.cnblogs.com/bob-zb/p/12481014.html

09 vue-router实现路由懒加载(动态加载路由)

https://blog.csdn.net/xm1037782843/article/details/88225104
答:三种方式
第一种：vue异步组件技术 ==== 异步加载，vue-router配置路由 , 使用vue的异步组件技术 , 可以实现按需加载 .但是,这种情况下一个组件生成一个js文件。
第二种：路由懒加载(使用import)。
第三种：webpack提供的require.ensure()，vue-router配置路由，使用webpack的require.ensure技术，也可以实现按需加载。这种情况下，多个路由指定相同的chunkName，会合并打包成一个js文件。

10 vue页面第一次渲染执行的几个钩子函数

beforeCreate created beforeMounte mounted
##13. vue页面跳转时执行那几个钩子，
beforeCreate created beforeMounte mounted beforeDestory destoryed
##14. v-if v-for 在哪个钩子函数中解析
当 Vue 处理指令时，v-for 比 v-if 具有更高的优先级
避免 v-if 和 v-for 用在一起必要
永远不要把 v-if 和 v-for 同时用在同一个元素上
##15. vue前端路由原理 路由模式
history hash html5 历史记录

11 计算属性

计算属性 watch ,计算属性就是当其依赖属性的值发生变化时，这个属性的值会自动更新，与之相关的DOM部分也会同步自动更新。

计算属性有缓存，计算属性的函数会自动调用。普通函数需要手动触发

计算属性和watch ，异步操作或大数据量操作使用watch

1.watch擅长处理的场景：一个数据影响多个数据

2.computed擅长处理的场景：一个数据受多个数据影响

https://www.jianshu.com/p/a69a9bac9dc3

12 vue为什么有时候修改了值，可以打印修改的值，但是页面上不会改变

1. 由于 JavaScript 的限制，Vue 不能检测数组和对象的变化。尽管如此我们还是有一些办法来回避这些限制并保证它们的响应性。
2. 对于对象：
   Vue 无法检测 property 的添加或移除
   Vue 不能检测以下数组的变动：
   当你利用索引直接设置一个数组项时，例如：vm.items[indexOfItem] = newValue
   当你修改数组的长度时，例如：vm.items.length = newLength
   当页面上的值不发生变化时，可以使用 $.set
   对象还可以使用 :assign
   数组还可以使用:splice

13 如何给vue自定义组件添加点击事件？

需要在@click后面加上.native,官方对于native的解释为：
.native -——监听组件根元素的原生事件

14 钩子函数(小程序)

--7.1 App 注册小程序。接受一个 Object 参数，其指定小程序的生命周期回调等。
钩子函数有：
属性    类型    默认值    必填    说明    最低版本
onLaunch    function        否    生命周期回调——监听小程序初始化。    
onShow    function        否    生命周期回调——监听小程序启动或切前台。    
onHide    function        否    生命周期回调——监听小程序切后台。    
onError    function        否    错误监听函数。    
onPageNotFound    function        否    页面不存在监听函数。    1.9.90
onUnhandledRejection
--getApp  获取小程序的实例
--var myApp = getApp();
--myApp.globalData.全局变量名  可以获取在app.js中定义的全局变量的值
--全局变量可以跨页面传参
--7.2 Page(Object object)
注册小程序中的一个页面。接受一个 Object 类型参数，其指定页面的初始数据、生命周期回调、事件处理函数等。
页面的钩子函数：
**onLoad    function            生命周期回调—监听页面加载   只执行一次的
**onShow    function            生命周期回调—监听页面显示   执行多次
**onReady    function            生命周期回调—监听页面初次渲染完成 只执行一次的
**onHide    function            生命周期回调—监听页面隐藏   执行多次
**onUnload    function            生命周期回调—监听页面卸载     只执行一次的
**onPullDownRefresh    function            监听用户下拉动作
**onReachBottom    function            页面上拉触底事件的处理函数
**onShareAppMessage    function            用户点击右上角转发
onPageScroll    function            页面滚动触发事件的处理函数
onResize    function            页面尺寸改变时触发，详见 响应显示区域变化
onTabItemTap    function            当前是 tab 页时，点击 tab 时触发
## 7.深浅拷贝： ****

1、区别： 浅拷贝/深度拷贝
判断： 拷贝是否产生了新的数据还是拷贝的是数据的引用
知识点：对象数据存放的是对象在栈内存的引用，直接复制的是对象的引用

2、常用的拷贝技术
for循环完成深拷贝
二、深拷贝
1、js数组的slice方法
var arr1 = [“前端”,”安卓”,”苹果”];
var arr2 = arr1.slice(0);
arr2[0] = “后端”;
console.log(“原始值：” + arr1 );//前端,安卓,苹果
console.log(“新值：” + arr2);//后端,安卓,苹果
理解：通过JS的slice方法，改变拷贝出来的数组的某项值后，对原来数组没有任何影响。
缺点：适用于对不包含引用对象的一维数组的深拷贝
2、js数组的concat方法
var arr1 = [“前端”,”安卓”,”苹果”];
var arr2 = arr1.concat();
arr2[0] = “后端”;
console.log(“原始值：” + arr1 );//前端,安卓,苹果
console.log(“新值：” + arr2);//后端,安卓,苹果
理解：concat方法，原数组和新数组修改某值后，不会改变。
缺点：适用于对不包含引用对象的一维数组的深拷贝

1). arr.concat(): 数组深拷贝
　　2). arr.slice(): 数组深拷贝
　　3).Object.assign()对象深拷贝
　　4). JSON.parse(JSON.stringify(arr/obj)): 数组或对象深拷贝, 但不能处理函数数据
　　5). 浅拷贝包含函数数据的对象/数组
　　6). 深拷贝包含函数数据的对象/数组
对于多层对象和数组:可以使用 递归调用、JSON.parse(JSON.stringify(arr/obj))、jquery的extend方法来实现深拷贝

https://blog.csdn.net/xuexizhe88/article/details/80990529
https://www.cnblogs.com/echolun/p/7889848.html

15 flex 的水平居中和垂直居中

水平：justify-content:center; 垂直：align-content：center;
flex:1 的值是1 1 0%，【父控件有剩余空间占1份放大，父控件空间不足按1缩小，自身的空间大小是0%】 *
flex属性 是 flex-grow、flex-shrink、flex-basis三个属性的缩写。
推荐使用此简写属性，而不是单独写这三个属性。
flex-grow：定义项目的的放大比例；
默认为0，即 即使存在剩余空间，也不会放大；
所有项目的flex-grow为1：等分剩余空间（自动放大占位）；
flex-grow为n的项目，占据的空间（放大的比例）是flex-grow为1的n倍。
flex-shrink：定义项目的缩小比例；
默认为1，即 如果空间不足，该项目将缩小；
所有项目的flex-shrink为1：当空间不足时，缩小的比例相同；
flex-shrink为0：空间不足时，该项目不会缩小；
flex-shrink为n的项目，空间不足时缩小的比例是flex-shrink为1的n倍。
flex-basis： 定义在分配多余空间之前，项目占据的主轴空间（main size），浏览器根据此属性计算主轴是否有多余空间，
默认值为auto，即 项目原本大小；
设置后项目将占据固定空间。
所以flex属性的默认值为：0 1 auto （不放大会缩小）
flex为none：0 0 auto （不放大也不缩小）
flex为auto：1 1 auto （放大且缩小）

16 this指向 ，箭头函数的this指向

this的指向在函数定义的时候是确定不了的，只有函数执行的时候才能确定this到底指向谁，实际上this的最终指向的是那个调用它的对象