[TOC] # 基础题 ``` function Foo(){ getName = function (){console.log(1)}; return this; } Foo.getName = function (){console.log(2)}; Foo.prototype.getName = function (){console.log(3)}; var getName = function (){console.log(4)}; function getName(){console.log(5)}; Foo.getName(); // 2 getName(); // 4 Foo().getName(); // 1 getName(); // 1 (new Foo()).getName(); // 3 ``` # arguments问题？ 面试题： ``` function func(a,b) { a= 111 console.log(arguments[0]); } func(10); // 111 ``` ``` function func (a, b=2) { // 这里的默认参数用法，导致解析器按照 ES 6 严格模式编译 a= 111 console.log(arguments[0]); } func(10); // 10 ``` 上面两个结果为什么不相同？ ## ES6语法之严格模式 类和模块的内部，默认就是严格模式，所以不需要使用 `use strict` 指定运行模式。只要你的代码写在类或模块之中，就只有严格模式可用。 考虑到未来所有的代码，其实都是运行在模块之中，所以 ES6 实际上把整个语言升级到了严格模式。 严格模式早在ES5中就已经定义，它是一种限制性的JavaScript变体，使用特定语句`"use strict"`就可以开启严格模式。 严格模式其中有一条：  `arguments`不会自动反映函数参数的变化 > `arguments` 对象可以与剩余参数、默认参数和结构赋值参数结合使用。 ``` function foo(...args) { return args; } foo(1, 2, 3); // [1,2,3] ``` > [arguments 详解](https://www.cnblogs.com/passkey/p/10432589.html)：非严格模式函数中 包含有 剩余参数、默认参数或结构赋值参数，那么`arguments`对象将不会追踪参数的变化。 ## 参考 [ES6——关于严格模式](https://www.jianshu.com/p/344470b7f944) [es6函数之严格模式](https://blog.csdn.net/qq_29055201/article/details/86073149) # import 是加载的模块的引用 ES6的import语法告诉我们，模块只能做静态加载。 所谓静态加载，就是你不能写成如下形式： ``` let filename = 'module.js'; import {mod} from './' + filename. ``` 也不能写成如下形式： ``` if(condition) { import {mod} from './path1' } else { import {mod} from './path2' } ``` 但是现在有新提案让 `import` 进行动态加载，虽然还没有被ECMA委员会批准，但是 webpack 已经开始用了。 `import` 的加载是加载的模块的引用，而 `import()` 动态加载的是模块的拷贝，就是类似于 `require()`怎么来说明？看下面的例子： module.js 文件： ``` export let counter = 3; export function incCounter() { counter++; } ``` `main.js` 文件： ``` let filename = 'module.js'; import('./' + filename).then(({counter, incCounter})=>{ console.log(counter); //3 incCounter(); console.log(counter); //3 }); ``` 对部下面的静态导入 ``` import {counter, incCounter} from './module.js'; console.log(counter); //3 incCounter(); console.log(counter); //4 ``` ## 参考 [webpack4利用import动态加载的一些说明](https://blog.csdn.net/sunq1982/article/details/80540548 ) ******** # Vue 面试 [vue 248个知识点（面试题）为你保驾护航](https://juejin.im/post/5d153267e51d4510624f9809) [Day5 - 前端高频面试题之计算机网络相关](https://juejin.im/post/5d1393ffe51d455a694f955f) # 2018 面試小記 https://cythilya.github.io/2019/01/09/interview/ # HTML5 与 app通信 https://www.google.com.hk/search?hl=zh-CN&q=How%20to%20work%20with%20web%20views%20inside%20native%20apps&gws_rd=ssl # 跨域请求资源的方法： 1. porxy 代理 定义和用法：proxy 代理用于将请求发送给后台服务器，通过服务器来发送请求，然后将请求的结果传递给前端。 实现方法：通过 nginx 代理； 注意点：1、如果你代理的是 https 协议的请求，那么你的 proxy 首先需要信任该证书（尤其是自定义证书）或者忽略证书检查，否则你的请求无法成功。 2. CORS 【Cross-Origin Resource Sharing】 定义和用法：是现代浏览器支持跨域资源请求的一种最常用的方式。 使用方法：一般需要后端人员在处理请求数据的时候，添加允许跨域的相关操作。如下： ``` res.writeHead(200, { 'Content-Type': 'text/html; charset=UTF-8', 'Access-Control-Allow-Origin':'http://localhost', 'Access-Control-Allow-Methods': 'GET, POST, OPTIONS', 'Access-Control-Allow-Headers': 'X-Requested-With, Content-Type'} ); ``` 3. JSONP 原理：通过动态插入一个`<script>`标签。浏览器对`<script>`的资源引用没有同源限制，同时资源加载到页面后会立即执行（没有阻塞的情况下）。 特点：通过情况下，通过动态创建`<script>`来读取他域的动态资源，获取的数据一般为 json 格式。 `callback` 为传递的 js 本地执行的方法名。 实例如下： ``` @ResponseBody @RequestMapping("/getMySeat") public String getMySeatSuccess(@RequestParam("callback") String callback，@RequestParam("name") String name){ Gson gson=new Gson(); Map<String,String> map=new HashMap<>(); map.put("seat","1_2_06_12"); logger.info(callback); return callback+"("+gson.toJson(map)+")"; } ``` 缺点： 1、这种方式无法发送 post 请求（这里） 2、另外要确定 jsonp 的请求是否失败并不容易，大多数框架的实现都是结合超时时间来判定。 # 从输入 url 到显示页面，都经历了什么？ 一般会经历以下几个过程： 1、首先，在浏览器地址栏中输入 url。 2、浏览器先查看浏览器缓存 - 系统缓存 - 路由器缓存，如果缓存中有，会直接在屏幕中显示页面内容。若没有，则跳到第三步操作。 3、在发送 http 请求前，需要域名解析 (DNS 解析)(DNS（域名系统，Domain Name System）是互联网的一项核心服务，它作为可以将域名和 IP 地址相互映射的一个分布式数据库，能够使人更方便的访问互联网，而不用去记住 IP 地址。)，解析获取相应的 IP 地址。 4、浏览器向服务器发起 tcp 连接，与浏览器建立 tcp 三次握手。（TCP 即传输控制协议。TCP 连接是互联网连接协议集的一种。） 5、握手成功后，浏览器向服务器发送 http 请求，请求数据包。 6、服务器处理收到的请求，将数据返回至浏览器。 7、浏览器收到 HTTP 响应。 8、读取页面内容，浏览器渲染，解析 html 源码。 9、生成 Dom 树、解析 css 样式、js 交互。 10、客户端和服务器交互。 11、ajax 查询。 https://cythilya.github.io/2018/11/26/what-happens-when-you-type-an-url-in-the-browser-and-press-enter/ # new 操作符具体干了什么呢？ 1、创建一个空对象，并且 this 变量引用该对象，同时还继承了该函数的原型。 2、属性和方法被加入到 this 引用的对象中。 3、新创建的对象由 this 所引用，并且最后隐式的返回 this 。 # null 和 undefined 的区别？ null 是一个表示 "无" 的对象，转为数值时为 0；undefined 是一个表示 "无" 的原始值，转为数值时为 NaN。 当声明的变量还未被初始化时，变量的默认值为 undefined。 null 用来表示尚未存在的对象 `undefined` 表示 "缺少值"，就是此处应该有一个值，但是还没有定义。典型用法是： （1）变量被声明了，但没有赋值时，就等于 undefined。 （2）调用函数时，应该提供的参数没有提供，该参数等于 undefined。 （3）对象没有赋值的属性，该属性的值为 undefined。 （4）函数没有返回值时，默认返回 undefined。 `null` 表示 "没有对象"，即该处不应该有值。典型用法是： （1） 作为函数的参数，表示该函数的参数不是对象。 （2） 作为对象原型链的终点。 # 什么是闭包 (闭包就是能够读取其他函数内部变量的函数，使得函数不被 GC 回收，如果过多使用闭包，容易导致内存泄露) 包就是能够读取其他函数内部变量的函数。由于在 Javascript 语言中，只有函数内部的子函数才能读取局部变量，因此可以把闭包简单理解成 “定义在一个函数内部的函数”。所以，在本质上，闭包就是将函数内部和函数外部连接起来的一座桥梁。闭包可以用在许多地方。它的最大用处有两个，一个是前面提到的可以读取函数内部的变量，另一个就是让这些变量的值始终保持在内存中。 使用闭包的注意点： 由于闭包会使得函数中的变量都被保存在内存中，内存消耗很大，所以不能滥用闭包，否则会造成网页的性能问题，在 IE 中可能导致内存泄露。解决方法是，在退出函数之前，将不使用的局部变量全部删除。 闭包会在父函数外部，改变父函数内部变量的值。所以，如果你把父函数当作对象（object）使用，把闭包当作它的公用方法（Public Method），把内部变量当作它的私有属性（private value），这时一定要小心，不要随便改变父函数内部变量的值。 好处：(1) 希望一个变量长期驻扎在内存当中 (不被垃圾回收机制回收) (2) 避免全局变量的污染 (3) 私有成员的存在 (4) 安全性提高 # 描述一下盒子模型？ 答案：盒子模型分为 ie 盒子模型和 w3c 盒子模型 ●　ie 的盒子模型包括（margin (外边距)，padding (内边距)，边框 (border）, 内容 (content) (ie 的 width=content+padding+border) ）; ●　w3c 的盒子模型包括（margin (外边距)，padding (内边距)，边框 (border）, 内容 (content) w3c 的 width=content） # css3 样式的优先级，并排序 答案：!important (权重最大) 1000 > 内嵌样式（style=””）> 内部样式 > 外联样式 >@import url (“url”); # 总结 要有非去这家公司不可的决心！ # 其他 [艺术喵 2 年前端面试心路历程（字节跳动、YY、虎牙、BIGO）| 掘金技术征文](https://juejin.im/post/6844904113302568973) [前端笔试面试题](https://github.com/whu-luojian/interview-questions) https://github.com/jaywcjlove/handbook http://vdisk.weibo.com/u/1199897931