好程序員web前端培訓分享JavaScript學習筆記閉包與繼承

　　好程序員web 前端培訓分享 JavaScript 學習筆記閉包與繼承，閉包：閉包是我們函數的一種高級使用方式， 在聊閉包之前我們要先回顧一下  函數

函數的兩個階段

• 我們一直說函數有兩個階段

1. 定義階段
2. 調用階段
3. 開辟一個  存儲空間
4. 把函數體內的代碼一模一樣的放在這個空間內（不解析變量）
5. 把  存儲空間 的地址給函數名
6. 按照函數名的地址找到函數的  存儲空間
7. 形參賦值
8. 預解析
9. 將函數  存儲空間 中的代碼拿出來執行（才解析變量）
10. 按照函數名的地址找到函數的  存儲空間
11. 形參賦值
12. 預解析
13. 在內存中開辟一個  執行空間
14. 將函數  存儲空間 中的代碼拿出來在剛剛開辟的  執行空間 中執行
15. 執行完畢后，內存中開辟的  執行空間 銷毀

函數定義階段

函數調用階段

重新定義函數調用階段

function fn() {

    console.log('我是 fn 函數')}fn() 

• 函數執行的時候會開辟一個  執行空間 （我們暫且叫他 xxff00 ）
• console.log('我是 fn 函數') 這個代碼就是在 xxff00 這個空間中執行
• 代碼執行完畢以后，這個 xxff00 空間就銷毀了
• 每一個函數會有一個  存儲空間
• 但是每一次調用都會生成一個完全不一樣的  執行空間
• 并且  執行空間 會在函數執行完畢后就銷毀了，但是  存儲空間 不會
• 那么這個函數空間執行完畢就銷毀了，還有什么意義呢？
• 我們可以有一些辦法讓這個空間  不銷毀
• 閉包 ，就是要利用這個  不銷毀的執行空間
• 函數的  執行空間 會在函數執行完畢之后銷毀
• 但是，一旦函數內部返回了一個  引用數據類型 ，并且  在函數外部有變量接受 的情況下
• 那么這個函數  執行空間 就不會銷毀了

函數執行空間

函數執行空間不銷毀

function fn() {

    const obj  = {

       name : 'Jack',

       age : 18,

       gender : '男'

   }

    return obj} const o  = fn()

• 函數執行的時候，會生成一個函數  執行空間 （我們暫且叫他 xxff00 ）
• 代碼在 xxff00 空間中執行
• 在 xxff00 這個空間中聲名了一個 對象空間（xxff11 ）
• 在 xxff00 這個執行空間把 xxff11 這個對象地址返回了
• 函數外部 0 接受的是一個對象的地址沒錯
• 但是是一個在 xxff00 函數執行空間中的 xxff11 對象地址
• 因為 o 變量一直在和這個對象地址關聯著，所以 xxff00 這個空間一直不會銷毀
• 等到什么時候，執行一句代碼 o = null
• 此時， o 變量比在關聯在 xxff00 函數執行空間中的 xxff11 對象地址
• 那么，這個時候函數執行空間 xxff00 就銷毀了
• 閉包就是利用了這個函數執行空間不銷毀的邏輯
• 有幾個條件組成閉包
• 閉包的第一個條件就是利用了不銷毀空間的邏輯
• 只不過不是返回一個  對象數據類型
• 而是返回一個  函數數據類型

閉包

不銷毀的空間

function fn() {

     return  function () {}} const f  = fn()

• f 變量接受的就是一個  fn的執行空間 中的 函數
• 涉及到兩個函數
• 內部函數要查看或者使用著外部函數的變量

內部函數引用外部函數中的變量

function fn() {

    const num  = 100

    // 這個函數給一個名字，方便寫筆記    return  function a() {

       console.log(num)

   }} const f  = fn()

• fn() 的時候會生成一個 xxff00 的執行空間
• 再 xxff00 這個執行空間內部，定義了一個 a 函數的  存儲空間xxff11
• 全局 f 變量接受的就是 xxff00 里面的 xxff11
• 所以 xxff00 就是不會銷毀的空間
• 因為 xxff00 不會銷毀，所以，定義再里面的變量 num 也不會銷毀
• 將來 f() 的時候，就能訪問到 num 變量
• 為什么要叫做特點，就是因為他的每一個點都是優點同時也是缺點

閉包的特點

1. 作用域空間不銷毀

• 優點：  因為不銷毀，變量頁不會銷毀，增加了變量的生命周期
• 缺點：  因為不銷毀，會一直占用內存，多了以后就會導致內存溢出

1. 可以利用閉包訪問再一個函數外部訪問函數內部的變量

• 優點：  可以再函數外部訪問內部數據
• 缺點：  必須要時刻保持引用，導致函數執行棧不被銷毀

1. 保護私有變量

• 優點：  可以把一些變量放在函數里面，不會污染全局
• 缺點：  要利用閉包函數才能訪問，不是很方便
• 有一個 A 函數，再 A 函數內部返回一個 B 函數
• 再 A 函數外部有變量引用這個 B 函數
• B 函數內部訪問著 A 函數內部的私有變量
• 以上三個條件缺一不可
• 繼承是和構造函數相關的一個應用
• 是指， 讓一個構造函數去繼承另一個構造函數的屬性和方法
• 所以繼承一定出現在  兩個構造函數之間
• 我們之前說，構造函數（類）是對一類行為的描述
• 那么我們類這個概念其實也很抽象
• 比如：
• 我們說  國光 /  富士 都是 蘋果的品種，那么我們就可以寫一個  蘋果類 來實例化很多品種出來
• 而  蘋果 /  梨 這些東西都是水果的一種，那么我們就可以寫一個  水果類
• 說過的統一特點就是  甜 /  水分大 ，而不同的水果有不同的特征
• 那么我們就可以讓  蘋果類 來繼承  水果類 的內容，然后再用  水果類 去實例化對象
• 那么實例化出來的就不光有  蘋果類 的屬性和方法，還有  水果類 的屬性和方法
• 其實說到底，到底什么是繼承
• 我們之前說，在我們書寫構造函數的時候，為了解決一個函數重復出現的問題
• 我們把構造函數的  方法 寫在了 prototype 上

閉包概念（熟讀并背誦全文）

繼承

一個小例子

繼承的作用

• 這樣，每一個實例使用的方法就都是來自構造函數的 prototype 上
• 就避免了函數重復出現占用內存得到情況
• 那么，如果兩個構造函數的 prototype 中有一樣的方法呢，是不是也是一種浪費
• 所以我們把構造函數? prototype 中的公共的方法再次盡心提取

  

• 我們準備一個更公共的構造函數，讓構造函數的 __proto__ 指向這個公共的構造函數的 prototype
• 我們有一些常見的繼承方式來實現和達到繼承的效果
• 我們先準備一個父類（也就是要讓別的構造函數使用我這個構造函數的屬性和方法）

常見的繼承方式

function Person() {

     this.name  = 'Jack'}Person.prototype.sayHi  =  function () {

    cosnole.log('hello')}

• 這個 Person 構造函數為父類
• 讓其他的構造函數來繼承他
• 當別的構造函數能夠使用他的屬性和方法的時候，就達到了繼承的效果
• 原型繼承，就是在本身的原型鏈上加一層結構

原型繼承

function Student() {}Student.prototype  =  new Person()

借用構造函數繼承

• 把父類構造函數體借用過來使用一下而已

function Student() {

    Person.call( this)}

組合繼承

• 就是把  原型繼承 和  借用構造函數繼承 兩個方式組合在一起

function Student() {

    Person.call( this)}Student.prototype  =  new Person

ES6 的繼承

• es6 的繼承很容易，而且是固定語法
  // 下面表示創造一個 Student 類，繼承自 Person 類

class Student  extends Person {

    constructor () {

         // 必須在 constructor 里面執行一下 super() 完成繼承          super()

    }}

• 這樣就繼承成功了