一篇文章帶你瞭解JavaScript中的變數,作用域和記憶體問題

来源:https://www.cnblogs.com/Vay123/archive/2019/12/26/12102471.html
-Advertisement-
Play Games

1 在JavaScript中的變數分別區分為兩種: 一種為基本類型值,一種為應用類型值。 基本類型值指的是簡單的數據段 引用類型值為可能由多個值組成的對象 引用類型的值是保存在記憶體中的對象,JavaScript不允許直接操作對象的記憶體空間,實際上操作對象的引用而不是實際對象。 var dada = ...


1

 

在JavaScript中的變數分別區分為兩種:

 

一種為基本類型值,一種為應用類型值。

 

基本類型值指的是簡單的數據段

 

引用類型值為可能由多個值組成的對象

 

一篇文章帶你瞭解JavaScript中的變數,作用域和記憶體問題

 

 

引用類型的值是保存在記憶體中的對象,JavaScript不允許直接操作對象的記憶體空間,實際上操作對象的引用而不是實際對象。

 

一篇文章帶你瞭解JavaScript中的變數,作用域和記憶體問題

 

var dada = new Object();undefineddada.name = "dada";"dada"console.log(dada.name);VM158:1 dadaundefined
一篇文章帶你瞭解JavaScript中的變數,作用域和記憶體問題

 

 

var da1 = "da1";undefinedda1.age = 12;12console.log(da1.age);VM272:1 undefinedundefined

基本類型的值添加屬性,是不管用的,只能給引用類型的值動態地添加屬性,才是有用的。

 

2

 

複製變數值

 

就是從一個變數向另一個變數複製 基本類型值 和 引用類型值

 

基本類型的值添加屬性,是不管用的,只能給引用類型的值動態地添加屬性,才是有用的。2複製變數值就是從一個變數向另一個變數複製 基本類型值 和 引用類型值
一篇文章帶你瞭解JavaScript中的變數,作用域和記憶體問題

 

da1中保存的值是12,使用da1的值來初始化da2時,da2中也保存了值12,但是d2中的值12和da1中的值12是完全獨立的。這兩個變數可以參與任何操作互不影響。

我自己是一名從事了多年開發的web前端老程式員,目前辭職在做自己的web前端私人定製課程,今年年初我花了一個月整理了一份最適合2019年學習的web前端學習乾貨,各種框架都有整理,送給每一位前端小伙伴,想要獲取的可以關註我並添加我的web前端交流群:600610151,即可免費獲取。

從一個變數向另一個變數複製引用類型的值:

 

引用類型的值實際上是一個指針,是指向存儲在堆中的一個對象,引用類型的複製,是將指向引用同一個對象,所以改變其中一個變數,另一個變數也會受到影響。

var da3 = new Object();var da4 = da3;da3.name = "dada";console.log(da4.name);
一篇文章帶你瞭解JavaScript中的變數,作用域和記憶體問題

 

 

da3和da4指向同一個對象,da3添加name屬性後,da4來訪問這個屬性,因為兩個變數指向同一個對象,所以輸出結果為dada。

 

3

 

參數傳遞:

 

在JavaScript中所有函數的參數都是按值傳遞的,參數按值傳遞的意思,和複製一樣的,把函數外的值傳遞到函數內部。

function addNum(num){ num = num + 1; return num;}var da5 = 12;var result = addNum(da5);console.log(da5);console.log(result);
一篇文章帶你瞭解JavaScript中的變數,作用域和記憶體問題

 

函數addNum有一個參數num,這個參數實際為函數的局部變數。調用這個函數,變數da5作為參數被傳遞給了這個函數,這個變數的值為12,所以參數num為12在這個addNum()函數中使用。

function setName(obj) { obj.name = "dada";}var da6 = new Object();setName(da6);console.log(da6.name);
一篇文章帶你瞭解JavaScript中的變數,作用域和記憶體問題

 

檢測類型:

 

typeof操作符是用來檢測一個變數是否是基本數據類型,如果變數的值為一個對象或null,那麼這個typeof操作符下返回的就是object。

var da7 = "dada";var da8 = 12;var da9;var da10 = null;var da11 = new Object();console.log(typeof da7);console.log(typeof da8);console.log(typeof da9);console.log(typeof da10);console.log(typeof da11);
一篇文章帶你瞭解JavaScript中的變數,作用域和記憶體問題

 

instanceof操作符,是用來乾什麼的呢?判斷是什麼類型的對象。

// 前提先定義personconsole.log(personinstanceof Object);console.log(person instanceof Array);console.log(personinstanceofRegExp);

註意,所有的引用類型的值都是Object的實例,所以檢測引用類型的值和Object構造函數時,instanceof操作符都是返回true。instanceof操作符檢測基本類型的值,返回的則都是false。因為instanceof檢測的都是什麼類型的對象。

 

4

 

作用域:

 

當代碼在一個環境中執行時,會創建變數對象的一個作用域鏈,這個作用域鏈的用途是 保證對執行環境有權訪問的多有變數和函數的有序訪問。全局執行環境的變數對象都是作用域鏈中的最後一個對象。

 

標識符解析是沿著作用域鏈一級一級地搜索標識符的過程。

var da12 = "dada"function changeDa(){ if(da12 === "dada"){  da12 = "da"; }else{  da12 = "da1"; }}changeDa();console.log(da12);
一篇文章帶你瞭解JavaScript中的變數,作用域和記憶體問題

 

函數changeDa()的作用域鏈包含兩個對象:

 

它自己的變數對象,和,全局環境的 變數對象。

 

它自己的 定義著的arguments對象

var da12 = "dada"function changeDa(){ var anotherDa = "dadada";  function daDa(){  var tempDa = anotherDa;  anotherDa = da12;  da12 = tempDa;  // 可以訪問 tempDa, anotherDa,da12 } // 這裡只能訪問 da12,anotherDa daDa();}// 這裡只能訪問da12;changeDa();

 

一篇文章帶你瞭解JavaScript中的變數,作用域和記憶體問題

 

分析執行環境,有3個,一個為全局環境,一個為changeDa()的局部環境,一個為daDa()的局部環境。

 

全局環境中有一個變數da12,和一個函數changeDa()。

 

changeDa()的局部環境中有什麼?

 

一個變數anotherDa,一個名為daDa()的函數。這個函數可以訪問全局變數中的da12。

 

daDa()的局部環境中有什麼?

 

一個變數tempDa,該變數只能在這個環境中訪問。

 

無論是全局環境還是changeDa()的局部環境都無法訪問tempDa。

 

一篇文章帶你瞭解JavaScript中的變數,作用域和記憶體問題

 

 

一篇文章帶你瞭解JavaScript中的變數,作用域和記憶體問題

 

 

一篇文章帶你瞭解JavaScript中的變數,作用域和記憶體問題

 

 

為什麼內部的daDa()可以訪問其他兩個環境中的所有變數呢?

 

因為那是它們兩個的環境是它的父執行環境。

 

內部環境可以通過作用域鏈訪問所有的外部環境,但是外部環境不能訪問內部環境中的任何變數和函數,內部環境都可以向上搜索作用域鏈,查變數和函數名,不能向下搜索作用域鏈進入另一個環境。

 

對於daDa()函數,其中作用域鏈包含3個對象:

 

daDa()的變數對象,changeDa()的變數對象,全局變數對象。

 

過程:

 

daDa()函數的局部環境,會先開始搜索自己的變數對象中的變數和函數名,如果找不到,會向上搜索上一級的作用域鏈。

 

對於changDa()中的環境:

 

它包含兩個對象::一為它自己的變數對象,二為全局變數對象。

 

即它不能訪問daDa()函數的局部環境。

 

5

 

執行環境分兩種:

 

一種為全局作用域,一種為局部作用域。

 

如何理解 try catch 延長了作用域鏈?

 

with語句和 try catch 都可以延長作用域鏈

 

with比較好理解,而且一般有性能問題,也不推薦用

 

try catch 是捕獲Error對象的時候 會新開一個作用域嗎?

 

還是說 catch的大括弧內就是一個能訪問到error對象的塊級作用域?

 

try中的代碼捕獲到錯誤以後,會把異常對象推入一個可變對象並置於用域的頭部,在catch代碼塊內部,函數的所有局部變數將會被放在第二個作用域對象中,catch中的代碼執行完,會立即銷毀當前作用域。

 

什麼叫延長作用域鏈

 

執行環境(變數對象可謂是它的衍生物)、作用域、作用域鏈

 

一篇文章帶你瞭解JavaScript中的變數,作用域和記憶體問題

 

 

作用域:函數當前執行環境。

 

作用域鏈:執行環境產生的變數對象構成。 作用域鏈是保證函數在執行時能夠正確訪問需要的變數和函數。

 

作用域鏈最外層就是全局作用域

 

一篇文章帶你瞭解JavaScript中的變數,作用域和記憶體問題

 

var i = 0;function dada(){    console.log(i);}undefineddada();VM656:3 0undefine

在函數中是沒有存在i的,但是在調用這個函數時會返回為0,這是為什麼呢?這就是函數作用域鏈的作用。

 

延長一: try catch

 

一篇文章帶你瞭解JavaScript中的變數,作用域和記憶體問題

 

 

一篇文章帶你瞭解JavaScript中的變數,作用域和記憶體問題

 

 

(function(window){   try{       throw Error("出錯誤了");   }catch(e){      alert(e);  //alert("Error: 出錯誤了")   }   console.log(e);  //undefind})(window);

在執行catch語句塊時,JavaScript自動把其執行環境添加作用域鏈中,但是該語句塊執行完後又自動把該執行環境(變數對象)移除。

alert(e) ==  alert("Error:出現錯誤");console.log(e)  ==  undefined;

IE結果:

alert(e)  =>  alert("Error: 出錯誤了");   console.log(e) =>   object Error: 出錯誤了{description: "出錯誤了",message: "出錯誤了",name: "Error"}

延長二:with

 

一篇文章帶你瞭解JavaScript中的變數,作用域和記憶體問題

 

 function da(){    console.log(location.href); } function da(){     with(location){         console.log(href);     } }

兩種方式是等價的:

 

前提是非嚴格模式下, 因為嚴格模式下不支持 with這種方式。

 

一篇文章帶你瞭解JavaScript中的變數,作用域和記憶體問題

 

 

延長作用域的表現

 

一篇文章帶你瞭解JavaScript中的變數,作用域和記憶體問題

 

 

什麼是作用域鏈?

 

我的理解就是,根據在內部函數可以訪問外部函數變數的這種機制,用鏈式查找決定哪些數據能被內部函數訪問。

 

想要知道js怎麼鏈式查找,就得先瞭解js的執行環境。

 

每個函數運行時都會產生一個執行環境,而這個執行環境怎麼表示呢?

 

js為每一個執行環境關聯了一個變數對象。環境中定義的所有變數和函數都保存在這個對象中。

 

沒有塊級作用域:

if(true) { var da = "dada";}console.log(da);

 

一篇文章帶你瞭解JavaScript中的變數,作用域和記憶體問題

 

 

一篇文章帶你瞭解JavaScript中的變數,作用域和記憶體問題

 

function add(num1,num2){    var num = num1 + num2;    return num;}undefinedvar result = add(1,2);undefinedconsole.log(result);VM962:1 3undefined

 

一篇文章帶你瞭解JavaScript中的變數,作用域和記憶體問題

 

 

向上查詢:

 

一篇文章帶你瞭解JavaScript中的變數,作用域和記憶體問題

 

var da = "dada";function getDa(){ var da = "dadada"; return da;}console.log(getDa());

JavaScript中最常用的垃圾收集方式是標記清除,另一種不太常見的垃圾策略叫做引用計數。

 

基本類型值和引用類型值:

 

基本類型值在記憶體中占據固定的空間,保存在棧記憶體中,從一個變數向另一個變數複製基本類型的值,會創建這個值的一個副本,引用類型的值為對象,保存在堆記憶體中。

 

包含引用類型值的變數實際上包含的並不是對象本身,而是一個指向對象的指針。

 

typeof操作符判斷的是一個值是哪種基本類型,instanceof操作符判斷的是一個值是哪種引用類型。

 

執行環境分:

 

全局執行環境,函數執行環境。

 

每次進入一個新的執行環境時,都會創建一個用於搜索變數和函數的作用域鏈。


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

-Advertisement-
Play Games
更多相關文章
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...