資料筆記2 · 我的文檔

## new 做了什么？ 1. 創建一個空對象 2. 獲取arguments第一個參數 3. 將構造函數的原型鏈賦值給空（新）對象 4. 改變構造函數this指向，指向空對象，使得空對象可以訪問構造函數中的屬性以及原型上的屬性和方法，最后return出去。 * new 實現代碼 ``` js function MyNew(){ var obj = {}, // 截取類數組arguments第一個參數并返回，其實就是構造函數 // 注意：shift會改變原數組，故改變指向使用apply對應第二個參數為去除構造函數剩余的數組arguments Constructor = [].shift.call(arguments) // 構造函數原型賦值給obj對象 obj.__proto__ = Constructor.prototype // 改變構造函數指向，指向obj對象 Constructor.apply(obj, arguments) return obj } ``` * 先分析一下`[].shift.call(arguments)`做了什么？其實等同于`Array.prototype.shift.call()`；call作用相當于把this執行修改指向類數組arguments對象上，讓該對象也同時擁有Array原型上的方法，故這是先改變指向（類數組數據和數組原型方法合并），然后再使用數組原型上的方法shift，進行刪除第一個參數，并作為新的項返回。 ## defer作用 * defer：異步加載js文件，HTML解析遇到他們也不會阻塞，而是異步加載完成，等到解析完成，然后照先后引入順序執行。對于有相互依賴的文件，則最好采取這種方式。 * async：異步加載js文件，HTML解析遇到他們也不會阻塞，會異步加載，但是加載完成則會立即執行。而這時候不看先后順序，只看誰先被下載完成。適合獨立文件。 ## 組件傳遞方式 * 父子通訊： props / $emit和$on $parent / $children ref $attrs / $listeners * 兄弟組件通訊 Vuex eventBus $root $parent * 跨層級組件通訊 provide / inject Vuex eventBus ## v-model語法糖 ``` <input type="text" :value="msg" @input="msg=$event.target.value" /> ``` * 擴展：自定義組件中使用 ``` model:{ prop: 'val', event: 'change' }, props:{ val:{ type: String, default: '' } } // 配合 this.$emit('change', newVal) ``` 注意：在element-ui中二次封裝組件，注意添加$attrs和$listeners，比如一些屬性和方法可以進行直接（繼承）使用。 ## js原型，繼承 https://segmentfault.com/a/1190000016708006 繼承本質是：構造函數繼承和原型繼承。 * 只有構造函數繼承：父級構造函數原型prototype上的屬性和方法無法繼承。特點：解決原型鏈中父類共享引用屬性的問題；創建子類實例，可以向父類傳遞參數；可以實現多個call繼承。缺點：實例并不是父類實例，只是子類實例；只繼承父類實例的屬性和方法，不能繼承父類原型屬性和方法；無法實現函數復用，每個子類都有父類實例函數的副本，影響性能。 ``` js function Person(){ this.name = 'vvmily' this.fn = function(){ console.log('this is a fn') } } Person.prototype.say = function(){ console.log('this is a prototype fn !!!') } function Child(){ Person.call(this) this.age = 19 this.cn = function(){ console.log(this.age) } } Child.prototype.ck = function(){ console.log('ck') } var c = new Child() ``` * 原型繼承：父級構造函數私有變量成為公有化，如當引用類型this.arr則被公有化。特點：父類新增的方法和屬性，子類都能訪問到；缺點：無法實現多繼承；來自原型對象的書友屬性被所有實例共享；子類新增屬性和方法，必須在子構造函數原型繼承父類實例之后（Child.prototype=new Person()）,畢竟需要等待指向改變之后方可添加屬性和方法 ``` js function Person(){ this.name = 'vvmily' this.arr = [1,2,3,4,5] this.fn = function(){ console.log('this is a fn') } } Person.prototype.say = function(){ console.log('this is a prototype fn !!!') } function Child(){ this.age = 19 this.cn = function(){ console.log(this.age) } } Child.prototype.ck = function(){ console.log('ck') } Child.prototype = new Person() Child.prototype.construtor = Child var c = new Child() var c1 = new Child() // 注意：c.arr數據和c1.arr指向一致的 ``` * 組合繼承：父級構造函數和原型繼承父級構造函數實例缺點：調用兩次父級構造函數，生成兩份實例優點：繼承所有屬性和方法；不存在屬性共享問題；可以傳遞參數，函數可以復用。 ``` js function Person(){ this.name = 'vvmily' this.fn = function(){ console.log('this is a fn') } } Person.prototype.say = function(){ console.log('this is a prototype fn !!!') } function Child(){ Person.call(this) this.age = 19 this.cn = function(){ console.log(this.age) } } Child.prototype.ck = function(){ console.log('ck') } Child.prototype = new Person() // 如果不通過原型繼承，則Person原型上的say方法則無法繼承 Child.prototype.construtor = Child // 如果繼承Person實例，則構造函數需要重新指向 var c = new Child() ``` * 組合繼承：構造函數和原型繼承 ``` js function Person(){ this.name = 'vvmily' this.fn = function(){ console.log('this is a fn') } } Person.prototype.say = function(){ console.log('this is a prototype fn !!!') } function Child(){ Person.call(this) this.age = 19 this.cn = function(){ console.log(this.age) } } Child.prototype.ck = function(){ console.log('ck') } Child.prototype = Object.create(Person.prototype) // 重點 Child.prototype.construtor = Child // 重點 var c = new Child() ``` * 來個ES6的Class語法糖吧 ``` class Person { constructor(name){ this.name = name || 'vvmily' } say(){ console.log('this a say fn!!!') } } class Child extends Person { constructor(name){ super(name) this.ccc = 'ccc' } ck(){ console.log('ck') } } var c = new Child('ming') ``` ## ref ref：被用來給元素或者子組件注冊引用信息的，引用信息將會注冊在父組件的$refs對象上。 ## thread-loader作用多進程打包作用，提升打包速度（耗時任務長的，可以考慮，項目較小時，使用的話或許打包更久，反而不好，看項目合適情況）。 ``` test: '/\.js$/', exclude: /node_modules/, use: [ { loader: 'thread-loader', options:{ worders: 2 // 進程數量 2 } } ] ``` ## 波菲那齊數列 * 斐波那契數列又被稱為黃金分割數列，指的是這樣的一個數列：1,1,2,3,5,8,13,21,34....，它有如下遞推的方法定義：F(1)=1,F(2)=1,F(n)=F(n-1)+F(n-2)(n>=2,n是正整數)，請使用js實現斐波那契函數。四種實現方式，具體參考：https://segmentfault.com/a/1190000018473729 ## 瀏覽器加載網頁的主要步驟包括哪些？如何針對步驟進行性能優化？ ## 防抖節流防抖節流實現：http://www.hmoore.net/vvmily_king/vvmily/2331774 ## 事件委托 * 利用DOM元素默認冒泡行為，實現在上級掛載事件，可以通過e.stopPropagation()阻止冒泡事件，既停止事件冒泡； * 優點：減小內存，和事件注冊。 * 注意：e.preventDefault();阻止事件默認行為。動畫指令實現，過濾器實現 ## less scss區別 * 首先sass和less都是css的預編譯處理語言，他們引入了mixins，參數，嵌套規則，運算，顏色，名字空間，作用域，JavaScript賦值等加快了css開發效率。 * sass和less主要區別:在于實現方式 less是基于JavaScript的在客戶端處理所以安裝的時候用npm，sass是基于ruby所以在服務器處理。 * 很多開發者不會選擇LESS因為JavaScript引擎需要額外的時間來處理代碼然后輸出修改過的CSS到瀏覽器。 H5新特性 https://blog.csdn.net/caseywei/article/details/81105544 * HTML5有哪些新特性,移除了那些元素？如何處理HTML5新標簽的瀏覽器兼容問題？如何區分HTML和HTML5 * * 新增加了圖像、位置、存儲、多任務等功能。 * * 新增元素： * * canvas * * 用于媒介回放的video和audio元素 * * 本地離線存儲。localStorage長期存儲數據，瀏覽器關閉后數據不丟失;sessionStorage的數據在瀏覽器關閉后自動刪除 * * 語意化更好的內容元素，比如 article footer header nav section * * 位置API：Geolocation * * 表單控件，calendar date time email url search * 新的技術：web worker(web worker是運行在后臺的 JavaScript，獨立于其他腳本，不會影響頁面的性能。您可以繼續做任何愿意做的事情：點擊、選取內容等等，而此時 web worker 在后臺運行) web socket * 拖放API：drag、drop * 移除的元素： * * 純表現的元素：basefont big center font s strike tt u * * 性能較差元素：frame frameset noframes * * 區分： * * DOCTYPE聲明的方式是區分重要因素 * * 根據新增加的結構、功能來區分 ## 瀏覽器有哪些對象 * navigator：獲取瀏覽器信息 * * screen：獲取屏幕信息 * * location：獲取當前頁面URL信息 * * document：對象表示當前頁面。由于HTML在瀏覽器中以DOM形式表示為樹形結構，document對象就是整個DOM樹的根節點。 * * history：對象保存了瀏覽器的歷史記錄。JavaScript可以調用history對象的back()或forward(),相當于用戶點擊了瀏覽器的后腿或前進按鈕。 ## BFC是什么 **觸發BFC的條件** * body根元素 * 設置浮動，不包括none * 設置定位，absoulte或者fixed * 行內塊顯示模式，inline-block * 設置overflow，即hidden，auto，scroll * 表格單元格，table-cell * 彈性布局，flex https://www.itcast.cn/news/20201016/16152387135.shtml ## Promise實現 https://juejin.cn/post/6856213486633304078#heading-0 ## 響應式原理 https://segmentfault.com/a/1190000019700618 loader和plugin區別 es6中module，amd,cmd和module區別 echart / canvas實現 promise原理 http1.2.3 webpack平常都會配置那些，用過那些插件，或者說plugin 計算屬性和watch 區別和使用場景 1、響應式原理 https://segmentfault.com/a/1190000019700618 2、js、h5新特性 3、http(1\2\3)，請求過程，握手，解析構建渲染等等 4、性能優化，如緩存賴加載等等 5、webpack 6、原型 7、設計模式 7、繼承，多態 8、vue的相關內容 9、css(less\scss、動畫） 10、事件委托、異步隊列 11、堆棧移動端、小程序