JS函數高級

来源:https://www.cnblogs.com/jiaoran/archive/2020/07/26/13381970.html

原型與原型鏈 所有函數都有一個特別的屬性: prototype : 顯式原型屬性 所有實例對象都有一個特別的屬性: __proto__ : 隱式原型屬性 顯式原型與隱式原型的關係 函數的prototype: 定義函數時被自動賦值, 值預設為, 即用為原型對象 實例對象的__proto__: 在創建實 ...


原型與原型鏈

  • 所有函數都有一個特別的屬性:
    • prototype : 顯式原型屬性
  • 所有實例對象都有一個特別的屬性:
    • __proto__ : 隱式原型屬性
  • 顯式原型與隱式原型的關係
    • 函數的prototype: 定義函數時被自動賦值, 值預設為{}, 即用為原型對象
    • 實例對象的__proto__: 在創建實例對象時被自動添加, 並賦值為構造函數的prototype值
    • 原型對象即為當前實例對象的父對象
  • 原型鏈
    • 所有的實例對象都有__proto__屬性, 它指向的就是原型對象
    • 這樣通過__proto__屬性就形成了一個鏈的結構---->原型鏈
    • 當查找對象內部的屬性/方法時, js引擎自動沿著這個原型鏈查找
    • 當給對象屬性賦值時不會使用原型鏈, 而只是在當前對象中進行操作

執行上下文與執行上下文棧

  • 變數提升與函數提升
    • 變數提升: 在變數定義語句之前, 就可以訪問到這個變數(undefined)
    • 函數提升: 在函數定義語句之前, 就執行該函數
    • 先有變數提升, 再有函數提升
  • 理解
    • 執行上下文: 由js引擎自動創建的對象, 包含對應作用域中的所有變數屬性
    • 執行上下文棧: 用來管理產生的多個執行上下文
  • 分類:
    • 全局: window
    • 函數: 對程式員來說是透明的
  • 生命周期
    • 全局 : 準備執行全局代碼前產生, 當頁面刷新/關閉頁面時死亡
    • 函數 : 調用函數時產生, 函數執行完時死亡
  • 包含哪些屬性:
    • 全局 :
      • 用var定義的全局變數 ==>undefined
      • 使用function聲明的函數 ===>function
      • this ===>window
    • 函數
      • 用var定義的局部變數 ==>undefined
      • 使用function聲明的函數 ===>function
      • this ===> 調用函數的對象, 如果沒有指定就是window
      • 形參變數 ===>對應實參值
      • arguments ===>實參列表的偽數組
  • 執行上下文創建和初始化的過程
    • 全局:
      • 在全局代碼執行前最先創建一個全局執行上下文(window)
      • 收集一些全局變數, 並初始化
      • 將這些變數設置為window的屬性
    • 函數:
      • 在調用函數時, 在執行函數體之前先創建一個函數執行上下文
      • 收集一些局部變數, 並初始化
      • 將這些變數設置為執行上下文的屬性

作用域與作用域鏈

  • 理解:
    • 作用域: 一塊代碼區域, 在編碼時就確定了, 不會再變化
    • 作用域鏈: 多個嵌套的作用域形成的由內向外的結構, 用於查找變數
  • 分類:
    • 全局
    • 函數
    • js沒有塊作用域(在ES6之前)
  • 作用
    • 作用域: 隔離變數, 可以在不同作用域定義同名的變數不衝突
    • 作用域鏈: 查找變數
  • 區別作用域與執行上下文
    • 作用域: 靜態的, 編碼時就確定了(不是在運行時), 一旦確定就不會變化了
    • 執行上下文: 動態的, 執行代碼時動態創建, 當執行結束消失
    • 聯繫: 執行上下文環境是在對應的作用域中的

閉包

  • 理解:
    • 當嵌套的內部函數引用了外部函數的變數時就產生了閉包
    • 通過chrome工具得知: 閉包本質是內部函數中的一個對象, 這個對象中包含引用的變數屬性
  • 作用:
    • 延長局部變數的生命周期
    • 讓函數外部能操作內部的局部變數
  • 寫一個閉包程式
    function fn1() {
      var a = 2;
      function fn2() {
        a++;
        console.log(a);
      }
      return fn2;
    }
    var f = fn1();
    f();
    f();
    
  • 閉包應用:
    • 模塊化: 封裝一些數據以及操作數據的函數, 向外暴露一些行為
    • 迴圈遍歷加監聽
    • JS框架(jQuery)大量使用了閉包
  • 缺點:
    • 變數占用記憶體的時間可能會過長
    • 可能導致記憶體泄露
    • 解決:
      • 及時釋放 : f = null; //讓內部函數對象成為垃圾對象

記憶體溢出與記憶體泄露

  1. 記憶體溢出
  • 一種程式運行出現的錯誤
  • 當程式運行需要的記憶體超過了剩餘的記憶體時, 就出拋出記憶體溢出的錯誤
  1. 記憶體泄露
  • 占用的記憶體沒有及時釋放
  • 記憶體泄露積累多了就容易導致記憶體溢出
  • 常見的記憶體泄露:
    • 意外的全局變數
    • 沒有及時清理的計時器或回調函數
    • 閉包

您的分享是我們最大的動力!

更多相關文章
  • 西北望鄉何處是,東南見月幾回圓。 月亮又慢悠悠的掛上了天空,趁著睡前夢囈,我就帶領各位可愛的讀者們探索MySql最後的子查詢部分。 說明:有些查詢結果出來結果截圖與題目要求不一樣會出現多餘的欄位是為了方便展示結果的可讀性。實際操作的讀者可以刪除SELECT後面多餘的欄位得到正確的結果。 #WHERE ...
  • Redis是什麼?redis是一款基於BSD協議,開源的非關係型資料庫(nosql資料庫),作者是義大利開發者Salvatore Sanfilippo在2009年發佈,使用C語言編寫;redis是基於記憶體存儲,而且是目前比較流行的鍵值資料庫(key-value database),它提供將記憶體通過... ...
  • MariaDB 資料庫管理系統是 MySQL 的一個分支,主要由開源社區在維護,採用 GPL 授權許可。開發這個分支的原因之一是:甲骨文公司收購了 MySQL 後,有將 MySQL 閉源的潛在風險,因此社區採用分支的方式來避開這個風險。MariaDB完全相容mysql,使用方法也是一樣的。 系統環境 ...
  • 參考:https://juejin.im/entry/58b93af3ac502e006c0820c9 1.常見的加密方式:Base64、MD5、AES、EDS、RSA HTTPS 以及SSL/TSL 什麼是SSL?SSL(Secure Sockets Layer, 安全套接字層),因為原先互聯網上 ...
  • 1.棧的基礎使用,js中數組直接可以作為棧使用,棧遵循先進後出的原則,即js可以使用push()和pop() 比較容易的實現一個棧 20. 有效的括弧給定一個只包括 '(',')','{','}','[',']' 的字元串,判斷字元串是否有效。 有效字元串需滿足: 左括弧必須用相同類型的右括弧閉合。 ...
  • (一)單一 |【1】屬性選擇器 | | | | | | | |p[alt]|選擇具有att屬性的 |p元素 | |p[alt="val"] |選擇att屬性值 |等於val的p | |p[alt^="val"] |匹配att屬性值 |以val開頭的p | |p[alt$="val"] |匹配att屬 ...
  • 美拍短視頻按作者批量下載,去水印的方法教程,很多做自媒體搬運或者要下載美拍短視頻上面的素材,都需要批量下載美拍無水印短視頻。這裡教大家如何按作者批量下載美拍無水印短視頻,並自動修改MD5消重。此文分享的是一個線上的網站工具,不需要下載任何軟體,直接在瀏覽器里打開工具網址就可以使用的。 其實不僅僅是支 ...
  • 24. 兩兩交換鏈表中的節點給定一個鏈表,兩兩交換其中相鄰的節點,並返回交換後的鏈表。 你不能只是單純的改變節點內部的值,而是需要實際的進行節點交換。 示例: 給定 1->2->3->4, 你應該返回 2->1->4->3. 解題:我們定義4個指針如上進行節點交換,1.給head添加一個虛擬頭節點t ...
一周排行
  • 比如要拆分“呵呵呵90909086676喝喝999”,下麵當type=0返回的是中文字元串“呵呵呵,喝喝”,type=1返回的是數字字元串“90909086676,999”, private string GetStrings(string str,int type=0) { IList<strin ...
  • Swagger一個優秀的Api介面文檔生成工具。Swagger可以可以動態生成Api介面文檔,有效的降低前後端人員關於Api介面的溝通成本,促進項目高效開發。 1、使用NuGet安裝最新的包:Swashbuckle.AspNetCore。 2、編輯項目文件(NetCoreTemplate.Web.c ...
  • 2020 年 7 月 30 日, 由.NET基金會和微軟 將舉辦一個線上和為期一天的活動,包括 微軟 .NET 團隊的演講者以及社區的演講者。本次線上大會 專註.NET框架構建微服務,演講者分享構建和部署雲原生應用程式的最佳實踐、模式、提示和技巧。有關更多信息和隨時瞭解情況:https://focu... ...
  • #abp框架Excel導出——基於vue #1.技術棧 ##1.1 前端採用vue,官方提供 UI套件用的是iview ##1.2 後臺是abp——aspnetboilerplate 即abp v1,https://github.com/aspnetboilerplate/aspnetboilerp ...
  • 前言 本文的文字及圖片來源於網路,僅供學習、交流使用,不具有任何商業用途,版權歸原作者所有,如有問題請及時聯繫我們以作處理。 作者:碧茂大數據 PS:如有需要Python學習資料的小伙伴可以加下方的群去找免費管理員領取 input()輸入 Python提供了 input() 內置函數從標準輸入讀入一 ...
  • 從12年到20年,python以肉眼可見的趨勢超過了java,成為了當今It界人人皆知的編程語言。 python為什麼這麼火? 網路編程語言搜索指數 適合初學者 Python具有語法簡單、語句清晰的特點,這就讓初學者在學習階段可以把精力集中在編程對象和思維方法上。 大佬都在用 Google,YouT ...
  • 在社會上存在一種普遍的對培訓機構的學生一種歧視的現象,具體表現在,比如:當你去公司面試的時候,一旦你說了你是培訓機構出來的,那麼基本上你就涼了,那麼你瞞著不說,然後又通過了面試成功入職,但是以後一旦在公司被髮現有培訓經歷,可能會面臨被降薪,甚至被辭退,培訓機構出來的學生,在用人單位眼裡就是能力低下的 ...
  • from typing import List# 這道題看了大佬寫的代碼,經過自己的理解寫出來了。# 從最外圍的四周找有沒有為O的,如果有的話就進入深搜函數,然後深搜遍歷# 判斷上下左右的位置是否為Oclass Solution: def solve(self, board: List[List[s ...
  • import requests; import re; import os; # 1.請求網頁 header = { "user-agent":'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_5) AppleWebKit/537.36 (KHTML, li ...
  • import requests; import re; import os; import parsel; 1.請求網頁 header = { "user-agent":'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_5) AppleWebKit/537. ...