[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