JS中變數、作用域的本質，定義及使用方法

来源:https://www.cnblogs.com/chenyingying0/archive/2020/02/11/12294830.html
-Advertisement-
Play Games

全局作用域和局部作用域 全局作用域 局部作用域：函數作用域 全局作用域在全局和局部都可以訪問到，局部作用域只能在局部被訪問到 var name="cyy"; function fn(){ var age=25; console.log(name);//cyy console.log(age);//2 ...


全局作用域和局部作用域

全局作用域

局部作用域：函數作用域

全局作用域在全局和局部都可以訪問到，局部作用域只能在局部被訪問到

var name="cyy";

function fn(){
    var age=25;
    console.log(name);//cyy
    console.log(age);//25
}
fn();
console.log(name);//cyy
console.log(age);//報錯age is not defined

js沒有塊級作用域，此處依然是全局變數

if(){
    //全局變數
}
for(){
    //全局變數
}

在函數內，用var聲明的變數是局部變數，沒有用var的是全局變數

function fn(){
    var x=y=1;
}
fn();
console.log(y);//1
console.log(x);//x is not defined
var name="cyy";
function fn(){
    name="cyy2";//沒有用var，所以這裡修改的直接是外面的全局變數name
    console.log(name);//cyy2
}
fn();
console.log(name);//cyy2

變數對象和作用域鏈

此處全局作用域下有name變數和fn函數，實際上都是window對象上的

全局作用域的變數對象的屬性和方法，看得見摸得著，可以訪問

var name="cyy";
function fn(){
    var age=25;
    function fn2(){
        var gender="girl";
    }
}
console.log(window.name===name);//true
console.log(window.fn===fn);//true

此處fn下有age變數和fn2函數

局部作用域的變數對象的屬性和方法，看不見摸不著

 

訪問不存在的變數，會報錯

訪問不存在的屬性，不會報錯

這裡補充一下：一開始我用name進行測試，出現了意想不到的情況

後來發現name是js對象的內置屬性，應儘量避免命名時使用，建議使用 _name

列印window對象即可查看到name

 

 

console.log(window._name);
console.log(_name);

 

 作用域鏈：

如果要查找一個變數，首先會在當前作用域內查找；

如果沒有，就去上一級作用域內查找；

直至到window

因此，裡層可以訪問到外層的變數，但是外層無法訪問到裡層的變數

 

延長作用域鏈的方法

with()相當於開闢了一個新的作用域

裡面的屬性，找不到的話會去外層window上查找

但是不推薦使用with，會帶來後續其他問題

var person={};
person.name="cyy";
person.age=25;
var score=90;

console.log(person.name);//cyy
console.log(person.age);//25
console.log(score);//90

with(person){
    name="cyy2";
    age=cyy2;
    score=99;
}
console.log(person.name);//cyy2
console.log(person.age);//cyy2
console.log(score);//99

迴圈添加點擊事件，獲取到每個點擊按鈕的index

單擊方法需要在迴圈外面定義，否則只會輸出迴圈結束後的 i 的值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button>1</button>
    <button>2</button>
    <button>3</button>
<script>

var btns=document.querySelectorAll("button");
for(var i=0,len=btns.length;i<len;i++){
    myClick(i);
}
function myClick(i){
    btns[i].onclick=function(){
        alert(i);
    }
}
</script>
</body>
</html>

不存在的變數或函數會報錯；不存在的屬性或方法，返回undefined；||是短路操作，形如a||b，如果a的值轉換成布爾值是true的話，a||b等於a；如果a的值轉換成布爾值是false的話，a||b等於b

此處window.person = undefined，因此返回window.person="cyy"

//console.log(person || (person="cyy"));//報錯，person is not defined
console.log(window.person || (window.person="cyy"));//cyy

如果在迴圈中直接綁定點擊事件，由於在迴圈時只是綁定；等到去點擊按鈕是，迴圈早已結束，因此 i 永遠都是迴圈結束後的值

var btns=document.querySelectorAll("button");
for(var i=0,len=btns.length;i<len;i++){
    btns[i].onclick=function(){
        alert(i);//3
    }
}

JS解析機制：預解析

最簡單的情況

var age=25;
function fn(){
    var age=26;
    console.log(age);//26
}
fn();

JS的解析過程：

預解析

逐行讀代碼

var age=25;
function fn(arg){
    console.log(age);
    var age=26;    
}
fn();
/*
js的解析機制：
window:
    age undefined 25
    fn function fn(arg){
            console.log(age);//undefined
            var age=26;    
            console.log(age);//25
        }
fn:
    arg（參數也作為局部變數） undefined
    age undefined
首先查找所有的var，將var聲明的變數都賦值給undefined
函數直接拿過來
讀取時，由於函數已經聲明完了，所以正常執行時直接跳過
直接執行fn()
console.log(age)中的age是預解析的undefined
*/

變數名衝突：預解析時都是undefined

var age=25;//預解析：undefined
...
var age=26;//預解析：undefined

變數和函數名衝突：預解析時跳過變數名，只聲明函數

var age=25;//預解析：undefined
function age(){
    
}

函數與函數名衝突：預解析時選擇後面一個函數，第一個函數被幹掉

function age(){
    var age=24;
}
function age(){
    var age=25;
}

在某些老版本瀏覽器，比如低版本火狐中，無法解析 if 或者 for 內部的函數

所以不推薦在代碼塊里定義函數

if(){
    function fn(){

    }
}

for(){
    function fn2(){
        
    }
}

變數的解析機制：

以var 聲明的變數會預解析

以let 聲明的變數不會預解析

函數的聲明會預解析

函數表達式不會預解析

document.write(fn);
function fn(){}

 

 函數的聲明在預解析時就已經被提前聲明瞭

函數變數的賦值，預解析時被定義為undefined

document.write(fn);//undefined
var fn=function(){}

提前列印後面的變數，列印出來是undefined

console.log(age);//預解析為undefined
var age=25;

如果沒有用var聲明，則無法進行預解析，這樣提前列印時，不知道有該變數的存在，就會報錯

console.log(age);//報錯
age=25;
console.log(a);//列印出預解析的結果，是函數a()
var a=1;
console.log(a);//1
function a(){
    console.log(2);//跳過沒有執行
}
console.log(a);//1
var a=3;
console.log(a);//3
function a(){
    console.log(4);//跳過沒有執行
}
console.log(a);//3
a();//此時a是3，不能當做函數執行，因此報錯

/*
預解析時先查找var：找到var a=1;和var a=3；預解析結果為undefined
然後查找到函數，發現函數a與變數重名，此時變數被幹掉
由於存在兩個重名函數，前面的函數被幹掉，因此a的預解析結果為：
function a(){
    console.log(4);
}
*/

預解析是分標簽進行的

此處上下沒有聯繫，會報錯

<script>
    console.log(a);//報錯
</script>

<script>
    var a=1;
</script>

但是上下順序對換不會出現問題，因為已經正常執行了，與預解析無關

<script>
    var a=1;
</script>

<script>
    console.log(a);//1
</script>
    var a=1;//undefined 1
    function fn(){
        console.log(a);//undefined
        var a=2;//undefined 2
    }
    fn();
    console.log(a);//1

當函數內部沒有var時，不會進行預解析，變數就會通過作用域鏈進行查找

如果函數內部存在var，會進行預解析，變數提前列印就會是undefined

    var a=1;//undefined 1
    function fn(){
        console.log(a);//1 沒有var進行預解析，通過作用域鏈找到外面的a
        a=2;//沒有var進行預解析，通過作用域鏈改變a
    }
    fn();
    console.log(a);//2

參數作為局部變數，也會進行預解析

    var a=1;//undefined 1
    function fn(a){
        //a作為參數，也是局部變數，也會進行預解析
        console.log(a);//undefined
        a=2;//此處修改參數a為2，全局變數沒有影響
    }
    fn();
    console.log(a);//1
    var a=1;//undefined 1
    function fn(a){
        //a作為參數，也是局部變數，也會進行預解析
        console.log(a);//undefined 1
        a=2;//此處修改參數a為2，全局變數沒有影響
    }
    fn(a);//執行時參數為a=1
    console.log(a);//1

記憶體管理與垃圾收集機制

釋放無用的數據，回收記憶體

自動  JS

手動  Objective-C

原理：找出無用的數據，打上標記，釋放記憶體；周期性執行

標記策略：標記清除   引用計數（不常用）

 

IE

JS : BOM  DOM

老版本IE的BOM和DOM，是在c++ COM的基礎上來實現的，基於引用計數法

因此即使使用了標記清除法，還是存在迴圈引用的問題

 

記憶體管理

設置為null，即為解除引用


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

-Advertisement-
Play Games
更多相關文章
  • HTML連載67-手風琴效果、2D轉換模塊
    一、手風琴效果 <style> *{ margin:0; padding:0; } ul{ width: 960px; height: 300px; margin:100px auto; border:1px solid red; ​ } ul li { list-style: none; widt ...
  • HTML基礎標簽圖片文本超鏈接列表表格表單介紹
    1.HTML基礎標簽圖片常見代碼形式<img src="圖片路徑地址" alt="屬性名" title="占位符">常見的圖片格式為以下三種：.jpg（圖片有損壓縮，影響畫質）、.png（圖片無損壓縮、容積大、具有透明通道）、.gif（動圖）。圖片路徑地址分為本地圖片和網路圖片，本地圖片中分為絕對路 ...
  • JavaScript 替換所有匹配內容
    由於JavaScript 的 replace 只能替換一次，因此另外編寫一個能現替換全部匹配內容方法，代碼如下: /* 把 content 中所有的 searchValue 替換為 replaceValue */ function replaceAll(content,searchValue,rep ...
  • html網頁基本結構
    不是 HTML 標簽。它為瀏覽器提供一項信息（聲明），即 HTML 是用什麼版本編寫的。 HTML是一門超文本標記語言，瀏覽器解析html標記後，展示頁面內容，目前流行HTML5，俗稱H5。靜態網頁的拓展名htm或html新建網頁的步驟：1、新建文本文檔，更改拓展名為htm或html2、編寫網頁的基... ...
  • 水平垂直居中的佈局（定寬高和不定寬高）
    一、定寬高 1、絕對定位和負margin值： <section class="absolute"> <div></div> </section> <style> section{ display:block; } section.absolute { width: 100px; height: 10 ...
  • nodejs爬蟲--抓取CSDN某用戶全部文章
    最近正在學習node.js，就像搞一些東西來玩玩，於是這個簡單的爬蟲就誕生了。 ...
  • JS中let、var、const的區別
    先看let和var： 1. console.log(a); // undefined var a = 3; console.log(a); // Uncaught ReferenceError: Cannot access 'a' before initialization let a = 3; 在 ...
  • vue-socket.io跨域問題的解決方法
    報錯信息： 1 Access to XMLHttpRequest at 'http://192.168.37.130:5050/socket.io/?EIO=3&transport=polling&t=N0oqNsW' from origin 'http://localhost:8080' has ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 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 ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類