重點(diǎn)--作用域(scope)

\color{rgba(254, 67, 101, .8)}{函數(shù)的兩種聲明方式}

1.利用函數(shù)的關(guān)鍵字定義函數(shù)(也叫命名函數(shù)洞豁,因?yàn)橛泻瘮?shù)名)

function fn(){ }
fn();

2.函數(shù)表達(dá)式(匿名函數(shù) 把整個(gè)函數(shù)體賦值給一個(gè)變量\color{rgba(254, 67, 101, .8)}{(這個(gè)變量名不是函數(shù)名)}

js var fn = function(){};

\color{rgba(254, 67, 101, .8)}{作用域:}

1.就是代碼名字(變量)在某個(gè)范圍內(nèi)起作用和效果恐仑,目的是要提高程序的可靠性蹂空,重要的是解決命名沖突
2.js 的作用域(es6:ECMAScript 6 一個(gè)js版本)之前:全局作用域 局部作用域
3.全局作用域:整個(gè)script標(biāo)簽遭顶,或者是一個(gè)單獨(dú)的JS標(biāo)簽
4.局部作用域(函數(shù)作用域): 在函數(shù)內(nèi)部使用驶睦,這個(gè)代碼的名字(變量名)只在函數(shù)內(nèi)部起效果

通常來說锻梳,一段程序代碼中使用到的名字并不總是有效可用的俏橘,而限定這個(gè)名字的\color{rgba(254, 67, 101, .8)}{可用性的代碼范圍}就是這個(gè)名字的作用域枢劝,井联。
作用域的使用提高了程序邏輯的局部性,增強(qiáng)了程序的可靠性呈野,減少了名字的沖突

\color{rgba(254, 67, 101, .8)}{變量的作用域:}

在javascript中低矮,根據(jù)作用域的不同,變量可以分為兩種
全局變量和局部變量(其實(shí)跟函數(shù)全局作用域和局部作用域思想一樣)
\color{rgba(254, 67, 101, .8)}{全局變量:}

        //全局變量
        var num = 10;
        console.log((num));

        function fn() {
            console.log(num);
        }
        fn();
image.png

\color{rgba(254, 67, 101, .8)}{局部變量:}
\color{rgba(254, 67, 101, .8)}{在外部調(diào)用局部變量顯示沒有這個(gè)變量}
\color{rgba(254, 67, 101, .8)}{局部變量:不寫var(在函數(shù)內(nèi)部不聲明直接賦值)就是全局變量}

函數(shù)的形參也可以看作是局部變量

        //局部變量
        function fun() { //num1是局部變量被冒,只能在函數(shù)內(nèi)部適用
            var num1 = 10;
        }
        fun();
        console.log(num1);
image.png
        function fun() { //num1是局部變量军掂,只能在函數(shù)內(nèi)部適用
            var num1 = 10;
            num2 = 20;
        }
        fun();
        //console.log(num1);
        console.log(num2);
image.png

\color{rgba(254, 67, 101, .8)}{從執(zhí)行效率看全局變量和局部變量}

1.全局變量只有瀏覽器關(guān)閉的時(shí)候才會(huì)銷毀,比較占用內(nèi)存
2.局部變量 當(dāng)程序執(zhí)行完畢就會(huì)銷毀昨悼,比較節(jié)約資源

\color{rgba(254, 67, 101, .8)}{ES6之前沒有塊級(jí)作用域蝗锥,ES6新增了會(huì)計(jì)作用域}
\color{rgba(254, 67, 101, .8)}{只要用\{\}包起來的都是塊級(jí)作用域:if\{\}for\{\}}

\color{rgba(254, 67, 101, .8)}{作用域鏈}

\color{rgba(254, 67, 101, .8)}{只要是代碼就有作用域}

如果函數(shù)中還有函數(shù),那么在這個(gè)作用域中又可以誕生一個(gè)作用域
根據(jù)在內(nèi)部函數(shù)可以訪問外部函數(shù)變量的這種機(jī)制率触,用鏈?zhǔn)讲檎覜Q定哪些數(shù)據(jù)能被內(nèi)部函數(shù)訪問终议,就稱作作用域鏈

鏈?zhǔn)讲檎遥簝?nèi)部函數(shù)訪問外部函數(shù)的變量,會(huì)向上一級(jí)查找葱蝗,如果沒有這個(gè)變量穴张,再向更上一級(jí)查找,這就是鏈?zhǔn)讲檎?/p>

結(jié)果采用就近原則两曼,采用離自身最近的那一個(gè)變量皂甘,如下例,輸出外部函數(shù)20悼凑,而不會(huì)輸出全局變量10:

        //作用域鏈
        var num = 10;

        function fn() { //外部函數(shù)
            var num = 20;

            function fun() { //內(nèi)部函數(shù)
                console.log(num);
            }
            fun();
        }
        fn();

\color{rgba(254, 67, 101, .8)}{作用域鏈案例:}
\color{rgba(254, 67, 101, .8)}{案例1:結(jié)果是幾}

分析:


image.png

或者偿枕,就從調(diào)用變量的語句開始向外找,找到上一級(jí)户辫,也是一樣的

        function f1() {
            var num = 123;

            function f2() {
                console.log(num);
            }
            f2();
        }
        var num = 456;
        f1();
image.png

\color{rgba(254, 67, 101, .8)}{案例2:結(jié)果是幾}

        var a = 1;

        function fn1() {
            var a = 2;
            var b = '22';
            fn2();

            function fn2() {
                var a = 3;
                fn3();

                function fn3() {
                    var a = 4;
                    console.log(a); //a的值4
                    console.log(b); //b的值'22''
                }
            }
        }
        fn1();
image.png
function fun(){
    var a = 123;
}
fun();
consloe.log(a);

返回值:


image.png

這里返回a未定義渐夸,就是因?yàn)閍的作用于只限于函數(shù)內(nèi)部,在外部是不起作用的


\color{rgba(254, 67, 101, .8)}{1.全局作用域}

  • \color{rgba(3, 101, 100, .8)}{直接編寫在script標(biāo)簽中的JS代碼渔欢,都在全局作用域}
  • \color{rgba(3, 101, 100, .8)}{全局作用域在頁面打開時(shí)創(chuàng)建墓塌,在頁面關(guān)閉時(shí)銷毀}
  • \color{rgba(3, 101, 100, .8)}{在全局作用域中有一個(gè)全局對象window}
    • \color{rgba(3, 101, 100, .8)}{它代表的是一個(gè)瀏覽器的窗口,它由瀏覽器創(chuàng)建,我們可以直接使用}
    • \color{rgba(3, 101, 100, .8)}{console.log(window);返回值: 【object Window】證明有這個(gè)全局對象}

\color{rgba(254, 67, 101, .8)}{在全局作用域中:}

  • \color{rgba(3, 101, 100, .8)}{1.創(chuàng)建的變量都會(huì)作為window對象的屬性保存}
    • \color{rgba(3, 101, 100, .8)}{var  a = 10;這個(gè)a = 10桃纯;就是作為一個(gè)屬性保存到window對象里}
    • \color{rgba(3, 101, 100, .8)}{console.log(window.a); 返回值就是 10}
    • \color{rgba(3, 101, 100, .8)}{console.log(c);會(huì)報(bào)錯(cuò)酷誓,因?yàn)闆]有這個(gè)變量,但是如果是window.c就顯示undefined}
  • \color{rgba(3, 101, 100, .8)}{2.創(chuàng)建的函數(shù)都會(huì)作為window對象的方法保存}
  • \color{rgba(3, 101, 100, .8)}{全局作用域中的變量都是全局變量态坦,}
  • \color{rgba(3, 101, 100, .8)}{在頁面的任意的部分都可以訪問的到}
  • \color{rgba(3, 101, 100, .8)}{函數(shù)都會(huì)作為window對象的方法保存,所以方法和函數(shù)沒有區(qū)別,因?yàn)槎际莣indow對象的方法}

\color{rgba(254, 67, 101, .8)}{2.函數(shù)作用域(局部作用域)}

function fun(){
    var a = 123;
}
fun();
consloe.log(a);

返回值:


image.png

這里返回a未定義盐数,就是因?yàn)閍的作用于只限于函數(shù)內(nèi)部,在外部是不起作用的


<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript">
            
            /*
             * 作用域
             *  - 作用域指一個(gè)變量的作用的范圍
             *  - 在JS中一共有兩種作用域:
             * 
             *      1.全局作用域
             *          - 直接編寫在script標(biāo)簽中的JS代碼伞梯,都在全局作用域
             *          - 全局作用域在頁面打開時(shí)創(chuàng)建玫氢,在頁面關(guān)閉時(shí)銷毀
             *          - 在全局作用域中有一個(gè)全局對象window,
             *              它代表的是一個(gè)瀏覽器的窗口谜诫,它由瀏覽器創(chuàng)建漾峡,我們可以直接使用
             *              console.log(window);返回值: 【object Window】證明有這個(gè)全局對象
             *          - 在全局作用域中:
             *              1.創(chuàng)建的變量都會(huì)作為window對象的屬性保存
             * 
             *              var a = 10;這個(gè)a = 10;就是作為一個(gè)屬性保存到window對象里
             *              console.log(window.a);  返回值就是  10       
             *              console.log(c);會(huì)報(bào)錯(cuò)喻旷,因?yàn)闆]有這個(gè)變量生逸,但是如果是window.c就顯示undefined
             *  
             *              2.創(chuàng)建的函數(shù)都會(huì)作為window對象的方法保存
             * 
             * 
             * 
             * 
             *          - 全局作用域中的變量都是全局變量,
             *              在頁面的任意的部分都可以訪問的到
             * 
             *      2.函數(shù)作用域(局部作用域)
             * 
             */
            
            function fun(){
                var a = 123;
            }
            fun();
            consloe.log(a);
            
            var a = 10;//這樣的就在全局作用域里,他的上一級(jí)就是script標(biāo)簽,他不在任何元素里
            var b = 20;
            //var c = "hello";
            
            //console.log(window.c);
            
            function fun(){
                console.log("我是fun函數(shù)");
            }
            
            //window.fun();等同于fun();函數(shù)都會(huì)作為window對象的方法保存,所以方法和函數(shù)沒有區(qū)別,因?yàn)槎际莣indow對象的方法
            
            //window.alert("hello");
            
            
            
            
        </script>
    </head>
    <body>
    </body>
</html>

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末且预,一起剝皮案震驚了整個(gè)濱河市槽袄,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌锋谐,老刑警劉巖遍尺,帶你破解...
    沈念sama閱讀 216,919評(píng)論 6 502
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異涮拗,居然都是意外死亡乾戏,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,567評(píng)論 3 392
  • 文/潘曉璐 我一進(jìn)店門三热,熙熙樓的掌柜王于貴愁眉苦臉地迎上來鼓择,“玉大人,你說我怎么就攤上這事就漾」咄耍” “怎么了?”我有些...
    開封第一講書人閱讀 163,316評(píng)論 0 353
  • 文/不壞的土叔 我叫張陵从藤,是天一觀的道長。 經(jīng)常有香客問我锁蠕,道長夷野,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 58,294評(píng)論 1 292
  • 正文 為了忘掉前任荣倾,我火速辦了婚禮悯搔,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘舌仍。我一直安慰自己妒貌,他們只是感情好通危,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,318評(píng)論 6 390
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著灌曙,像睡著了一般菊碟。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上在刺,一...
    開封第一講書人閱讀 51,245評(píng)論 1 299
  • 那天逆害,我揣著相機(jī)與錄音,去河邊找鬼蚣驼。 笑死魄幕,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的颖杏。 我是一名探鬼主播纯陨,決...
    沈念sama閱讀 40,120評(píng)論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼留储!你這毒婦竟也來了翼抠?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 38,964評(píng)論 0 275
  • 序言:老撾萬榮一對情侶失蹤欲鹏,失蹤者是張志新(化名)和其女友劉穎机久,沒想到半個(gè)月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體赔嚎,經(jīng)...
    沈念sama閱讀 45,376評(píng)論 1 313
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡膘盖,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,592評(píng)論 2 333
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了尤误。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片侠畔。...
    茶點(diǎn)故事閱讀 39,764評(píng)論 1 348
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖损晤,靈堂內(nèi)的尸體忽然破棺而出软棺,到底是詐尸還是另有隱情,我是刑警寧澤尤勋,帶...
    沈念sama閱讀 35,460評(píng)論 5 344
  • 正文 年R本政府宣布喘落,位于F島的核電站,受9級(jí)特大地震影響最冰,放射性物質(zhì)發(fā)生泄漏瘦棋。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,070評(píng)論 3 327
  • 文/蒙蒙 一暖哨、第九天 我趴在偏房一處隱蔽的房頂上張望赌朋。 院中可真熱鬧,春花似錦、人聲如沸沛慢。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,697評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽团甲。三九已至逾冬,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間伐庭,已是汗流浹背粉渠。 一陣腳步聲響...
    開封第一講書人閱讀 32,846評(píng)論 1 269
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留圾另,地道東北人霸株。 一個(gè)月前我還...
    沈念sama閱讀 47,819評(píng)論 2 370
  • 正文 我出身青樓,卻偏偏與公主長得像集乔,于是被迫代替她去往敵國和親去件。 傳聞我的和親對象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,665評(píng)論 2 354

推薦閱讀更多精彩內(nèi)容