首頁 > web前端 > js教程 > 主體

思維腦圖+程式碼範例讓作用域到作用域鏈的知識點一目了然!

coldplay.xixi
發布: 2021-03-18 10:19:28
轉載
2014 人瀏覽過

思維腦圖+程式碼範例讓作用域到作用域鏈的知識點一目了然!

作用域

#作用域的篇幅不會太長,作為自己對Js總結的第三篇文章,主要是承上啟下。
之後會涉及到執行上下文,閉包等相關專題,為了避免內容過多,作用域這一部分單獨總結。

目錄

  • 前言
  • #一、作用域的定義
  • 二、理解作用域
  • 三、作用域鏈
  • 四、思考與總結
  • 五、寫在最後

## (免費學習推薦:思維腦圖+程式碼範例讓作用域到作用域鏈的知識點一目了然!

javascript影片教學

  1. 前言

JavaScript內功系列:

this指向詳解,思考腦圖與程式碼的結合,讓你一篇搞懂this、call、apply。系列(一)

從原型到原型鏈,修練JavaScript內功這篇文章真的不能錯過!系列(二)思維腦圖+程式碼範例讓作用域到作用域鏈的知識點一目了然!

本文


一、作用域的定義

一張導圖概括本節內容
  1. 注意:除了作用域,在此送大家2020最新企業級Vue3.0/Js/ES6/TS/React/Node等實戰視頻教程,點擊此處免費獲取,小白勿進哦
  2. 1.1 常見的解釋
  3. 一段程式碼中所用到的
名字

並不總是有效,而限定它的可用性的範圍就是這個名字的作用域;作用域規定了

如何找到變數

,也就是確定目前執行程式碼對變數的存取權限;

    通俗的講作用域就是
  • 一套規則
  • ,用來決定在何處以及如何找出
某個變數

的規則

    function func(){
    	var a = 100;
    	console.log(a); // 100}console.log(a) // a is not defined a变量并不是任何地方都可以被找到的
    登入後複製
  • 1.2 JavaScript中作用域工作模型

    JavaScript 採用是詞法作用域(lexical scoping),也就是靜態作用域:

    函數的作用域在函數定義的時候就決定了

    與之對應的還有一個動態作用域:
    • 函數的作用域是在函數呼叫的時候才決定的;

      1.3 全域變數和局部變數
    • 根據定義變數的方式又可以分為:
    局部變數:只能在函數中訪問,該函數外不可訪問;

    定義在函數中的變數思維腦圖+程式碼範例讓作用域到作用域鏈的知識點一目了然!

    function fn(){
    	var name = '余光';
    	console.log(name);}console.log(name); // ?fn(); // ?
    登入後複製

    全域:任何地方都能訪問到的物件擁有全域作用域。

    函數外定義的變數

    所有末定義直接賦值的變數自動宣告為擁有全域作用域

    var a = 100;console.log('a1-',a);function fn(){
    	a = 1000;
    	console.log('a2-',a);}console.log('a3-',a);fn();console.log('a4-',a);
    登入後複製
    注意:在ES6之後又提出了塊級作用域,它們之間的區別我們之後再來討論。

    • 二、理解作用域
    • #根據第一節的描述,我們一一驗證
    • #2.1 理解詞法作用域<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">var value = 1;function foo() {     console.log(value);}function bar() {     var value = 2;     foo();}bar();</pre><div class="contentsignin">登入後複製</div></div>我們結合定義去分析:
    • 執行bar
    • 函數,函數內部形成了局部作用域;
    • 宣告value變量,並賦值2
    • 執行
    foo

    函數,函數foo的作用域內沒有value這個變量,它會向外尋找

    根據詞法作用域的規則,函數定義時,foo的外部作用域為全域作用域

    列印

    結果是1

    如果是動態作用域的話:結果

    就是2

    ,你不知道你是否想明白了?

    2.2 全域變數

    var str = '全局变量';function func(){
    	console.log(str+1);
    	function childFn(){
    		console.log(str+2);
    		function fn(){
    			console.log(str+3);
    		};
    		fn();
    	};
    	childFn();}func();// 全局变量1// 全局变量2// 全局变量3
    登入後複製
    再來分析下面的程式碼:
    var a = 100;function fn(){
    	a = 1000;
    	console.log('a1-',a);}console.log('a2-',a);fn();console.log('a3-',a);// a2- 100 // 在当前作用域下查找变量a => 100// a1- 1000 // 函数执行时,全局变量a已经被重新赋值// a3- 1000 // 全局变量a => 1000
    登入後複製
      2.3 局部作用域
    • #局部作用域一般只在固定的程式碼片段內可訪問到,最常見的就是以函數為單位的:
    function fn(){
        var name="余光";
        function childFn(){
            console.log(name);
        }
        childFn(); // 余光}console.log(name); // name is not defined
    登入後複製
  • 三、作用域鏈
  • 3.1 當查找變數的時候都發生了什麼事?
  • 會先從目前上下文的變數物件中找出;

    如果沒有找到,就會從父級(詞法層面上的父層級)執行上下文的變數物件中查找;

    ###一直找到全域上下文的變數對象,也就是全域物件;######作用域鏈的頂端就是全域物件; #########這樣###由多個執行上下文的變數物件構成的鍊錶就叫做作用域鏈###,從某種意義上很類似原型和原型鏈。 #########3.2 作用域鍊和原型繼承查找時的差異:######
    • 查找一个普通对象的属性,但是在当前对象和其原型中都找不到时,会返回undefined
    • 查找的属性在作用域链中不存在的话就会抛出ReferenceError

    3.3 作用域嵌套

    既然每一个函数就可以形成一个作用域(词法作用域 || 块级作用域),那么当然也会存在多个作用域嵌套的情况,他们遵循这样的查询规则:

    • 内部作用域有权访问外部作用域;
    • 外部作用域无法访问内部作用域;(真是是这样吗?)
    • 兄弟作用域不可互相访问;

    在《你不知道的Js》中,希望读者可以将作用域的嵌套和作用域链想象成这样:

    思維腦圖+程式碼範例讓作用域到作用域鏈的知識點一目了然!

    四、思考与总结

    4.1 总结

    思維腦圖+程式碼範例讓作用域到作用域鏈的知識點一目了然!

    4.2 思考

    最后,让我们看一个《JavaScript权威指南》中的两段代码:

    var scope = "global scope";function checkscope1(){
        var scope = "local scope";
        function f(){
            return scope;
        }
        return f(); // 注意}checkscope1();var scope = "global scope";function checkscope2(){
        var scope = "local scope";
        function f(){
            return scope;
        }
        return f;}checkscope2()();
    登入後複製

    两段代码的结果都是"local scope",书中的回答是:JavaScript 函数的执行用到了作用域链,这个作用域链是在函数定义的时候创建的。嵌套的函数 f() 定义在这个作用域链里,其中的变量 scope 一定是局部变量,不管何时何地执行函数 f(),这种绑定在执行 f() 时依然有效。

    但是它们内部经历的事情是一样的吗?

    相关免费学习推荐:javascript视频教程

    以上是思維腦圖+程式碼範例讓作用域到作用域鏈的知識點一目了然!的詳細內容。更多資訊請關注PHP中文網其他相關文章!

  • 相關標籤:
    來源:csdn.net
    本網站聲明
    本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
    作者最新文章
    最新問題
    熱門教學
    更多>
    最新下載
    更多>
    網站特效
    網站源碼
    網站素材
    前端模板