知識點(二）

1、Js原型與原型鏈

 

 

 

 

 

 

 

若是試圖引用對象(實例instance)的某個屬性,會首先在對象內部尋找該屬性,直至找不到,而後纔在該對象的原型(instance.prototype)裏去找這個屬性.

 

__proto__ 屬性是指定原型的關鍵

以上, 經過設置 __proto__ 屬性繼承了父類, 若是去掉new 操做, 直接參考以下寫法

 

 

 

 

 

 

 

2、做用域與做用域鏈

js的做用域是靠函數來造成的，也就是說一個函數的變量在函數外不能夠訪問。

一、全局做用域

任何地方都能訪問到的對象擁有全局做用域。

1.1函數外面定義的變量擁有全局做用域

1.2未定義直接賦值的變量自動聲明爲擁有全局做用域

1.3.window對象的屬性擁有全局做用

二、局部做用域

局部做用域通常只在固定的代碼片斷內可訪問到，最多見的例如函數內部，因此在一些地方會把這種做用域成爲函數做用域。

圖一中，a是函數內部聲明並賦值，擁有局部做用域，只能帶函數fn內部使用，在fn外部使用就會報錯，這就是局部做用域的特性，外部沒法訪問。

三、ES6的塊級做用域

ES5只有全局做用域和函數做用域，沒有塊級做用域，

做用域鏈

通俗地講，當聲明一個函數時，局部做用域一級一級向上包起來，就是做用域鏈。

1.當執行函數時，老是先從函數內部找尋局部變量

2.若是內部找不到（函數的局部做用域沒有），則會向建立函數的做用域（聲明函數的做用域）尋找，依次向上

閉包

提到做用域就不得不提到閉包，簡單來說，閉包外部函數可以讀取內部函數的變量。

優勢：閉包能夠造成獨立的空間，永久的保存局部變量。

缺點：保存中間值的狀態缺點是容易形成內存泄漏，由於閉包中的局部變量永遠不會被回收

3、vue渲染原理

 

在Vue1.0裏面，模板實現跟Angular相似，以下圖所示，把模板直接作成在瀏覽器裏面parse成DOM樹，而後去遍歷這個樹，提取其中的各類綁定。

在Vue2.0中，渲染層的實現作了根本性改動，那就是引入了虛擬DOM。

從架構來說，Vue2.0 依然是寫同樣的模板，（Vue2.0於前段時間發佈，具體報道：更輕更快的Vue.js 2.0）。在最左邊，Vue2.0跟1.0的模板語法絕大部分是兼容的。Vue的編譯器在編譯模板以後，會把這些模板編譯成一個渲染函數。而函數被調用的時候就會渲染而且返回一個虛擬DOM的樹。這個樹很是輕量，它的職責就是描述當前界面所應處的狀態。當咱們有了這個虛擬的樹以後，再交給一個patch函數，負責把這些虛擬DOM真正施加到真實的DOM上。在這個過程當中，Vue有自身的響應式系統來偵測在渲染過程當中所依賴到的數據來源。在渲染過程當中，偵測到的數據來源以後，以後就能夠精確感知數據源的變更。到時候就能夠根據須要從新進行渲染。當從新進行渲染以後，會生成一個新的樹，將新樹與舊樹進行對比，就能夠最終得出應施加到真實DOM上的改動。最後再經過patch函數施加改動。

這樣作的主要緣由是，在瀏覽器當中，JavaScript的運算在現代的引擎中很是快，但DOM自己是很是緩慢的東西。當你調用原生DOM API的時候，瀏覽器須要在JavaScript引擎的語境下去接觸原生的DOM的實現，這個過程有至關的性能損耗。因此，本質的考量是，要把耗費時間的操做盡可能放在純粹的計算中去作，保證最後計算出來的須要實際接觸真實DOM的操做是最少的。

 

4、webpack loader、合併項目

webpack自己只能打包Javascript文件，對於其餘資源例如 css，圖片，或者其餘的語法集好比jsx，是沒有辦法加載的。 這就須要對應的loader將資源轉化，加載進來。

翻譯過來：loader就是一個export出來的function。

---

既然是 node module，因此若是你本身要自定義一個loader，徹底能夠這麼寫：

• 配置（推薦）：在 webpack.config.js 文件中指定 loader。   
• 內聯：在每一個 import 語句中顯式指定 loader。
• CLI：在 shell 命令中指定它們。

 

同時在 CommonComponents 目錄下建立 index.js，其內容以下：

 

exports.ComponentA = require('./ComponentA')
exports.ComponentB = require('./ComponentB')
exports.ComponentC = require('./ComponentC')

5、keep-live activity激活

是Vue的內置組件，能在組件切換過程當中將狀態保留在內存中，防止重複渲染DOM。

須要在router中設置router的元信息meta：

keep-alive生命週期鉤子函數：activated、deactivated

使用<keep-alive>會將數據保留在內存中，若是要在每次進入頁面的時候獲取最新的數據，須要在activated階段獲取數據，承擔原來created鉤子中獲取數據的任務。

6、promise

 

基本概念
Promise是一個構造函數，因此能夠 new 出一個Promise的實例
在Promise上有兩個函數 resolve(成功以後的回調函數)和 reject(失敗後的回調函數)
在Promise構造函數的prototype屬性上，有一個 .then() 方法。因此只要是Promise構造函數建立的實例，均可以訪問到 .then()方法
Promise表示一個一步操做，每當咱們new一個Promise的實例，這個實例就表明具體的異步操做。
Promise建立的實例，是一個異步操做，這個異步操做結果，只有兩種結果
狀態1：異步執行成功，須要在內部調用成功的回調函數resolve把結果返回給調用者
狀態2：異步執行失敗，須要在內部調用失敗的回調函數reject把結果返回調用者
因爲Promise的實例是一個異步操做，因此內部拿到操做結果後，沒法使用return把操做結果返回給調用者，這個時候只能使用回調函數的形式，把成功或失敗的結果，返回給調用者
咱們能夠在new出來的Promise實例上，調用 .then()方法，預先爲這個Promise異步操做，指定成功(resolve)和失敗(reject)回調函數

Promise中異常捕獲兩種方式的使用場景

需求 ：前面的Promise執行失敗，可是不要影響後續promise正常執行。

• 此時能夠單獨爲每一個promise經過.then()指定一下失敗的回調

 

7、閉包

閉包就是指有權訪問另外一個函數做用域中的變量的函數。

建立閉包最多見方式，就是在一個函數內部建立另外一個函數。

閉包只能取得包含函數中的任何變量的最後一個值

內存泄漏：閉包會引用包含函數的整個變量對象，若是閉包的做用域鏈中保存着一個HTML元素，那麼就意味着該元素沒法被銷燬。因此咱們有必要在對這個元素操做完以後主動銷燬。

8、flex

display:flex;
flex-direction:row;
justify-content:space-between;

 9、router

一、mode:history hash

二、this.$router.push({path: '/transport/dispatch', query: {paicheNo: obj.paicheNo})   

     this.$router.push({name: 'dispatch', params: {paicheNo: obj.paicheNo}})

10、父子組件通訊

父組件向子組件傳值

在Child.vue中建立props，用於接收父組件傳遞的值

子組件向父組件傳值

在事件的函數中使用$emit來觸發一個自定義事件，並傳遞一個參數，這個參數就是子組件要傳遞給父組件的值